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