【HTML】querySelector与getElementBy系列的区别_queryselector getelementbyid效率-CSDN博客

本文链接：https://blog.csdn.net/AM1n98/article/details/148406604

getElementBy系列

常见的获取元素的方法有3种：通过元素ID、通过标签名、通过类名来获取。

getElementById

这个方法将返回一个与之对应id属性的节点对象，它是document对象特有的函数，只能通过其来调用该方法。

使用方法如下：document.getElementById('idName')。

getElementsByTagName

这个方法返回一个对象数组（准确的说是HTMLCollection集合），返回元素的顺序是它们在文档中的顺序，传递给 getElementsByTagName() 方法的字符串可以不区分大小写。

使用方法如下：document.getElementsByTagName(tagName)

getElementsByClassName

这个方法获取指定class名的元素，该方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。NodeList 对象代表一个有顺序的节点列表。NodeList 对象我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)，所以有时使用时要指定下标。

使用方法如下：document.getElementsByClassName('className')

querySelector和querySelectorAll

querySelector()

这个方法返回相匹配的 CSS 选择器元素的第一个子元素，注意，只返回第一个元素。

querySelector返回的是一个对象。

querySelectorAll()

这个返回所有的匹配元素。

querySelectorAll返回的一个集合(NodeList)。

注意

querySelector和querySelectorAll的参数必须是符合 css selector 的字符串，它传入的字符串中第一个字符不能是数字。

使用示例：

document.querySelector("body");　　//返回body节点
document.querySelector("#k");　　//返回id为k的节点
document.querySelector("#k span");　　//返回id为k的节点下的第一个span节点
document.querySelector("#k").querySelector("span");　　//返回id为k的节点下的第一个span节点

document.querySelectorAll("li");　　//返回所用tagName为li的节点集合（NodeList）
document.querySelectorAll("div .li");　　//返回class为li的div

性能对比

querySelectorAll比getElementBy系列速度慢

querySelectorAll，返回一个静态的NodeList（深克隆）

getElementBy系列，返回一个动态的实时变化的NodeList（HTMLCollection）（浅克隆，每次都返回一个指针）
所以querySelectorAll会降低性能。

什么叫静态的？

意思是指，选出的所有元素的数组，不会随着代码操作而改变。

用querySelector操作元素示例如下

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
    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

所以现在应该可以很直观的分别出两者的区别，当然本身两种方法还有兼容性方面的区别。

另外这两种方法都不能查找伪类元素。

测试结果

测试得到节点集合的数据：

console.time('querySelectorAll');
for (var i = 0; i < 10000; i++) {
  document.querySelectorAll(".menu-top");
}
console.timeEnd('querySelectorAll');
//querySelectorAll: 1781ms

console.time('getElementsByClassName');
for (var i = 0; i < 10000; i++) {
  document.getElementsByClassName("menu-top");
}
console.timeEnd('getElementsByClassName');
//getElementsByClassName: 54ms

得到集合时间对比相差巨大。

可是现在主流框架，比如jquery，手机上的框架jqmobi等内部实现查找元都是使用的querySelector等方法，性能低的方法被使用唯一理由就是它用着方便。