querySelector与getElementBy系列的区别

72 阅读 0 评论 48 点赞

我是靠谱客的博主冷静乌龟，最近开发中收集的这篇文章主要介绍querySelector与getElementBy系列的区别，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

getElementBy系列

document.getElementsByTagName('tag');
document.getElementById('id');
document.getElementsByClassName('class');

常见的获取元素的方法有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 选择器元素的第一个子元素。该方法只返回匹配指定选择器的第一个元素。

如果要返回所有匹配元素，需要使用 querySelectorAll() 方法替代．

不同的是 querySelector返回的是一个对象，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操作元素示例如下：
HTML代码：

    <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