本文是我在知乎上的一个回答:http://www.zhihu.com/question/24702250/answer/28695133

————— 下面是正文 —————

1. W3C 标准
querySelectorAll 属于 W3C 中的 Selectors API 规范 [1]。而 getElementsBy 系列则属于 W3C 的 DOM 规范 [2]。

2. 浏览器兼容
querySelectorAll 已被 IE 8+、FF 3.5+、Safari 3.1+、Chrome 和 Opera 10+ 良好支持 。
getElementsBy 系列,以最迟添加到规范中的 getElementsByClassName 为例,IE 9+、FF 3 +、Safari 3.1+、Chrome 和 Opera 9+ 都已经支持该方法了。

3. 接收参数
querySelectorAll 方法接收的参数是一个 CSS 选择符。而 getElementsBy 系列接收的参数只能是单一的className、tagName 和 name。代码如下 [3]:

var c1 = document.querySelectorAll('.b1 .c');
var c2 = document.getElementsByClassName('c');
var c3 = document.getElementsByClassName('b2')[0].getElementsByClassName('c');

需要注意的是,querySelectorAll 所接收的参数是必须严格符合 CSS 选择符规范的。所以下面这种写法,将会抛出异常。代码如下 [4]:

try {
var e1 = document.getElementsByClassName('1a2b3c');
var e2 = document.querySelectorAll('.1a2b3c');
} catch (e) {
console.error(e.message);
}
console.log(e1 && e1[0].className);
console.log(e2 && e2[0].className);

(CSS 选择器中的元素名,类和 ID 均不能以数字为开头。)

4. 返回值
大部分人都知道,querySelectorAll 返回的是一个 Static Node List,而 getElementsBy 系列的返回的是一个 Live Node List。
看看下面这个经典的例子 [5]:

// Demo 1
var ul = document.querySelectorAll('ul')[0],
lis = ul.querySelectorAll("li");
for(var i = 0; i < lis.length ; i++){
ul.appendChild(document.createElement("li"));
} // Demo 2
var ul = document.getElementsByTagName('ul')[0],
lis = ul.getElementsByTagName("li");
for(var i = 0; i < lis.length ; i++){
ul.appendChild(document.createElement("li"));
}

因为 Demo 2 中的 lis 是一个动态的 Node List, 每一次调用 lis 都会重新对文档进行查询,导致无限循环的问题。
而 Demo 1 中的 lis 是一个静态的 Node List,是一个 li 集合的快照,对文档的任何操作都不会对其产生影响。

但为什么要这样设计呢?
其实,在 W3C 规范中对 querySelectorAll 方法有明确规定 [6]:

The NodeList object returned by the querySelectorAll() method must be static ([DOM], section 8).

那什么是 NodeList 呢?
W3C 中是这样说明的 [7]:

The NodeList interface provides the abstraction of an ordered collection of nodes, without defining or constraining how this collection is implemented. NodeList objects in the DOM are live.

所以,NodeList 本质上是一个动态的 Node 集合,只是规范中对 querySelectorAll 有明确要求,规定其必须返回一个静态的 NodeList 对象。

我们再看看在 Chrome 上面是个什么样的情况:

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

这里又多了一个 HTMLCollection 对象出来,那 HTMLCollection 又是什么?

HTMLCollection 在 W3C 的定义如下 [8]:

An HTMLCollection is a list of nodes. An individual node may be accessed by either ordinal index or the node's name or id attributes.
Note: Collections in the HTML DOM are assumed to be live meaning that they are automatically updated when the underlying document is changed.

实际上,HTMLCollection 和 NodeList 十分相似,都是一个动态的元素集合,每次访问都需要重新对文档进行查询。两者的本质上差别在于,HTMLCollection 是属于 Document Object Model HTML 规范,而 NodeList 属于 Document Object Model Core 规范。
这样说有点难理解,看看下面的例子会比较好理解 [9]:

var ul = document.getElementsByTagName('ul')[0],
lis1 = ul.childNodes,
lis2 = ul.children;
console.log(lis1.toString(), lis1.length); // "[object NodeList]" 11
console.log(lis2.toString(), lis2.length); // "[object HTMLCollection]" 4

NodeList 对象会包含文档中的所有节点,如 Element、Text 和 Comment 等。
HTMLCollection 对象只会包含文档中的 Element 节点。
另外,HTMLCollection 对象比 NodeList 对象 多提供了一个 namedItem 方法。

所以在现代浏览器中,querySelectorAll 的返回值是一个静态的 NodeList 对象,而 getElementsBy 系列的返回值实际上是一个 HTMLCollection 对象 。

[1] Selectors API Level 2
[2] Document Object Model Core
[3] http://jsbin.com/cuduyigi/1/edit?html,js,console
[4] http://jsbin.com/mabefihi/1/watch?html,js,console
[5] 
Demo 1: http://jsbin.com/daduziba/1/watch?html,js,output
Demo 2: http://jsbin.com/xuvodipo/1/watch?html,js,output
[6] Selectors API Level 2
[7] Document Object Model Core
[8] Document Object Model HTML
[9] http://jsbin.com/qijivove/1/watch?html,js,console

本文作者:Maple Jan

本文链接:http://www.cnblogs.com/maplejan/p/3887270.html

