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

Question

我正在尝试使用document.querySelectorAll查询的所选元素循环,但是如何？

例如,我使用:

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

输出:

<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()

我的问题是,最后这个方法返回3个额外的项目.我该怎么做呢？

Answer 1

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
}

如果数组中的某些元素可能是假的(不是你的情况),则不能使用第二种方法,但可以更具可读性,因为你不需要在[]任何地方使用符号.

Answer 2

一个不错的选择是:

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

但正如所指出的,你应该使用for循环.

Answer 3

我最喜欢使用spread运算符将其转换为数组,然后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,因此不应该存在浏览器支持问题.

Answer 4

使用ES6,有一种静态方法Array.from可以利用Array非静态方法(forEach,map,filter,..):

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

     // handle "element"

});

另外,使用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);
});

Answer 5

看起来Firefox 50 +,Chrome 51+和Safari 10+现在都支持对象.forEach功能NodeList.注意 - .forEachInternet Explorer不支持,因此,如果需要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>

Answer 6

主要要点：

类型很重要。

.map不会直接在 a 上工作NodeList，但会在Array.

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

选项：

ES6可用吗？

1. [...element_list]那么展开算子Array.map()
2. Array.from()在一个NodeList.forEach()

ES6 不可用？

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

Answer 7

// 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
};

这让我可以灵活地选择要使用的元素。