如何使用 document.querySelectorAll 有效地循环选定的元素

使用 document.querySelectorAll 循环选定的元素

document.querySelectorAll 是一个强大的方法，允许您根据指定选择多个元素CSS 选择器。要迭代这些选定的元素，了解生成的 NodeList 对象的细微差别至关重要。

NodeList 与 Array

使用 for 时遇到的问题。 ..in 循环的问题是 NodeList 不是数组。虽然 NodeList 类似于数组，但它拥有其他属性，如 item() 和namedItem()。因此，除了元素本身之外，for...in 循环还会迭代这些属性，从而导致您遇到额外的 3 项。

循环的最佳实践

要避免此问题并正确循环，请考虑以下方法：

使用带索引的 For 循环

<code class="javascript">var checkboxes = document.querySelectorAll(".check");

for (var i = 0; i < checkboxes.length; i++) {
  // Do something with checkboxes[i]
}</code>

使用 ForEach 循环(ES2015)

forEach() 方法是专门为迭代数组和 NodeList 而设计的。它简化了循环语法，使其更加简洁：

<code class="javascript">var checkboxes = document.querySelectorAll(".check");

checkboxes.forEach(function(checkbox) {
  // Do something with checkbox
});</code>

Converting NodeList to Array (ES2015)

另一种有效的方法，特别是对于 ES2015 环境，是使用展开语法将 NodeList 转换为数组：

<code class="javascript">var div_list = document.querySelectorAll("div"); // returns NodeList
var div_array = [...div_list]; // converts NodeList to Array

div_array.forEach(function(div) {
  // Do something with div
});</code>

其他注意事项

• 为了浏览器兼容性，请确保使用像 Babel.js 这样的转译器，如果必要的。
• 如果您使用 Node.js，您可以利用 NodeLists 上的 .map() 方法。

以上是如何使用 document.querySelectorAll 有效地循环选定的元素的详细内容。更多信息请关注PHP中文网其他相关文章！