querySelectorAll 方法和 getElementsBy 系列方法的区别的更多相关文章

  1. RequestDispatcher.forward() 方法和HttpServletResponse.sendRedirect()方法的区别

    RequestDispatcher.forward() 方法和HttpServletResponse.sendRedirect()方法的区别 先贴一段代码 public void logon(Http ...

  2. synchronized 修饰在 static方法和非static方法的区别

    Java中synchronized用在静态方法和非静态方法上面的区别 在Java中,synchronized是用来表示同步的,我们可以synchronized来修饰一个方法.也可以synchroniz ...

  3. Java中synchronized 修饰在static方法和非static方法的区别

    [问题描述]关于Java中synchronized 用在实例方法和对象方法上面的区别 [问题分析]大家都知道,在Java中,synchronized 是用来表示同步的,我们可以synchronized ...

  4. View inflate方法和LayoutInflater inflate方法的区别详解

    原创文章,转载请注明出处:http://www.cnblogs.com/baipengzhan/p/6257510.html 我们在Android开发中,对于将布局填充成View对象,最常用的两种办法 ...

  5. jQUery中的$(document).ready()方法和window.onload()方法的区别

    1.常规的Javascript代码中,通常使用window.onload方法 window.onload = function(){//代码} 2.jquery中,则使用$(document).rea ...

  6. length属性,length()方法和size()的方法的区别

    一.java 1.length属性是针对Java中的数组来说的,要求数组的长度可以用其length属性: 2.length()方法是针对字符串来说的,要求一个字符串的长度就要用到它的length()方 ...

  7. static方法和非static方法的区别

    ●生命周期(Lifecycle):静态方法(Static Method)与静态成员变量一样,属于类本身,在类装载的时候被装载到内存(Memory),不自动进行销毁,会一直存在于内存中,直到JVM关闭. ...

  8. length属性、length()方法和size()的方法的区别

    JAVA 1. length属性是针对Java中的数组来说的,要求数组的长度可以用其length属性: 2.length()方法是针对字符串来说的,要求一个字符串的长度就要用到它的length()方法 ...

  9. querySelectorAll 方法相比 getElementsBy 系列方法区别

    最近有人问到querySelectorAll 方法相比 getElementsBy 系列方法区别,一时没想起来说些什么,今天查下文档,总结一下它们的区别,以便自己理解. 1. W3C 标准queryS ...

随机推荐

  1. git学习(一) 如何将项目上传到github

    用了github有了段时间,但是感觉都是断断续续的,这次花了点时间来总结下,已方便下次忘记的时候拿出来看一下: 自己主要是参考了这个网站来学习的: git教程 -廖雪峰 第一步: 创建github账号 ...

  2. python 菜鸟入门

    python 菜鸟博客: http://www.cnblogs.com/wupeiqi/articles/5433893.html http://www.cnblogs.com/linhaifeng/ ...

  3. [转帖]脑残式网络编程入门(一):跟着动画来学TCP三次握手和四次挥手

    脑残式网络编程入门(一):跟着动画来学TCP三次握手和四次挥手   http://www.52im.net/thread-1729-1-1.html     1.引言 网络编程中TCP协议的三次握手和 ...

  4. Caffe使用step by step:faster-rcnn目标检测matlab代码

    faster-rcnn是MSRA在物体检测最新的研究成果,该研究成果基于RCNN,fast rcnn以及SPPnet,对之前目标检测方法进行改进,faster-rcnn项目地址.首先,faster r ...

  5. 015 反射中的 Class.forName() 与 ClassLoader.loadClass() 的区别

    作者:nnngu GitHub:https://github.com/nnngu 博客园:http://www.cnblogs.com/nnngu 简书:https://www.jianshu.com ...

  6. 关于IT个人看法

    对于理科生来说,理论和技术都是相当重要的,我很爱钻牛角尖,但是请理解‘固执的我’, 本人选择IT行业,其实也是偶然,带着质疑的眼光,成为了众多IT男中毫无‘特色’的一员,回忆 学习阶段,逐渐认识了IT ...

  7. 使用jQuery在javascript中自定义事件

    js中的自定义事件有attachEvent,addEventListener等等好多种,往往受困于浏览器兼容,而且代码写起来也相当麻烦.jQuery为我们解决了这个问题,几行代码就可以很好的实现事件的 ...

  8. 【CF888G】Xor-MST(最小生成树,Trie树)

    [CF888G]Xor-MST(最小生成树,Trie树) 题面 CF 洛谷 题解 利用\(Kruskal\)或者\(Prim\)算法都很不好计算. 然而我们还有一个叫啥来着?\(B\)啥啥的算法,就叫 ...

  9. P4051 [JSOI2007]字符加密 解题报告

    P4051 [JSOI2007]字符加密 题目描述 喜欢钻研问题的JS 同学,最近又迷上了对加密方法的思考.一天,他突然想出了一种他认为是终极的加密办法:把需要加密的信息排成一圈,显然,它们有很多种不 ...

  10. 洛谷 P2473 [SCOI2008]奖励关 解题报告

    P2473 [SCOI2008]奖励关 题目描述 你正在玩你最喜欢的电子游戏,并且刚刚进入一个奖励关.在这个奖励关里,系统将依次随机抛出\(k\)次宝物,每次你都可以选择吃或者不吃(必须在抛出下一个宝 ...