打印

SD9004: 各浏览器中的 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 实现(继承1)了 Collection 接口(类1),所以 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 集合对象