标准参考

NodeList 接口是由 DOM Level-1-Core 引入的，它是一个有序的节点集合抽象，它提供了一个用来获取节点数量的属性 length 和一个用来获得集合中指定索引的节点的方法 item。

在有些浏览器中，一个 NodeList 对象也具备 HTMLCollection 接口提供的方法。

关于 NodeList 接口的更详细信息，请参考 DOM Level-1-Core 中的内容。

关于 HTMLCollection 接口的详细信息，请参考 DOM Level-2-HTML 中的内容。

问题描述

各浏览器中的 NodeList 接口存的实现有差异。

造成的影响

该问题在某些情况下将导致脚本异常。

受影响的浏览器

所有浏览器

问题分析

1. 各浏览器中 NodeList 接口的实现

在 Firefox Chrome Safari 中，对于 NodeList 的定义与 W3C 相同；而在 IE Opera 中，NodeList 继承了 Collection 接口，所以 NodeList 也支持 Collection 接口中的方法。

关于各浏览器 NodeList 接口的说明，请参考 Mozilla 的 、Safari Webkit DOM 的 和 MSDN 的 中的信息。

2. 各浏览器中从 NodeList 中获取节点的方法支持差异

2.1. NodeList[index] 和 NodeList[name]

以上两种方式各浏览器都支持。以下测试代码中分别用这两种方式获取节点，然后将这两个节点的 id 属性值输出：

在各浏览器中表现如下：

所有浏览器NodeList[index].id: span2

NodeList[name].id: span3

2.2. NodeList(index)

只有 Firefox 不支持 NodeList(index) 。以下测试代码中使用这种方式获取节点，然后输出 id 属性值；如果程序出错，则输出抛出异常：

各浏览器中表现如下：

IE Chrome Safari OperaNodeList(index).id: span2

FirefoxNodeList(index): TypeError: spans is not a function

2.3. NodeList(name)

Firefox 以及 Webkit 浏览器不支持这种方式从集合中获取元素。以下测试代码中用 NodeList(name) 的方式获取一个节点，并输出 id 属性值；如果程序出错，则输出异常：

各浏览器中表现如下：

FirefoxNodeList(name): TypeError: spans is not a function

ChromeNodeList(name) : TypeError: Cannot read property 'id' of undefined

SafariNodeList(name): TypeError: Result of expression 'span2' [undefined] is not an object.

IE OperaNodeList(name).id: span2

2.4. NodeList.item(index)

所有浏览器都支持此方法。以下测试代码中使用该方法获取节点，并输出节点 id 属性值；如果程序出错，则输出异常：

各浏览器中表现如下：

所有浏览器NodeList.item(index).id: span2

2.5. NodeList.namedItem(name)

Webkit 浏览器不支持 NodeList.namedItem(name)。以下测试代码中使用该方法获取节点，并输出节点 id 属性值。如果程序出错，则输出异常：

各浏览器中表现如下：

ChromeNodeList.namedItem(name): TypeError: Object # has no method 'namedItem'

SafariNodeList.namedItem(name): TypeError: Result of expression 'spans.namedItem' [undefined] is not a function.

IE Firefox OperaNodeList.namedItem(name).id: span2

3. 差异汇总

IEFirefoxChromeSafariOpera

NodeList[index]支持支持支持支持支持

NodeList[name]支持支持支持支持支持

NodeList.item(index)支持支持支持支持支持

NodeList(index)支持不支持支持支持支持

NodeList(name)支持不支持不支持不支持支持

NodeList.namedItem(name)支持支持不支持不支持支持

可见：

在 IE Opera 中，NodeList 也具备了 HTMLCollection 接口提供的方法，而在 Firefox 中，也不支持通过 NodeList(index) 来获取元素。

解决方案

要从 NodeList 中获取元素，请使用 NodeList[index]、NodeList[name] 或 NodeList.item(index)，以保证兼容各浏览器。

更多信息请查看IT技术专栏