Question

我发现JavaScript函数getElementsByTagName根据浏览器返回不同的数据。与Firefox，IE或Chromium相比，Chrome发送回来的HTML集合更长（真的，更好，IMO）。

我将在下面概述我的发现。我的问题基本上是＆＃34;为什么Chrome会更改此设置，其他浏览器也会这样做（何时？），以及返回的length属性的可靠性如何？＆＃34;

比较Chrome（版本34.0.1847.116 m） vs. 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将是整数键，然后是字符串＆＃39; length＆＃39;，然后是任何ID字符串。

Answer 1

来自开发者firefox documentation：

虽然W3C DOM 3 Core规范说元素是NodeList   这只是因为试图拥有“核心”   规范不依赖于当时的“html”规范。该   DOM 4草案说元素是HTMLCollection。

Gecko / Firefox目前返回NodeList（错误162927），但正在启动   使用Gecko / Firefox 19，此方法将返回HTMLCollection（Bug   799464）。 Internet Explorer返回HTMLCollection。 WebKit返回一个   节点列表。 Opera还返回一个NodeList，但是使用了一个namedItem方法   已实现，这使其类似于HTMLCollection。

Chrome getElementsByTagName返回HTMLCollection与NodeList

1 个答案: