【js】querySelectorAll和getElemensByTagName的区别

1、写法上的区别，querySelectorAll接收的参数是CSS选择器，getElementsByTagName接收的参数是标签名。

2、返回值不同，querySelectorAll返回静态的NodeList，而getElementsByTagName返回动态的NodeList。

3、getElementsByTagName的速度要比querySelectorAll快很多。

举例：

var divs = document.getElementsByTagName("div");
var i=0;

while(i < divs.length){
    document.body.appendChild(document.createElement("div"));
    i++;
}

假设文档中至少已经存在了一个DIV，这个while循环就是一个死循环，因为i++后divs.length的值也自动增大了一，所以 i 永远小于divs.length。这就是动态NodeList。

 

只需要将getElementsByTagName改为querySelectorAll：

var divs = document.querySelectorAll("div"),
    i=0;

while(i < divs.length){
    document.body.appendChild(document.createElement("div"));
    i++;
}

在这种情况下没有死循环, divs.length的值永远不会改变, 第一次进入while循环是多少，以后就是多少。这就是所谓的静态NodeList。

 

实际上，getElemensByTagName比querySelectorAll快的本质是创建并返回动态NodeList的速度比静态NodeList快。因为动态NodeList不需要预先获取所有的信息, 而静态 NodeList 从一开始就需要取得并封装所有相关数据。

哪个方法更好用主要还是看你的需求, 如果只是要根据 tag name 来查找元素, 也不需要获取此一个快照, 那就应该使用 getElementsByTagName()方法; 如果需要快照结果(静态),或者需要使用复杂的CSS查询, 则可以考虑querySelectorAll()。

参考阅读：https://github.com/cncounter/translation/blob/master/tiemao_2014/NodeList/NodeList.md