JavaScript 循环查询选择器所有结果

我们来谈谈节点列表，也就是querySelectorAll()查询的神奇结果。

它虽然不是数组，但外观和行为都与数组类似。
遍历这些元素可能比较棘手，而且有多种方法可以实现。

选择器的外观如下：



const items = document.querySelectorAll('li');
console.log(items);

结果：

1. 基本 for 循环

这是目前为止支持最好的方法，如果要尽可能支持更多浏览器，这是最佳选择。



for (let i = 0; i < items.length; i++) {
  items[i].addEventListener('click', function() {
    console.log(`Text = ${items[i].innerText}`);
  });
}

这并不是最现代或最吸引人的方法。

我们还可以使用for...of循环。



for (const item of items) {
  item.addEventListener('click', () => {
    console.log(`2: Text = ${item.innerText}`);
  });
}

所有现代浏览器都支持此功能，而且效果相当不错。

我最喜欢的遍历 NodeList 元素的方法就是 forEach 循环。

这是最简单的方法，但仅适用于现代浏览器。



items.forEach(item => {
  item.addEventListener('click', () => {
    console.log(`3: Text = ${item.innerText}`);
  });
});

可以通过事先将其转换为数组来扩展此方法。



[].forEach.call(items, function(item) {
  item.addEventListener('click', function() {
    console.log(`3.1: Text = ${item.innerText}`);
  });
});

或者，我们可以使用扩展运算符将其转换为数组：



[...items].forEach(item => {
  item.addEventListener('click', () => {
    console.log(`3.2: Text = ${item.innerText}`);
  });
});

以上就是遍历 nodeList 元素的三种方法（+迭代）。

你也可以在这个 Codepen 上试玩一下。

感谢您阅读我的博客。欢迎订阅我的电子邮件简讯，也可以在Facebook或Twitter上关注我。