Javascript 如何使用 document.querySelectorAll 循环选择元素

How to loop through selected elements with document.querySelectorAll

提问by Hadi Mostafapour

I am trying loop on selected elements that queried with document.querySelectorAll, but how?

我正在尝试对使用 document.querySelectorAll 查询的选定元素进行循环，但是如何进行？

For example I use:

例如我使用：

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

Output:

输出：

<input id="check-1" class="check" type="checkbox" name="check">
<input id="check-2" class="check" type="checkbox" name="check">
<input id="check-3" class="check" type="checkbox" name="check">
<input id="check-4" class="check" type="checkbox" name="check">
<input id="check-5" class="check" type="checkbox" name="check">
<input id="check-6" class="check" type="checkbox" name="check">
<input id="check-7" class="check" type="checkbox" name="check">
<input id="check-8" class="check" type="checkbox" name="check">
<input id="check-9" class="check" type="checkbox" name="check">
<input id="check-10" class="check" type="checkbox" name="check" checked="">

10
item()
namedItem()

My problem is that at the end this method returns 3 extra items. How can I properly do it?

我的问题是最后这个方法返回 3 个额外的项目。我怎样才能正确地做到这一点？

采纳答案by duri

for inloop is not recommended for arrays and array-like objects - you see why. There can be more than just number-indexed items, for example the lengthproperty or some methods, but for inwill loop through all of them. Use either

for in不建议将循环用于数组和类似数组的对象——你明白为什么了。可以有不仅仅是数字索引的项目，例如length属性或某些方法，但for in会循环遍历所有这些项目。使用任一

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

or

或者

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

The second way can't be used if some elements in array can be falsy (not your case), but can be more readable because you don't need to use []notation everywhere.

如果数组中的某些元素可能是假的（不是你的情况），则不能使用第二种方法，但可以更易读，因为你不需要在[]任何地方使用符号。

回答by Thoran

My favorite is using spread operatorto convert it to array and then use forEachfor looping.

我最喜欢的是使用扩展运算符将其转换为数组，然后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

});

I code in ES2015 and use Babel.js so there shouldn't be a browser support issue.

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

回答by Jak S

A nice alternative is:

一个不错的选择是：

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

but as pointed out, you should use a for loop.

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

回答by aboutaaron

It looks like Firefox 50+, Chrome 51+ and Safari 10+ now all support the .forEachfunction for NodeListobjects. Note—.forEachis not supported in Internet Explorer, so consider one of the approaches above or use a polyfill if IE support is required.

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

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

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>

回答by Abdennour TOUMI

With ES6, there is a static method Array.fromto take advantages of Arraynon-static methods (forEach,map,filter,..) :

在ES6 中，有一个静态方法Array.from可以利用Array非静态方法 (forEach,map,filter,..) 的优势：

Array.from(document.querySelectorAll('div')).forEach((element,index) =>
{

     // handle "element"

});

Another , use of Array.fromsince querySelectorprovides itemmethod :

另一个，使用Array.from自querySelector提供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);
});