【轉】各瀏覽器中的 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 集合對象