【转】各浏览器中的 NodeList 接口存在差异

标准参考

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

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

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

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

问题描述

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

造成的影响

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

受影响的浏览器

所有浏览器

问题分析

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

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

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

【注】：Collection 在规范文档中被定义为接口，但在浏览器具体实现时并不一定按照接口设计他，因此他也有可能是个类。文中采用"实现"或"继承"名字来描述这个开发现象。

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

2.1. NodeList[index] 和 NodeList[name]

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

<script type="text/javascript">
    window.onload = function() {
        var spans = document.getElementsByTagName("span");
        var span2 = spans[1];
        var span3 = spans["span3"];
        document.getElementById("info").innerHTML = "<br/>NodeList[index].id: " + span2.id + "<br/>NodeList[name].id: " + span3.id;
    }
</script>
<span id="span1"></span>
<span id="span2"></span>
<span id="span3"></span>

<div id="info"></div>

在各浏览器中表现如下：

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

 

2.2. NodeList(index)

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

<script type="text/javascript">
    window.onload = function() {
        var spans = document.getElementsByTagName("span");
        try {
            var span2 = spans(1);
            document.getElementById("info").innerHTML = "NodeList(index).id: " + span2.id;
        } catch(err) {
            document.getElementById("info").innerHTML = "NodeList(index): " + err;
        }
    }
</script>
<span id="span1"></span>
<span id="span2"></span>

<div id="info"></div>

各浏览器中表现如下：

IE Chrome Safari Opera	NodeList(index).id: span2
Firefox	NodeList(index): TypeError: spans is not a function

 

2.3. NodeList(name)

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

<script type="text/javascript">
    window.onload = function() {
        var spans = document.getElementsByTagName("span");
        try {
            var span2 = spans("span2");
            document.getElementById("info").innerHTML = "NodeList(name).id: " + span2.id;
        } catch(err) {
            document.getElementById("info").innerHTML = "NodeList(name): " + err;
        }
    }
</script>
<span id="span1"></span>
<span id="span2"></span>

<div id="info"></div>

各浏览器中表现如下：

Firefox	NodeList(name): TypeError: spans is not a function
Chrome	NodeList(name) : TypeError: Cannot read property 'id' of undefined
Safari	NodeList(name): TypeError: Result of expression 'span2' [undefined] is not an object.
IE Opera	NodeList(name).id: span2

 

2.4. NodeList.item(index)

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

<script type="text/javascript">
    window.onload = function() {
        var spans = document.getElementsByTagName("span");
        try {
            var span2 = spans.item(1);
            document.getElementById("info").innerHTML = "NodeList.item(index).id: " + span2.id;
        } catch(err) {
            document.getElementById("info").innerHTML = "NodeList.item(index): " + err;
        }
    }
</script>
<span id="span1"></span>
<span id="span2"></span>

<div id="info"></div>

各浏览器中表现如下：

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

 

2.5. NodeList.namedItem(name)

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

<script type="text/javascript">
    window.onload = function() {
        var spans = document.getElementsByTagName("span");
        try {
            var span2 = spans.namedItem("span2");
            document.getElementById("info").innerHTML = "NodeList.namedItem(name).id: " + span2.id;
        } catch(err) {
            document.getElementById("info").innerHTML = "NodeList.namedItem(name): " + err;
        }
    }
</script>
<span id="span1"></span>
<span id="span2"></span>

<div id="info"></div>

各浏览器中表现如下：

Chrome	NodeList.namedItem(name): TypeError: Object # has no method 'namedItem'
Safari	NodeList.namedItem(name): TypeError: Result of expression 'spans.namedItem' [undefined] is not a function.
IE Firefox Opera	NodeList.namedItem(name).id: span2

 

3. 差异汇总

	IE	Firefox	Chrome	Safari	Opera
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)，以保证兼容各浏览器。

参见

知识库

• ...

相关问题

• ...

测试环境

操作系统版本:	Windows 7 Ultimate build 7600
浏览器版本:	IE6 IE7 IE8 Firefox 3.6.8 Chrome 6.0.472.0 dev Safari 5.0(7533.16) Opera 10.60
测试页面:	NodeList[index]_NodeList[name].html  NodeList(index).html  NodeList(name).html  NodeList.item(index).html  NodeList.namedItem(name).html
本文更新时间:	2010-08-02

关键字

NodeList Collection item nameItem 集合对象