getElementsByClassName returns 重复元素

Question

更多的是寻求解释而不是解决问题。我 return 4 项来自：

var inputFields = document.getElementsByClassName("calc-input-url");

但是当我将数组记录为输出时，我得到了这个：

[
    input#tippedEmployees.form-control.calc-input-url,
    input#hourlyWage.form-control.calc-input-url, 
    input#weeklyTips.form-control.calc-input-url, 
    input#hoursTippedEmp.form-control.calc-input-url, 
    tippedEmployees: input#tippedEmployees.form-control.calc-input-url,
    hourlyWage: input#hourlyWage.form-control.calc-input-url, 
    weeklyTips: input#weeklyTips.form-control.calc-input-url, 
    hoursTippedEmp: input#hoursTippedEmp.form-control.calc-input-url, 
    item: function…
]

然后我记录了数组的长度以进行仔细检查，结果只得到 return 值 4。

数组中这些额外的元素来自哪里，为什么是它们there/how我可以使用它们（如果有的话）吗？

Answer 1

您看到的不是常规数组，而是HTMLCollection。数组 "has keys" (tippedEmployees:) 应该表明这不是普通数组。 HTMLCollection 以类似数组的方式公开元素，但也直接通过它们的 id。这是给你的方便。

实际上应该没有问题，因为您要么要使用for (var i = 0; i < list.length; i++) list[i]...、[=19=迭代它的"array part" ]或者你将直接通过id访问元素。

getElementsByClassName returns 重复元素

getElementsByClassName returns duplicate elements

javascript

arrays

getelementsbyclassname