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 operator将其转换为数组，然后使用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+现在都支持<!DOCTYPE html> <html ng-app="myStore"> <head> <title>Gem Store App</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="css/main.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-resource.js"></script> <script type="text/javascript" src="modules/reviews.js"></script> <script type="text/javascript" src="app.js"></script> <script type="text/javascript" src="controllers/myStoreController.js"></script> <script type="text/javascript" src="controllers/myPanelController.js"></script> <script type="text/javascript" src="controllers/myReviewsController.js"></script> </head> <body> <div class="container"> <div ng-controller="myStoreController" class="row"> <div ng-repeat="product in gems" class="col-md-4"> <div class="panel-heading"> <h1>{{product.name }}</h1> </div> <div class="panel-body"> <div> <img ng-repeat="image in product.images track by $index" ng-src='{{image.full}}'/> </div> <h2 >{{product.price | currency}}</h2> <button ng-show="product.canPurchase" class="btn btn-success">Add to Cart</button> </div> <section ng-init="tab = 1" ng-controller="myPanelController"> <ul class="nav nav-pills"> <li ng-class="{ active:isSelected(1) }"><a ng-click="selectTab(1)">Description</a></li> <li ng-class="{ active:isSelected(2) }"><a ng-click="selectTab(2)">Specifications</a></li> <li ng-class="{ active: isSelected(3) }"><a ng-click="selectTab(3)">Reviews</a></li> </ul> <div class="panel" ng-show = "isSelected(1)"> <h4>Description</h4> <blockquote>{{product.description}}</blockquote> </div> <div class="panel" ng-show = "isSelected(2)"> <h4>Specifications</h4> <blockquote>Nothing yet</blockquote> </div> <div ng-app="storeReviews"> <div class="panel" ng-show="isSelected(3)" reviews ng-controller="myReviewsController"> </div> </div> </section> </div> </div> </div> </body> </html>对象的.forEach功能。注意 - Internet Explorer 不支持 NodeList，因此，如果需要IE支持，请考虑上述方法之一或使用polyfill。

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

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

Answer 6

主要要点：

类型很重要。

.map 不能直接在 NodeList 上工作，但可以在 Array 上工作。

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

选项：

ES6 可用吗？

价差运算符 [...element_list] 然后 Array.map()
Array.from() 在 NodeList.forEach() 上

ES6 不可用？

NodeList.forEach()
“for 循环”

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

6 个答案:

主要要点：

类型很重要。

选项：

ES6 可用吗？

ES6 不可用？