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

使用document.querySelectorAll 循環選定元素的有效方法

document.querySelectorAll 提供了一種基於指定條件選擇多個元素的強大方法。然而，開發人員在有效迭代所選元素時經常遇到挑戰。

使用傳統的 for..in 迴圈時，重要的是要注意傳回的物件包含三個附加屬性： item() 、namedItem() 和長度。為了避免循環中意外包含內容，請考慮採用更有效的方法。

替代循環技術

為了確保更準確的循環體驗，請考慮以下替代技術：

• 使用Spread 語法的forEach： 透過使用Spread 語法將document.querySelectorAll 傳回的NodeList 物件轉換為數組，您可以方便地使用forEach 方法迭代每個元素。

var div_list = document.querySelectorAll('div');
var div_array = [...div_list];
div_array.forEach(div => {
  // Do something with each div
});

• Array.from(): 或者，您可以使用 Array.from() 方法從 NodeList 建立一個新陣列。

var divs = Array.from(document.querySelectorAll('div'));
divs.forEach(div => {
  // Do something with each div
});

這些技術提供了更精緻的循環體驗，消除了不必要的屬性，並使您能夠專注於與所選元素本身進行互動。

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