如何使用 document.querySelectorAll 有效地循環選定的元素

使用document.querySelectorAll 循環選定的元素

document.querySelectorAll 是一個強大的方法，允許您根據指定選擇多個元素CSS 選擇器。要迭代這些選取的元素，了解產生的 NodeList 物件的細微差別至關重要。

NodeList 與 Array

使用 for 時遇到的問題。 ..in 迴圈的問題是 NodeList 不是陣列。雖然 NodeList 類似於數組，但它擁有其他屬性，如 item() 和namedItem()。因此，除了元素本身之外，for...in 迴圈還會迭代這些屬性，從而導致您遇到額外的 3 項。

循環的最佳實踐

要避免此問題並正確循環，請考慮以下方法：

使用帶索引的For循環

使用ForEach 迴圈(ES2015)

forEach() 方法是專門為迭代數組和NodeList 而設計的。它簡化了循環語法，使其更加簡潔：

Converting NodeList to Array (ES2015)

另一種有效的方法，特別是對於ES2015環境，是使用展開語法將NodeList 轉換為數組：

其他注意事項

• 為了瀏覽器相容性，請確保使用像Babel .js 這樣的轉譯器，如果必要的。
• 如果您使用 Node.js，您可以利用 NodeLists 上的 .map() 方法。

以上是如何使用 document.querySelectorAll 有效地循環選定的元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！