querySelectorAll和getElementsBy 系列比较
querySelectorAll 相比下面这些方法有什么区别?
(1)getElementsByTagName
(2)getElementsByClassName
(3)getElementsByName
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 对象 。
[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
querySelectorAll和getElementsBy 系列比较的更多相关文章
- querySelectorAll 方法相比 getElementsBy 系列方法区别
最近有人问到querySelectorAll 方法相比 getElementsBy 系列方法区别,一时没想起来说些什么,今天查下文档,总结一下它们的区别,以便自己理解. 1. W3C 标准queryS ...
- querySelectorAll 方法相比 getElementsBy 系列方法有什么区别
感谢 http://www.zhihu.com/question/24702250 简生 的回答 1. W3C 标准 querySelectorAll 属于 W3C 中的 Selectors API ...
- querySelectorAll 方法和 getElementsBy 系列方法的区别
本文是我在知乎上的一个回答:http://www.zhihu.com/question/24702250/answer/28695133 ————— 下面是正文 ————— 1. W3C 标准quer ...
- [label][转载][JavaSript]querySelectorAll 方法相比 getElementsBy 系列方法有什么区别?
轉載出處: http://www.zhihu.com/question/24702250 querySelectorAll 相比下面这些方法有什么区别? getElementsByTagName g ...
- querySelector系列方法相比 getElementsBy 系列方法有什么区别?
querySelector 和 querySelectorAll 相比下面这些方法有什么区别? getElementsByTagName getElementsByClassName getElem ...
- querySelectorAll与getElementsBy对比有什么不同
querySelectorAll与getElementsBy对比有什么不同javascript中的querySelectorAll与getElementsBy都可以获取dom元素对象,但是他们又有什么 ...
- getElementsBy 系列方法相比querySelector系列的区别
最近在做的项目中,使用querySelectorAll获取了同class名的元素后,绑定onmouseover事件和onmouseout后,多次在几个元素上移入移出操作时,控制台出现了报错的问题,最后 ...
- querySelectorAll 和 getElementBy 方法的区别
作者:简生 链接:https://www.zhihu.com/question/24702250/answer/28695133 来源:知乎 1. W3C 标准 querySelectorAll 属于 ...
- querySelector.. 方法相比 getElementsBy..
querySelectorAll 返回的是一个 Static Node List,而 getElementsBy 系列的返回的是一个 Live Node List. 看看下面这个经典的例子 [5]: ...
随机推荐
- 求lca(模板)
洛谷——P3379 [模板]最近公共祖先(LCA) 题目描述 如题,给定一棵有根多叉树,请求出指定两个点直接最近的公共祖先. 输入输出格式 输入格式: 第一行包含三个正整数N.M.S,分别表示树的结点 ...
- BZOJ题目(持续更新)
bzoj1009:kmp想法+递推+矩阵快速幂.很好的想法,考虑用长串去kmp匹配短串,dp[i][j]表示匹配指针分别指在i.j位置时候,前i位母字符串一共有多少种可能性,那么dp[i][j]=Σd ...
- 从顺序随机I/O原理来讨论MYSQL MRR NLJ BNL BKA
http://blog.itpub.net/7728585/viewspace-2129502/
- 如何查看pip安装包的所有版本;以及ipython的安装
安装ipython很简单,直接使用pip就行 比如mac环境下:pip install ipython:提示安装失败,原因是pip默认安装的ipython版本6.0+不适用python3.3以下版本 ...
- 【OpenGL】OpenGL帧缓存对象(FBO:Frame Buffer Object) 【转】
http://blog.csdn.net/xiajun07061225/article/details/7283929/ OpenGL Frame BufferObject(FBO) Overview ...
- How to create a freehand tool
http://forums.esri.com/Thread.asp?c=159&f=1707&t=283694&mc=1 http://blog.sina.com.cn/s/b ...
- MKVToolNix v8.7.0
功能强大的MKV封装格式视频文件制作和编辑工具,支持音轨.字幕的封装,高清发烧友必备工具. 百度云:http://pan.baidu.com/s/1eQWPnxS password:ll64 360 ...
- vscode 插件安装以及首选项配置
1.插件 Auto Close Tag Path Intellisense Prettier Vetur vscode-icons Bracket Pair Colorizer 2.vscode 首选 ...
- C#复习总结6 (需要进一步复习)
第十七章 泛型 什么是泛型 泛型是为了适应多种不同种类的数据类型而存在的.有了它之后,我们可以不用为不同的数据类型而单独写一个适配.这样很麻烦. 类型不是对象,而是对象的模板.泛型类型也不是类型,而是 ...
- C语言判断回文数
#include<stdio.h> #include<stdlib.h> int main() { //1.得到这个数字 2.翻转 3.进行比较 4.如果相同 就输出 是 否则 ...