Loop Over querySelectorAll Matches

0
0

You can loop over Arrays easily in JavaScript with forEach, but unfortunately, it’s not that simple with the results of a querySelectorAll.

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

That’s because what you get back from querySelectorAll isn’t an array, it’s a (non-live) NodeList, and not all browsers support forEach on NodeList’s

Here’s a quick way to iterate over all the found elements:

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

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

Fair warning, Todd Motto explains why this method is a rather hacky, detailing over 10 problems with it.


You could also use a classic for loop:

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

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

Todd’s suggestion is to make your own method:

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

There are also for..of loops, but…

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

var divs = document.querySelectorAll('div );

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

This is pretty intense (probably dangerous and not recommended) but you could make NodeList have the same forEach function as Array does, then use it.

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

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

There is a bit more information in the MDN article.

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.