存在的数组中的 Object 返回未定义

Question

我有一个来自document.getElementsByClassName的数组，它有 8 个元素，但是每当我想访问一个元素时，控制台都会返回未定义的。

console.log(array)返回 0 - 7 的所有对象

console.log(array[0])返回未定义

这怎么可能？ 谢谢你的帮助！

console.log(array) ：

HTMLCollection
​
0: <li class="all-products-item" data-v-3d846c36="" data-spider-action-name="h5店铺首页-全部-综合" style="color: rgb(230, 36, 36);">
​
1: <li class="all-products-item" data-v-3d846c36="" data-spider-action-name="h5店铺首页-全部-分类" style="color: rgb(34, 34, 34);">
​
2: <li class="all-products-item" data-v-3d846c36="" data-spider-action-name="h5店铺首页-全部-销量" style="color: rgb(34, 34, 34);">
​
3: <li class="all-products-item price" data-v-3d846c36="" data-spider-action-name="h5店铺首页-全部-价格" style="color: rgb(34, 34, 34);">
​
4: <li class="all-products-item" data-v-3d846c36="" data-spider-action-name="h5店铺首页-全部-综合" style="color: rgb(230, 36, 36);">
​
5: <li class="all-products-item" data-v-3d846c36="" data-spider-action-name="h5店铺首页-全部-分类" style="color: rgb(34, 34, 34);">
​
6: <li class="all-products-item" data-v-3d846c36="" data-spider-action-name="h5店铺首页-全部-销量" style="color: rgb(34, 34, 34);">
​
7: <li class="all-products-item price" data-v-3d846c36="" data-spider-action-name="h5店铺首页-全部-价格" style="color: rgb(34, 34, 34);">
​
length: 8
​
<prototype>: HTMLCollectionPrototype { item: item(), namedItem: namedItem(), length: Getter, … }

Answer 1

document.getElementsByClassName返回找到的元素的实时HTMLCollection ； 因此，如果 DOM 被更改并且其中一些元素被删除或它们的一些类被删除，则更改也将反映在HTMLCollection中。 如果您只想要在特定时间具有某些类的元素的 static 集合，则可以使用document.querySelectorAll 。 在您的情况下，您可以使用：

document.querySelectorAll(".all-products-item");