如何使用 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中文网其他相关文章！