js的计时器对象以及DOM元素子父节点的操作

最新推荐文章于 2024-06-11 23:11:43 发布

原创最新推荐文章于 2024-06-11 23:11:43 发布 · 177 阅读

CC 4.0 BY-SA版权

博客主要介绍了JS的计时器对象和DOM元素子父节点的操作。计时器对象包括超时调用、间歇调用，还提到用超时调用实现间歇调用及window.requestAnimationFrame()方法。DOM元素操作方面，给出了获取ul子节点、子元素，以及li前后节点和元素的方法。

一、js的计时器对象

1、超时调用

超时调用需要用window对象的setTimeout()方法，它接受两个参数，分别是要执行的代码和以毫秒表示的时间（即在执行代码前要等待的毫秒数）。
第一个参数可以是一个包含Javascript代码的字符串，也可以是一个函数，
例如：setTimeout( "alert('hi')",1000); setTimeout(function(){alert('hi')},1000); （推荐的调用方式）；
调用setTimeout()方法之后，该方法会返回一个数值ID，表示超时调用，可以用它来取消超时调用。同时调用clearTimeout()方法并将相应的超时调用ID作为参数传进来，使用方法如下：

 var timeoutId=setTimeout(function(){alert('hi')},1000);  
 clearTimeout(timeoutId);

（只要在指定的时间尚未过去之前调用 clearTimeout(),就可以完全取消超时调用，那么上面的代码就像什么都没发生一样）

2、间歇调用

间歇调用的方法是setInterval(),它接受的参数和setTimeout()一样，只不过它表示的是按照指定的时间重复的执行代码；
间歇调用也会返回一个间歇调用的ID，，这个ID用于在将来某个时刻取消间歇调用。可使用clearInterval()方法，并给它传入一个相应的间歇调用ID，这样就可以取消间歇调用了。
使用方法如下：

function sayHi(){
alert("Hi");
}
t=setInterval(sayHi,1000);
clearInterval(t);

3、用超时调用实现间歇调用

sayHi();
function sayHi(){
alert("Hi");
setTimeout(sayHi,1000);
}

超时调用和间歇调用的优点是可以控制时间，缺点是在网页被缩小或者切换选项卡之后计时器继续执行

4、window.requestAnimationFrame()方法

该方法是告诉浏览器当前需要执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。
它的缺点是时间没办法设置时间是根据电脑的刷新频率，优点是在网页被缩小或者切换选项卡之后计时器暂停。
使用方法如下：

var num=0;
loop();
function loop(){
        console.log(num++);
        window.requestAnimationFrame(loop);
}

二、DOM元素子父节点的操作

例如：

<ul class="ulmenu">
    <li>1</li>
    <li class="lilist">2</li>
    <li>3</li>
    <li>4</li>
</ul>
<script>
var ulmenu=document.getElementsByClassName("ulmenu")[0];
    var lilist=document.getElementsByClassName("lilist")[0];
</script>

要获取ul的所有子节点的方法为：console.log(ulmenu.childNodes);（包括按下的回车）
要获取ul的所有子元素的方法为：console.log(ulmenu.children);（4个li元素）
要获取li的下一个节点的方法为：console.log(lilist.nextSibling)；（回车）
要获取li的下一个元素的方法为 console.log(lilist.nextElementSibling)；（下一个li）
-要获取li的前一个元素的方法为 console.log(lilist.previousElementSibling);（前一个li）
要获取li的前一个节点的方法为： console.log(lilist.previousSibling);（回车）