浅谈getElementById / querySelector

来源：互联网发布：网络购彩什么时候恢复编辑：程序博客网时间：2024/06/06 20:02

1、getElementById / querySelector 这两个获取到的都是dom节点，结果没有区别，两种方法的区别就在于这个集合会不会自动更新。

x = document.querySelectorAll('img')y = document.getElementsByTagName('img')document.body.appendChild(new Image())x.length // 0y.length // 1

2、两者在性能上的区别。

浏览器1： Chrome 37.0.2062.68 32-bit[-20,989,532] document.getElementsByTagName('a');[----166,170] document.querySelectorAll('a');[-27,659,047] document.getElementsByName('name');[-----79,022] document.querySelectorAll('[name=name]');[-22,972,151] document.getElementsByClassName('classname');[-----67,003] document.querySelectorAll('[class = classname]');

getElementBy系列的执行速度基本都是querySelectorAll的100+倍

3、querySelectorAll 的返回值是一个静态的 NodeList 对象，而 getElementsBy 系列的返回值实际上是一个 HTMLCollection 对象。

ocument.querySelectorAll('a').toString();    // return "[object NodeList]"document.getElementsByTagName('a').toString();    // return "[object HTMLCollection]"

0 0