中文字幕免费精品_亚洲视频自拍_亚洲综合国产激情另类一区_色综合咪咪久久

標準參考

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 屬性值輸出：

<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 OperaNodeList(index).id: span2

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

各瀏覽器中表現如下：

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 屬性值；如果程序出錯，則輸出異常：

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

各瀏覽器中表現如下：

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技術專欄