存在的數組中的 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");