javascript - HTMLCollection的长度为8，但记录其任何索引是否返回未定义？

我正在尝试遍历HTMLCollection，但看起来好像在进入循环之前满足了中断条件。此外，当我将HTMLCollection打印到控制台时，它返回HTMLCollection并且可以看到其中包含元素，但是，当我尝试打印其任何索引时，它返回undefined

这是代码：

var applicant_elements = document.getElementsByClassName('applicant');
console.log(applicant_elements); // returns the HTMLCollection
                                 // with length of 8
                                 // and valid elements
console.log(applicant_elements[0]); // returns undefined
for (var i = 0; i < applicant_elements.length; i++) {
    console.log('hello'); // this is never logged
}

这是上面的代码记录的内容：

javascript - HTMLCollection的长度为8，但记录其任何索引是否返回未定义？-LMLPHP

我还应该指出，我正在angularJS控制器中运行以下代码。不知道这是否会改变任何东西，但我认为不应该改变

最佳答案

如this answer中所述，console.log()调用不一定在不同的浏览器中立即进行。 document.getElementsByClassName返回对实时HTMLCollection的引用。这意味着对DOM的任何更改将自动反映在集合中，因此，在最终解决console.log的调用后，您将在输出中看到所有关联的节点。但是，对applicant_elements[0]的引用不是实时引用-它在给定的时间点被解析，因此不会因未定义而改变。

总结一下：查询之后，您的HTMLCollection可能为空，但是您的代码在解析console.log()调用之前（例如，从函数返回之前）添加了元素。