As far as I have understood, querySelector
returns a real changeable element while querySelectorAll
returns a non-live Static Node Set.
I want to adjust the style of all elements fitting to a specific selector. It works fine for the first element with querySelector
, but not for all matching elements with querySelectorAll
. I guess that's because the node set is non-live.
Is there a workaround? Or am I missing something?
The problem is that querySelector
returns a single node. querySelectorAll
returns a set of nodes (the live-ness means the elements in the set won't be removed if you update them). You need to set a style on each of the elements matched, probably with a loop -- you can't just set a property once for all of them.
So, you probably need to do something like this:
var nodes = document.querySelectorAll('div.foo');
for (var i = 0; i < nodes.length; i++) {
nodes[i].style.color = 'blue';
}
this will also work..
[].forEach.call(document.querySelectorAll('div.foo'), function (el) {
el.style.color = 'blue';
});
As described in querySelectorAll: manipulating nodes but with a way to make it work, since forEach
only works on Arrays, not on NodeLists:
Array.prototype.slice.call(document.querySelectorAll('div.foo')).forEach(function(el) {
el.style.color = 'blue';
});