javascript - GetElementsByTagName ▪ item() { [本地代码] } - 这是什么？

Question

使用下面的代码

<ul>
  <li>Rice</li>
  <li>Coffee</li>
  <li>Beans</li>
</ul>

<script>
    var elem = document.getElementsByTagName('li')
    for (var i in elem) {
        console.log(elem[i])
    }
</script>

我看到五个结果，如下。

<li>Rice</li>
<li>Coffee</li>
<li>Beans</li>
ƒ item() { [native code] }
ƒ namedItem() { [native code] }

最后两项到底是什么？

Answer 1

for-in 循环迭代对象的所有可枚举属性。 .getElementsByTagName() 方法返回 HTMLCollection可以迭代。问题是 HTMLCollection 有额外的属性(方法):item() 和 namedItem() 显然是可枚举 这就是为什么 for-in 会迭代它们。

为了避免这种情况，您可以使用标准的for循环:

var elem = document.getElementsByTagName('li');
for (var i = 0; i < elem.length; i++) {
    console.log(elem[i]);
}

您可以阅读有关属性描述符(例如可枚举)的信息 here .