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.