HTMLCollection与NodeList

更新于 2016-08-31  约 14 分钟

NodeList v.s. HTMLCollection

主要有两个方面不一样
1.包含节点的类型
2.使用方法

1.包含节点的类型不同(重要)

(1)NodeList
一个节点的集合,既可以包含元素和其他节点(注释节点、文本节点等)。
(2)HTMLCollection
元素集合, 只有Element

2.使用方法

相同点:
1)    它们都有length属性
2)    都有元素的getter,叫做item,可以传入索引值取得元素。
3)    都是类数组
不同点:
HTMLCollection还有一个nameItem()方法,可以返回集合中name属性和id属性值的元素。(部分浏览器也支持NodeList的nameItem()方法)

详细讲解

涉及获取元素的主要API
DOM最初设计是为了解析XML而设计的,之后沿用到HTML上。我们可以把DOM分为两部分 core 和 html,Core 部分提供最基础的 XML 解析API说明,HTML 部分专为 HTML 中的 DOM 解析添加其特有的 API。NodeList接口是在core中体现的,HTMLCollection则是在html部分,不同浏览器也会实现它们的不同接口。但是现在的dom标准已经不分core和html了,反映的是浏览器的实现()。唯一要注意的是 querySelectorAll 返回的虽然是 NodeList ,但是实际上是元素集合,并且是静态的(其他接口返回的HTMLCollection和NodeList都是live的)。
DOM中的NodeList NamedNodeMap 及 HTMLCollection
把这三个放在一起说,是因为三者都是DOM中的array-like对象,即类数组对象(因而也都具有length属性)。
(1)先说NamedNodeMap这个对象,这个比较简单,虽然翻译过来是 命名的节点映射,但它只不过是 Attr这个对象的一个集合,Attr对象是DOM元素节点的属性的对象表达。通过元素节点(element node)的attributes属性返回的就是NamedNodeMap这个对象。与NodeList相同的是它也是一个动态的集合(live collection),与NodeList不同的是,NamedNodeMap中保存的是一组无序的属性节点的集合。
(2)NodeList对象是由childNodes属性,querySelectorAll方法返回的一组节点的集合,它保存着一组有序的节点。注意区别的是,由childNodes属性返回的NodeList对象是一个动态的集合(live collection), 而由querySelectorAll方法返回的则是一个静态的集合(static collection)。因而在MDN中将他定义为 ”A sometimes-live collection“,live collection 指的是对对DOM的操作引起的的变化会实时的反映在这个集合里。
(3)接下来就是HTMLCollection,它在本质是一个动态的NodeList对象。getElementsByTagName等方法返回的是包含零或多个元素的NodeList,在HTML文档中,返回的则是HTMLCollection对象。因此说它在本质上一个NodeList对象,包含一组有序(in document order基于文档结构顺序)的动态集合。

在获取原生DOM元素的时候,主要涉及这几个DOM API(链接为Living Standard):

•    Node及对应集合NodeList
•    Element(继承Node)及对应集合HTMLCollection
•    Document(继承Node)

注:计划取代NodeList和HTMLCollection的Elements目前并无广泛实现

基础知识 -- NodeList v.s. HTMLCollection
使用Node Interface的方法,如childNodes,得到的通常是NodeList,而使用其他Interface的方法,又有可能得到HTMLCollection。所以有必要了解一下这两者的区别。
关于这两个类型的差异,在Stackoverflow上有一个不错的问答。
其实,只要先看看Living Standard中这两个类型的IDL,便能猜出大概了。NodeList的IDL如下:

interface NodeList {
  getter Node? item(unsigned long index);
  readonly attribute unsigned long length;
  iterable<Node>;
};

而HTMLCollection的IDL如下:

interface HTMLCollection {
  readonly attribute unsigned long length;
  getter Element? item(unsigned long index);
  getter Element? namedItem(DOMString name);
};

相同点:
4) 都是类数组对象
5) 它们都有length属性
6)都有元素的getter,叫做item
不同点:
1.NodeList的元素是Node,HTMLCollection的元素是Element。

Element继承自Node,是Node的一种,在HTML中,它一般是HTML元素(比如<p>之类的标签创建出来的对象)。而Node作为父类,除了Element还有一些其他子类,比如HTML元素内的文本对应的Text,文档对应的Document,注释对应的Comment。HTMLCollection里,只有Element,而NodeList里可以有Element、Text、Comment等多种元素。按说如果获取元素返回的列表里只有Element,那这两种类没多大区别,但事实上很多时候浏览器会将解析HTML文本时得到的Text和Comment一并放进列表里放回。比如说下面这一段代码

<div>
    <!-- Comment -->
    <p>This is Some Text</p>
</div>

若将这个div的子元素放在列表里返回,那么如果是作为NodeList返回,浏览器最多可以给这个列表5个元素(不同浏览器可能不同)

1.    一个<div>和注释间的断行和空格(或tab)作为text node(没错,标签之间的空白符号也可以被解析为text node)
2.    注释作为comment node
3.    注释和<p>之间的断行和空格(或tab)作为text node
4.    p作为element
5.    </p>和</div>之间的断行和空格(或tab)作为text node

因此NodeList里可能会有很多一般DOM操作不需要的text node和comment node需要处理。而HTMLCollection则简单多了,只有<p>这一个元素,这也是比较符合大多数人直觉的结果。
2.HTMLCollection还有一个namedItem方法,可以快速获取其中元素。假设有这样一段HTML:

