getelementbyid 和 queryselector 获取的区别

Posted 2021-06-20 贪吃ღ大魔王

getelementbyid 和 queryselector 获取的区别

querySelector()是用于接收一个CSS选择符，返回与该模式匹配的第一个元素；querySelectorAll()用于选择匹配到的所有元素

简单的说，query选择符选出来的元素及元素数组是静态的，而getElement这种方法选出的元素是动态的。
什么叫静态的？意思是指选出的所有元素的数组，不会随着文档操作而改变。

---

举例：

  <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>

---

使用queryselector

   var ul=document.querySelector('ul');
        var list=ul.querySelectorAll('li');
        for(var i=0;i<list.length;i++){
            ul.appendChild(document.createElement('li'));
        }//这个时候就创建了3个新的li，添加在ul列表上。
        console.log(list.length) //输出的结果仍然是3，不是此时li的数量6

---

反观getElement方法

 var ul=document.getElementsByTagName('ul')[0];
        var list=ul.getElementsByTagName('li');
        for(var i=0;i<5;i++){
            ul.appendChild(document.createElement('li'));
        }   
        console.log(list.length)//此时输出的结果就是3+5=8

所以我们现在应该可以很直观的分别出两者的区别，当然本身两种方法还有兼容性方面的区别。另外这两种方法都不能查找伪类元素。其实querySelector主要还是因为可以使用css选择符来查找节点，相比较getElemnetById+getElementByTagName这样复杂的操作要简单，但是速率上前者是被完爆的。

这里附上 MDN的描述：

大多数情况下，NodeList 对象都是个实时集合。意思是说，如果文档中的节点树发生变化，则已经存在的 NodeList 对象也可能会变化。例如，Node.childNodes 是实时的：

在另一些情况下，NodeList 是一个静态集合，也就意味着随后对文档对象模型的任何改动都不会影响集合的内容。document.querySelectorAll 返回一个静态的 NodeList。

特别是当你选择如何遍历 NodeList 中所有项，或缓存列表长度的时候，最好牢记这种区分。