如何使用 document.querySelectorAll 遍历选定的元素

我最喜欢的是使用 spread 语法将 NodeList 转换为数组，然后使用 forEach 进行循环。

var div_list = document.querySelectorAll('div'); // returns NodeList
var div_array = [...div_list]; // converts NodeList to Array
div_array.forEach(div => {
// do something awesome with each div
});

我在 ES2015 中编码并使用 Babel.js，所以应该没有浏览器支持问题。

建议将for in循环用于数组和类似数组的对象 - 您会看到原因。可以不仅仅是数字索引项，例如 length 属性或某些方法，但for in将遍历所有这些项。使用任一

for (var i = 0, len = checkboxes.length; i < len; i++) {
    //work with checkboxes[i]
}

或

for (var i = 0, element; element = checkboxes[i]; i++) {
    //work with element
}

如果数组中的某些元素可能是伪造的(不是您的情况(，则无法使用第二种方法，但可以更具可读性，因为您不需要在任何地方使用[]符号。

看起来Firefox 50+，Chrome 51+和Safari 10+现在都支持NodeList对象的.forEach功能。注意 — Internet Explorer 不支持.forEach，因此请考虑上述方法之一，如果需要 IE 支持，请使用 polyfill。

https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach

const paragraphs = document.querySelectorAll('p');
paragraphs.forEach(p => console.log(p));

<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>
<p>paragraph 4</p>
<p>paragraph 5</p>

在 ES6 中，有一个静态方法Array.from利用Array非静态方法(map、filter、...(：

Array.from(document.querySelectorAll('div')).forEach((element,index) =>
{
     // handle "element"
});

自querySelector以来Array.from的另一个用途提供了item方法：

var all = document.querySelectorAll('div');
// create range [0,1,2,....,all.length-1]
Array.from({length: all.length}, (v, k) => k).forEach((index) => {
     let element = all.item(index);
});

一个不错的选择是：

[].forEach.call(
    document.querySelectorAll('.check'),
    function (el) {
        console.log(el);
    }
);

但正如所指出的，你应该使用 for 循环。

// for class
for (const elem of document.querySelectorAll('[class=".check"]')){
    //work as per usual
};
// for name
for (const elem of document.querySelectorAll('[name="check"]')){
    //work as per usual
};
// for id
for (const elem of document.querySelectorAll('[id="check-1"]')){
    //work as per usual
};

这为我提供了想要使用什么元素的灵活性。

主要要点：

类型很重要。

.map不会直接在NodeList上工作，而是在Array上工作。

比较这些： Array.prototype.map() NodeList.forEach()

选项：

ES6 可用？

1. 然后，点差运算符[...element_list] Array.map()
2. Array.from() NodeList.forEach()

ES6 不可用？

1. NodeList.forEach()
2. 一个"for循环">

最干净和最容易理解的是for of语法。我的第二个选择是点差运算符(...如果ES6可用(。最后，forEach您是否正在构建大型应用程序，并且希望为大多数浏览器提供支持。

const lis = document.querySelectorAll('li')
let results = {
  'for': [],
  'forEach': [],
  'three-dots': [],
}
// ES6 bellow
for (const li of lis) {
  results['for'].push(li)
}
// ES6 above
[...lis].forEach((li) => results['three-dots'].push(li))
// Most browsers support it 
lis.forEach(li => results['forEach'].push(li))
console.log({results})

<u>
  <li>Item 01</li>
  <li>Item 02</li>
  <li>Item 03</li>
  <li>Item 04</li>
  <li>Item 05</li>
  <li>Item 06</li>
  <li>Item 07</li>
  <li>Item 08</li>
</u>

能够使用任何常规 Array 方法的最短和最干净的方法，或者在您的情况下是 NodeList 上的for in循环，是在获取时将其分散到数组中：

const checkboxes = [...document.querySelectorAll('.check')];
for (i in checkboxes) {
  console.log(checkboxes[i]);
}

>您可以使用querySelectorAll方法选择所有元素。它将返回一个节点列表数组。

假设您想选择所有 p 标签

<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>
<p>paragraph 4</p>
<p>paragraph 5</p>

const paragraphs = document.querySelectorAll('p');

现在这些段落有一个 forEach 方法，可用于循环遍历节点列表

paragraphs.forEach(console.log); (logs node)