Javascript 使用getElementsByClassName似乎获取了太多的元素_Javascript_Html

Javascript 使用getElementsByClassName似乎获取了太多的元素

javascript html

Javascript 使用getElementsByClassName似乎获取了太多的元素,javascript,html,Javascript,Html,运行以下代码并按下按钮应记录到控制台窗口的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"&

运行以下代码并按下按钮应记录到控制台窗口的2个元素，即带有

class=“test1”

的元素、按钮和

元素。而

console.log（el.length）

是

。但登录到控制台的是：

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

看起来像

元素而不是

这里发生了什么

<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>


test1
获取元素列表
函数getElements（）
{
var txt=document.getElementById（“div1”）.innerHTML；
var el=document.getElementsByClassName（txt）；
如果（el）{
控制台日志（el）；
控制台日志（el.长度）；
}
}

诀窍在于

getElementsByClassName

不返回数组，而是返回一个数组

“按名称和索引”将信息直接作为属性，因此它看起来有4个成员。

诀窍在于

getElementsByClassName

不返回数组，而是返回一个数组

“按名称和索引”将信息直接作为属性，因此它看起来有4个成员。

这是因为它是返回的HTML集合，类似于数组，但不是数组。如果您将代码更改为

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集合公开了两种方法

HTMLCollection.item()
HTMLCollection.namedItem()

这就是为什么它看起来是两倍的条目数量，虽然它不是

这是因为它是返回的HTML集合，类似于数组，但不是数组。如果您将代码更改为

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集合公开了两种方法

HTMLCollection.item()
HTMLCollection.namedItem()

这就是为什么它看起来是两倍的条目数量，虽然它不是

您似乎对

console.log

的“正常性”太兴奋了。一切都很好，正常工作。输出是正确的。除了误解日志之外，这里真正的问题是什么？我的问题可能应该是：为什么console.log（el）中有四个元素（即用逗号分隔）？您似乎对

console.log的“正常性”太兴奋了。一切都很好，正常工作。输出是正确的。除了误解日志之外，这里真正的问题是什么？我的问题可能应该是：为什么console.log（el）中有四个元素（即用逗号分隔）？