for...of...loop 和 NodeLists - CSS

介绍

当我们在 CSS 中使用 querySelectorAll 和 getElementsByClassName 来选取多个元素时，返回的是一个名为 NodeLists 的对象。虽然可以使用索引来访问该对象中的元素，但是对于访问整个对象中的所有元素， for...of...loop 可以起到更方便的作用。

使用方法

let nodeList = document.querySelectorAll('.example'); // 选取多个元素并存放在 NodeList 中

for (let item of nodeList) {
  // 对于每个元素，进行一些操作
  item.style.color = 'red'; // 修改元素的颜色为红色
}

可以实现的操作

1.操作所有元素

使用 for...of...loop 可以方便地对每个元素进行相同的操作。比如，在上面的示例中将所有元素的颜色修改为红色。

2.操作指定元素

如果只需要修改 NodeList 中的某些元素，那么可以在循环中添加判断条件。例如，只修改 class 为 example 和 selected 的元素：

for (let item of nodeList) {
  if (item.classList.contains('example') || item.classList.contains('selected')) {
    item.style.color = 'red';
  }
}

3.操作其他属性

在 for...of...loop 中还可以操作除了样式以外的其他属性，比如：

for (let item of nodeList) {
  item.setAttribute('data-value', 'hello'); // 设置元素的 data-value 属性为 hello
}

注意事项

• 如果 NodeList 中不存在任何元素， for...of...loop 不会执行任何操作。
• 如果需要修改元素的样式，建议使用 classList，而不是直接修改 style 属性。因为后者会覆盖掉原有的样式，可能会导致问题。例如：

item.style.color = 'red'; // 不建议使用
item.classList.add('text-red'); // 推荐使用

结论

通过 for...of...loop 和 NodeList，可以轻松地对选取的多个元素进行操作。它们可以使代码变得更加简洁、易读，同时也可以提高程序的性能。