javascript-如何使用document.querySelector遍历选定的元素

我正在尝试对通过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个额外的项目。 我该怎么做呢?

Hadi Mostafapour asked 2020-06-30T05:14:06Z
5个解决方案
39 votes

不建议将[]循环用于数组和类似数组的对象-您会明白为什么。 不仅可以有数字索引的项目,例如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
}

如果数组中的某些元素可能是虚假的(不是您的情况),则无法使用第二种方法,但是它可以更具可读性,因为您不需要在所有地方都使用[]表示法。

duri answered 2020-06-30T05:14:30Z
23 votes

一个不错的选择是:

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

但如前所述,您应该使用for循环。

Jak S answered 2020-06-30T05:14:54Z
22 votes

我最喜欢的是使用扩展运算符将其转换为数组,然后使用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,因此不应出现浏览器支持问题。

Thoran answered 2020-06-30T05:15:19Z
15 votes

使用ES6,有一个静态方法Array.from可以利用querySelector非静态方法(forEach,map,filter等)的优势:

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

     // handle "element"

});

另一种使用2453348217736791041的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);
});
Abdennour TOUMI answered 2020-06-30T05:15:43Z
14 votes

看起来Firefox 50 +,Chrome 51+和Safari 10+现在都支持NodeList对象的<p>paragraph 1</p> <p>paragraph 2</p> <p>paragraph 3</p> <p>paragraph 4</p> <p>paragraph 5</p>功能。 注意— Internet Explorer不支持<p>paragraph 1</p> <p>paragraph 2</p> <p>paragraph 3</p> <p>paragraph 4</p> <p>paragraph 5</p>,因此请考虑上述方法之一,如果需要IE支持,请使用polyfill。

[HTTPS://developer.Mozilla.org/恩-US/docs/Web/API/node list/foreach]

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

aboutaaron answered 2020-06-30T05:16:08Z
translate from https://stackoverflow.com:/questions/12330086/how-to-loop-through-selected-elements-with-document-queryselectorall