“for ... in ...”构造的奇怪行为[重复]

Question

我有一个带有 4 个复选框的 div。然后我运行以下javascript：

var elements = document.getElementById('myDiv').getElementsByTagName('input');
alert(elements.length); // output: 4
for (element in elements) {
    alert(element);
}
alert('finish!');

在 4 之后，我按顺序收到以下警报：

0
1
2
3
item
namedItem
length
finish!

从 0 到 3 的数字是元素的索引。但是这里的“item”、“namedItem”和“length”是什么意思呢？

Answer 1

document.getElementById('myDiv').getElementsByTagName('input') 不返回真正的数组。它是一个array like 对象。所以像 forEach 和 map 这样的函数不存在。 for ... in ... 的行为很奇怪。

您可以使用slice 将其转换为真正的数组：

var elements = Array.prototype.slice.call(document.getElementById('myDiv').getElementsByTagName('input'));

Answer 2

http://www.w3schools.com/jsref/coll_form_elements.asp 如此链接所示，您正在输出输入元素的属性和方法。

Answer 3

elements 在您的代码中不是 javascript 数组，它是一个类似数组的对象。它实际上是 HTMLCollection，它具有一些额外的可枚举属性。

for...in 语句遍历对象的可枚举属性。

见for...in和HTMLCollection