<div>
 <!-- Comment -->
<p>This is Some Text</p>
<img name="test" src="test.jpg">
</div>

那么假设得到了这个div的子元素构成的HTMLCollection,叫做list,那么使用list.namedItem("test")就可以直接得到里面的img元素。
查找顺序参考Living Standard,但是在现实中不是所有浏览器都遵循标准。比如标准规定如果有多个拥有相同id或者name的元素,只要返回第一个,但chrome和opera会将它们放在一个HTMLCollection或者NodeList里一并返回,参见MDN。
从IDL看不出来的还有如下几点

1.    这两个类都是“live”的。对其中元素进行操作,会实时反映到DOM中(也因此如果一次性直接在这类列表上进行多个DOM操作的话,带来的开销会很大)。
2.    item和namedItem都可以通过[]的缩写进行调用,有的浏览器还支持用()的缩写进行调用(也就是可以list[index],list[key]或者list(index),list(key)),以及直接用dot notation调用namedItem(比如list.key)。
3.    部分浏览器支持对NodeList调用namedItem或间接通过[]、()、dot notation来调用namedItem,但由于各浏览器支持不同,最好不对NodeList做这种操作。
4.    IE8及以下版本浏览器中,注释属于HTMLCommentElement,算作Element,因此会出现在HTMLCollection里。

NodeList
  NodeList是一个节点的集合(既可以包含元素和其他节点),在DOM中,节点的类型总共有12种,通过判断节点的nodeType来判断节点的类型。
  我们可以通过Node.childNodes和document.querySelectAll() (返回NodeList的接口有很多,这里不一一列举,下同)来获取到一个NodeList对象。
  NodeList对象有个length属性和item()方法,length表示所获得的NodeList对象的节点个数,这里还是要强调的是节点,而item()可以传入一个索引来访问Nodelist中相应索引的元素。

1 <body>
 2     <div id="node">
 3         文本节点
 4         <!-- 注释节点 -->
 5         <span>node1</span>
 6         <span>node2</span>
 7         <span>node3</span>
 8     </div>
 9 </body>
10 <script>
11     var node = document.getElementById('node'),
12         nodeLists = node.childNodes
13     console.log(nodeLists.length) //     输出为9
14 </script>

  上面的HTML代码中,“文本节点”和父节点子节点的空格(连着的文本)算做一个文本节点,然后是一个注释节点和注释节点和元素节点之间的空格(换行会产生空格,空格算做文本节点)的文本节点,紧接着的是一个元素节点和元素节点之间的换行的文本节点,三个元素节点和元素节点间的两个文本节点,最后是最后得元素节点和父元素之间的空格产生的文本节点,总共是9个节点。
  NodeList对象的一大特点是它返回的内容是动态的(live),也就是说我们上面代码获取nodeLists是类似于“指针”的东西,所以在下面代码中我们在获取了nodeLists之后再向node中插入一个创建的span标签后,发现获取到了nodeLists.length变为10了,但是querySelectorAll这个接口返回的nodeList对象比较特殊,它是个静态(static)的对象。而且是元素的集合。

1 <body>
 2     <div id="node">
 3         文本节点
 4         <!-- 注释节点 -->
 5         <span>node1</span>
 6         <span>node2</span>
 7         <span>node3</span>
 8     </div>
 9 </body>
10 <script>
11     var node = document.getElementById('node')
12     var nodeLists = node.childNodes
13     var queryNodes = node.querySelectorAll('span')
14     node.appendChild(document.createElement('span'))
15     console.log(nodeLists.length)  // 输出为10
16     console.log(queryNodes.length)  //输出为3
17 </script>

  HTMLCollection
  HTMLCollection是元素集合,它和NodeList很像,有length属性来表示HTMLCollection对象的长度,也可以通过elements.item()传入元素索引来访问。当时它还有一个nameItem()方法,可以返回集合中name属性和id属性值得元素。HTMLDocument 接口的许多属性都是 HTMLCollection 对象,它提供了访问诸如表单、图像和链接等文档元素的便捷方式,比如document.images和document.forms的属性都是HTMLCollection对象。

 1 <body>
 2     <img src="test.png" id="image1">
 3     <img src="test.png" id="image2">
 4     <img src="test.png" id="image3">
 5     <img src="test.png" id="image4">
 6     <img src="test.png" id="image5">
 7     <img src="test.png" id="image6">
 8 </body>
 9 <script>
10     console.log(document.images.namedItem('image1')) //<img src="test.png" id="image1">
11 </script>

  HTMLCollection的集合和NodeList对象一样也是动态的,他们获取的都是节点或元素集合的一个引用。
  HTMLCollection和NodeList的实时性非常有用,但是,我们有时要迭代一个NodeList或HTMLCollection对象的时候,我们通常会选择生成当前对象的一个快照或静态副本:
转换为数组类型:
var staticLists = Array.prototype.slice.call(nodeListorHtmlCollection, 0)
 这样的话,我们就可以放心的对当前的DOM集合做一些删减和插入操作,这个在DOM密集操作的时候很有用。

阅读 4.5k更新于 2016-08-31

推荐阅读

javascript 基础知识 ,全面学习JS编程。

35 人关注
66 篇文章
专栏主页
目录