(共556篇)
全部分类

获取元素节点两种方式的区别
[ JS基础 ] 

获取元素节点两种方式的区别

既然getXXXByXXX()queryXXX两种方式都可用来获取元素节点,他们之间肯定是有区别的:

getXXXByXXX()获取到的是一个动态的元素集合,queryXXX获取到的是一个静态的节点集合

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<p>hello world</p>
<p>hello world</p>
<script>
    var p1 = document.getElementsByTagName("p");
    var p2 = document.querySelectorAll("p");
    console.log("p1: ", p1, ",       p1.length: ", p1.length);
    console.log("p2: ", p2, ",        p2.length: ", p2.length);

    document.body.append(p1[0].cloneNode(true));
    console.log("p1: ", p1, ",        p1.length: ", p1.length);
    console.log("p2: ", p2, ",        p2.length: ", p2.length);
</script>

案例源码

从结果中可以看出来,往页面中插入一个 p 元素的克隆元素后,变量p1的结果自动发生了变化,p2中结果的数量依然是2

这就是因为getXXXBYXXX的方式获取到的元素列表,在使用该列表结果时,JS 引擎会按照当时查找元素的条件重新查找一遍。

除此之外,element.children/chidrenElementCount/firstElementChild/lastElementChild/previousElementSibling/nextElementSibling属性也属于动态属性,它们的返回值在重新使用时,也会自动重查。