数组中存在的对象返回未定义

Question

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

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中。如果您只想要在特定时间具有某些类的元素的静态集合，则可以使用document.querySelectorAll。在您的示例中，您可以使用：

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