getElementById和querySelector方法的区别

最新推荐文章于 2024-07-27 16:17:17 发布

weixin_30291791

最新推荐文章于 2024-07-27 16:17:17 发布

阅读量58

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/kakutian/p/6972939.html

本文详细介绍了querySelector与getXXXByXXX这两种DOM操作方法之间的区别，并通过实例演示了它们在动态与静态集合上的表现差异。同时，文章还讨论了它们的性能差异以及何时应该选用哪种方法。

"querySelector 属于 W3C 中的 Selectors API 规范。而 getElementsBy 系列则属于 W3C 的 DOM 规范"

1、区别

getXXXByXXX 获取的是动态集合，querySelector获取的是静态集合。

简单的说就是，动态就是选出的元素会随文档改变，静态的不会，取出来之后就和文档的改变无关了。

<ul>
    <li>aaa</li>
    <li>ddd</li>
    <li>ccc</li>
</ul>
 
//demo1
var ul = document.getElementsByTagName('ul')[0],
      lis = ul.getElementsByTagName("li");
for(var i = 0; i < lis.length ; i++){
     ul.appendChild(document.createElement("li"));
}
console.log( lis.length);  //6
 
//demo2
var ul = document.querySelectorAll('ul'),
      lis = ul.querySelectorAll("li");
for(var i = 0; i < lis.length ; i++){
     ul.appendChild(document.createElement("li"));
}
console.log( lis.length);  //3