Chrome getElementsByTagName返回HTMLCollection與NodeList

Question

我發現JavaScript函數getElementsByTagName根據瀏覽器返回不同的數據。 與Firefox，IE或Chromium相比，Chrome發送回來的HTML集合更長（真的，更好，IMO）。

我將在下面概述我的發現。 我的問題基本上是“為什么Chrome會改變這一點，其他瀏覽器也會這樣做（何時？），以及返回的length屬性的可靠性如何？”

比較Chrome（版本34.0.1847.116 m）與Chromium（版本33.0.1750.152 Ubuntu 13.10（256984））。 我注意到這個Chromium版本有點落后於Chrome（v33 vs v34），因此在Ubuntu Chromum版本中也可能采用這種方式，但它至少幫助我比較了這里發生的事情。

請考慮以下代碼塊：

<script type='text/javascript'>
function getElements(){
  var x=document.getElementsByTagName("input");
  console.log(x.length);
  console.log(x);
}
</script>
<form>
<input type="text" size="20" id='test1'><br>
<input type="text" size="20" id='test2'><br>
<input type="text" size="20" id='test3'><br><br>
<input type="button" onclick="getElements()" value="How many input elements?">
</form>

在Chromium和其他瀏覽器中運行上面的結果顯示結果顯示長度為4，並且返回的數據是索引數組，如：

[input#test1, input#test2, input#test3, input, item: function] 0: input#test1 1: input#test2 2: input#test3 3: input length: 4 __proto__: NodeList

Chrome會返回類似但擴展的結果數組：

[input#test1, input#test2, input#test3, input, test1: input#test1, test2: input#test2, test3: input#test3, item: function, namedItem: function] 0: input#test1 1: input#test2 2: input#test3 3: input length: 4 test1: input#test1 test2: input#test2 test3: input#test3 __proto__: HTMLCollection

請注意，在這兩種情況下，長度都是4，但Chromium第二次包含每個輸入元素，由元素的ID屬性而不是索引鍵索引。 Chrome正在返回一個HTMLCollection ，其中Chromium提供NodeList 。

在過去，我使用for x in y語法處理這些數組，加上一些驗證，如下所示：

var inputs = document.getElementsByTagName('input');
for (x in inputs){
  if(inputs[x].id != undefined){
  }
}

我得出的結論是以這種方式使用結果：

var inputs = document.getElementsByTagName('input');
for (x=0; x<inputs.length; x++){
}

無論哪種方式，您使用inputs[x]訪問元素，但使用第二種方法，我們保證x始終是我們用作鍵的整數之一。 在第一種方法中，x將是整數鍵，然后是字符串'length'，然后是任何ID字符串。

Answer 1

從開發人員firefox文檔 ：

雖然W3C DOM 3核心規范說元素是NodeList，但僅僅是因為嘗試讓“核心”規范不依賴於那時的“html”規范。 DOM 4草案說元素是HTMLCollection。

Gecko / Firefox目前返回NodeList（錯誤162927），但從Gecko / Firefox 19開始，此方法將返回HTMLCollection（錯誤799464）。 Internet Explorer返回HTMLCollection。 WebKit返回一個NodeList。 Opera還返回一個NodeList，但實現了一個namedItem方法，這使得它類似於HTMLCollection。