querySelectorAll: manipulación de nodos

Question

Por lo que he entendido, querySelector devuelve un elemento real cambiable, mientras que querySelectorAll devuelve un conjunto de nodos estáticos no vivos.

Quiero ajustar el estilo de todos los elementos que se ajustan a un selector específico. Funciona bien para el primer elemento con querySelector, pero no para todos los elementos coincidentes con querySelectorAll. Supongo que es porque el conjunto de nodos no es en vivo.

¿Hay una solución? ¿O me estoy perdiendo algo?

Answer 1

El problema es que querySelector devuelve un solo nodo. querySelectorAll devuelve un conjunto de nodos (la vida útil significa que los elementos en el conjunto no se eliminarán si los actualizas). Necesita establecer un estilo en cada uno de los elementos combinados, probablemente con un bucle; no puede establecer una propiedad para todos ellos.

Por lo tanto, es probable que tenga que hacer algo como esto:

var nodes = document.querySelectorAll('div.foo'); 
for (var i = 0; i < nodes.length; i++) { 
    nodes[i].style.color = 'blue'; 
} 

Answer 2

Esto también funciona ..

[].forEach.call(document.querySelectorAll('div.foo'), function (el) { 
    el.style.color = 'blue'; 
}); 

Answer 3

Como se describe en querySelectorAll: manipulating nodes pero con una manera de hacer que funcione, ya que forEach solo funciona en Arrays, no en NodeLists:

Array.prototype.slice.call(document.querySelectorAll('div.foo')).forEach(function(el) { 
    el.style.color = 'blue'; 
});