【发布时间】：2014-06-08 08:12:12
【问题描述】：
我发现 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，返回的数据是索引数组，类似于：
[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 字符串。
【问题讨论】：
-
这很有趣，但这是个问题吗？
-
我几乎毫无疑问地发布了......但第二段是我的问题，“为什么 Chrome 会改变这一点，其他浏览器也会这样做（何时？），以及返回长度属性？”
-
请注意，
for (attr in obj)会迭代所有属性，即使是那些因原型链而继承的属性。因此建议使用hasOwnProperty()，另见this answer。
标签： javascript google-chrome chromium getelementsbytagname