Question

运行以下代码并按下按钮应该会在控制台窗口中记录2个元素，包含class="test1"，按钮和p元素的元素。 console.log(el.length)是2。但是这个记录到控制台的是：

[p#div1.test1, 
 button#btn.test1, 
 div1: p#div1.test1, 
 btn: button#btn.test1]

看起来像4元素而不是2。

这里发生了什么？

<html>
<body>
<p class="test1" id="div1">test1</p>
<button id="btn" onclick="getElements()" class="test1">Get Element List</button>
<script>
function getElements()
{
    var txt = document.getElementById("div1").innerHTML;

    var el = document.getElementsByClassName(txt);
    if (el) {
        console.log(el); 
        console.log(el.length); 
    }
}
</script>
</body>
</html>

Answer 1

这是因为它是一个返回的HTML Collection，它是数组，但不是数组。如果您将代码更改为

var el = document.getElementsByClassName(txt);
if (el) {
    console.log(Array.from(el)); 
    console.log(el.length); 
}

将集合转换为数组，您将看到真正的数组，只包含2个项目。

[p#div1.test1, button#btn.test1]
0: p#div1.test1
1: button#btn.test1
length: 2

HTML Collection公开了两种方法

HTMLCollection.item()
HTMLCollection.namedItem()

这就是为什么它似乎是条目数量的两倍，尽管它不是。

Answer 2

诀窍是getElementsByClassName没有返回数组，而是HTMLCollection。

HTMLCollection将信息直接作为属性＆＃34;通过名称和索引＆＃34;，这就是为什么它看起来像有4个成员。

使用getElementsByClassName似乎获得了太多元素

2 个答案: