Loop Over querySelectorAll Matches онлайн урок.


Вы можете легко перебрать массивы в JavaScript с помощьюforEach, но, к сожалению, это не так просто с результатамиquerySelectorAll.

/* Not Reliable */
document.querySelectorAll('.module').forEach(function() {
/* Only works in Blink browsers and Firefox 50+
no Safari or IE/Edge support */

});

Это потому, что то, что вы вернетесь изquerySelectorAll, не является массивом, это (неживой) NodeList, и не все браузеры поддерживаютforEachна NodeList

Вот быстрый способ для итерации по всем найденным элементам:

var divs = document.querySelectorAll('div');

[].forEach.call(divs, function(div) {
// do whatever
div.style.color = "red";
});

Справедливое предупреждение, Тодд Мотто объясняет, почему этот метод довольно хакерский , детализируя более 10 проблем с ним.


Вы также можете использовать классический цикл:

var divs = document.querySelectorAll('div'), i;

for (i = 0; i < divs.length; ++i) {
divs[i].style.color = "green";
}

Предложение Тодда состоит в том, чтобы сделать свой собственный метод:

// forEach method, could be shipped as part of an Object Literal/Module
var forEach = function (array, callback, scope) {
for (var i = 0; i < array.length; i++) {
callback.call(scope, i, array[i]); // passes back stuff we need
}
};

// Usage:
// optionally change the scope as final parameter too, like ECMA5
var myNodeList = document.querySelectorAll('li');
forEach(myNodeList, function (index, value) {
console.log(index, value); // passes index + value back!
});

Есть также и для... циклов, но...

/* Be warned, this only works in Firefox */

var divs = document.querySelectorAll('div );

for (var div of divs) {
div.style.color = "blue";
}

Это довольно интенсивно (возможно, опасно и не рекомендуется), но вы можете make NodeList иметь ту же самую функцию forEach, что и Array, а затем использовать ее.

NodeList.prototype.forEach = Array.prototype.forEach;

var divs = document.querySelectorAll('div').forEach(function(el) {
el.style.color = "orange";
})

В статье MDN содержится немного больше информации.