73

我正在尝试循环使用 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 个额外的项目。我怎样才能正确地做到这一点？

4

8 回答 8

50

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
}

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

于 2012-09-08T12:04:00.043 回答
48

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

于 2015-11-29T11:07:31.067 回答
31

看起来 Firefox 50+、Chrome 51+ 和 Safari 10+ 现在都支持对象.forEach功能NodeList。注意——<strong>.forEach在 Internet 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>

于 2017-02-27T19:26:53.130 回答
26

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

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

     // handle "element"

});

Array.fromsincequerySelector提供方法的另一种用法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);
});
于 2016-09-07T18:31:37.200 回答
25

一个不错的选择是：

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

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

于 2013-12-24T11:11:49.077 回答
2

主要内容：

类型很重要。

.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循环”
于 2021-03-16T21:08:18.560 回答
0

能够使用任何常规 Array 方法（或者在您的情况下是 afor in上的循环）的最短和最简洁的方法是NodeList在您获取它时将其传播到一个数组中：

const checkboxes = [...document.querySelectorAll('.check')];

for (i in checkboxes) {
  console.log(checkboxes[i]);
}
于 2021-11-01T16:48:14.753 回答
0

您可以使用方法选择所有元素querySelectorAll。它将返回一个 nodeList 数组。

假设你想选择所有 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)
于 2021-11-12T10:57:17.550 回答