標(biāo)準(zhǔn)參考

NodeList 接口是由 DOM Level-1-Core 引入的，它是一個(gè)有序的節(jié)點(diǎn)集合抽象，它提供了一個(gè)用來(lái)獲取節(jié)點(diǎn)數(shù)量的屬性 length 和一個(gè)用來(lái)獲得集合中指定索引的節(jié)點(diǎn)的方法 item。

在有些瀏覽器中，一個(gè) NodeList 對(duì)象也具備 HTMLCollection 接口提供的方法。

關(guān)于 NodeList 接口的更詳細(xì)信息，請(qǐng)參考 DOM Level-1-Core 中的內(nèi)容。

關(guān)于 HTMLCollection 接口的詳細(xì)信息，請(qǐng)參考 DOM Level-2-HTML 中的內(nèi)容。

問(wèn)題描述

各瀏覽器中的 NodeList 接口存的實(shí)現(xiàn)有差異。

造成的影響

該問(wèn)題在某些情況下將導(dǎo)致腳本異常。

受影響的瀏覽器

所有瀏覽器

問(wèn)題分析

1. 各瀏覽器中 NodeList 接口的實(shí)現(xiàn)

在 Firefox Chrome Safari 中，對(duì)于 NodeList 的定義與 W3C 相同；而在 IE Opera 中，NodeList 繼承了 Collection 接口，所以 NodeList 也支持 Collection 接口中的方法。

關(guān)于各瀏覽器 NodeList 接口的說(shuō)明，請(qǐng)參考 Mozilla 的 、Safari Webkit DOM 的 和 MSDN 的 中的信息。

2. 各瀏覽器中從 NodeList 中獲取節(jié)點(diǎn)的方法支持差異

2.1. NodeList[index] 和 NodeList[name]

以上兩種方式各瀏覽器都支持。以下測(cè)試代碼中分別用這兩種方式獲取節(jié)點(diǎn)，然后將這兩個(gè)節(jié)點(diǎn)的 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>

在各瀏覽器中表現(xiàn)如下：

所有瀏覽器NodeList[index].id: span2

NodeList[name].id: span3

2.2. NodeList(index)

只有 Firefox 不支持 NodeList(index) 。以下測(cè)試代碼中使用這種方式獲取節(jié)點(diǎn)，然后輸出 id 屬性值；如果程序出錯(cuò)，則輸出拋出異常：

<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>

各瀏覽器中表現(xiàn)如下：

IE Chrome Safari OperaNodeList(index).id: span2

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

2.3. NodeList(name)

Firefox 以及 Webkit 瀏覽器不支持這種方式從集合中獲取元素。以下測(cè)試代碼中用 NodeList(name) 的方式獲取一個(gè)節(jié)點(diǎn)，并輸出 id 屬性值；如果程序出錯(cuò)，則輸出異常：

<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>

各瀏覽器中表現(xiàn)如下：

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)

所有瀏覽器都支持此方法。以下測(cè)試代碼中使用該方法獲取節(jié)點(diǎn)，并輸出節(jié)點(diǎn) id 屬性值；如果程序出錯(cuò)，則輸出異常：

<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>

各瀏覽器中表現(xiàn)如下：

所有瀏覽器NodeList.item(index).id: span2

2.5. NodeList.namedItem(name)

Webkit 瀏覽器不支持 NodeList.namedItem(name)。以下測(cè)試代碼中使用該方法獲取節(jié)點(diǎn)，并輸出節(jié)點(diǎn) id 屬性值。如果程序出錯(cuò)，則輸出異常：

<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>

各瀏覽器中表現(xiàn)如下：

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)支持支持不支持不支持支持

可見(jiàn)：

在 IE Opera 中，NodeList 也具備了 HTMLCollection 接口提供的方法，而在 Firefox 中，也不支持通過(guò) NodeList(index) 來(lái)獲取元素。

解決方案

要從 NodeList 中獲取元素，請(qǐng)使用 NodeList[index]、NodeList[name] 或 NodeList.item(index)，以保證兼容各瀏覽器。

更多信息請(qǐng)查看IT技術(shù)專欄