我发现 JavaScript 函数 getElementsByTagName 会根据浏览器返回不同的数据。 Chrome 发回的 HTML 集合比 Firefox、IE 或 Chromium 更长(真的，更好，IMO)。

我将在下面概述我的发现。我的问题本质上是“为什么 Chrome 会改变这个，其他浏览器也会这样做(什么时候？)，以及返回的 length 属性有多可靠？”

比较 Chrome(版本 34.0.1847.116 m) 与 Chromium(版本 33.0.1750.152 Ubuntu 13.10 (256984))。我确实注意到这个 Chromium 版本有点落后于 Chrome(v33 与 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，并且返回的数据是一个索引数组，类似于:

[输入#test1、输入#test2、输入#test3、输入、项目:函数] 0: 输入#test1 1: 输入#test2 2:输入#test3 3:输入 长度:4 __proto__: 节点列表

Chrome 返回一个相似但扩展的结果数组:

[input#test1, input#test2, input#test3, input, test1: input#test1, test2: input#test2, test3: input#test3, item: function, namedItem: function] 0: 输入#test1 1: 输入#test2 2:输入#test3 3:输入 长度:4 测试1:输入#test1 测试2:输入#test2 测试3:输入#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 字符串。

最佳答案

来自开发者 firefox documentation :

While the W3C DOM 3 Core specification says elements is a NodeList that was simply because of a an attempt to have the "core" specification not depend on the "html" specification at that time. The DOM 4 draft says that elements is an HTMLCollection.

Gecko/Firefox currently returns a NodeList (Bug 162927) but starting with Gecko/Firefox 19, this method will return HTMLCollection (Bug 799464). Internet Explorer returns a HTMLCollection. WebKit returns a NodeList. Opera also returns a NodeList, but with a namedItem method implemented, which makes it similar to a HTMLCollection.

关于javascript - Chrome getElementsByTagName 返回 HTMLCollection 与 NodeList，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23245240/