js中的getElementById和querySelector_js getelementsbyname和queryselector-优快云博客

本文深入探讨了DOM操作中querySelector与getXXXByXXX系列方法的使用及区别，通过实例对比了它们在动态与静态集合上的表现，帮助读者理解何时选用哪种方法更佳。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

querySelector() 返回匹配指定选择器的第一个元素。

querySelectorAll() 返回所有的节点元素

语法
document.querySelector(CSS selectors)

getElementsByTagName() //返回的是所有的节点，是一个类数组对象

getElementById(id) // 返回某个节点对象

语法

document.getElementById(id) //与selectot的区别是，参数为标签元素而不是css选择器

区别

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')[0],
      lis = ul.querySelectorAll("li");
for(var i = 0; i < lis.length ; i++){
     ul.appendChild(document.createElement("li"));
}
console.log( lis.length);  //3

Demo1 中的 lis 是一个动态的 Node List，每一次调用 lis 都会重新对文档进行查询，导致无限循环的问题。

小总结：

如果只要一次查找就可得到元素时，首选getXXXByXXX ；

如果需要经过多级查找，才能得到元素时，首选querySelector；