深入分析querySelectorAll与其它getElementsByTagName等的差异

看到标题的这个问题,大家的第一反应的答案无非是

1. 兼容性区别，querySelectorAll IE8+才支持，而类似getElementsByTagName、document.getElementsByClassName、document.getElementsByName等是老早之前就支持了
2. getElementsByClassName方法只能输入类名，比方说只能document.getElementsByClassName('outer')这样，不能document.getElementsByClassName('.outer') 更不能document.getElementsByClassName('.outer .inner')；但是querySelectorAll功能更强大一些，比方说#id .class [tagname]等方式都支持

然后呢？还有其它差异吗？ 下面是我分析总结的差异点

1. 返回的类型不一致
2. querySelectorAll结果不是动态实时的，而getElementsByClassName结果是实时的
3. querySelectorAll是全局匹配模式，而getElementsByClassName是由调用者决定的

细节具体一一道来

返回的类型不一致？

拿百度网页做一个示例 如下图所示

也就是说：querySelectorAll返回的类型为NodeList，而getElementsByClassName返回的类型却是HTMLCollection

querySelectorAll结果不是动态实时的，而getElementsByClassName结果是实时；啥意思？

还是在百度首页下做示例

也就是说getElementsByClassName返回的结果是实时动态的，这也是为什么看到一些讲性能优化的文章讲如果需要遍历循环getElementsByClassName结果的时候会让你用声明临时变量把length存起来来进行遍历 类似于下面这样：

let testResult=document.getElementsByClassName('test')
for (let index = 0,len=testResult.length; index < len; index++) {
    // 拿 testResult[index]做业务处理
}

querySelectorAll是全局匹配模式，而getElementsByClassName是由调用者决定

举例来说

你以为的结果是1 可是结果却是2

原因：querySelectorAll里面的选择器是全局匹配模式 所以上面浏览器执行的语义是查询#mytest的子元素，同时满足整个页面下div div选择器条件的DOM元素们

干货到此结束，希望细微点你能关注到！

###参考 DOM元素querySelectorAll可能让你意外的特性表现

最后

如果你觉得这篇文章不错，请别忘记点个赞跟关注哦~😊