Selector CSS global
En esta aplicación se quiere seleccionar todos los encabezados h2 y h3, para despues cambiarles a color rojo al pulsar un botón.
Crea una página con varios encabezados entre ellos algunos h2 y h3
Pon un botón para hacer el cambio de color al pulsar.
Solución
<body onload="init()">
<h1>Ejercicio</h1>
<h2>Seleccionar Elementos</h2>
<h3>Uso de CSS</h3>
<h1>Aplicaciones</h1>
<h2>Uso de Javascript</h2>
<h2>Otros lenguajes</h2>
<p></p>
<p><button id="btn">Colorear h2, h3</button></p>
</body>
<script>
function colorear(){
var cabs = document.querySelectorAll("h2, h3");
cabs.forEach(function(v){v.style.color = "red"});
}
function init(){
var boton = document.getElementById("btn");
boton.addEventListener('click', colorear);
}
</script>
Explicación
En este ejemplos se usa el método querySelectorAll(css) para localizar todos los elementos seleccionados con el selector css del argumento.
El método devuelve un NodeList, una lista al estilo de los array, pero no es un array sino una lista de nodos. Entre sus métodos está forEach() que premite recorrer el objeto. También puedes acceder a cualquier item de la lista por su índice.
Un objeto NodeList puede convertirse en un array con el método estático Array.from(nodelist), útil si necesitas un array para el programa.
En general este argumento admite como argumento todos los selectores usados en CSS, incluyento combinaciones 'p .code' se refiere al elemento con class code dentro del párrafo.
En el ejemplo al poner querySelectorAll("h2, h3") se seleccionan todos los h2 y todos los h3.
El resto del script es simple al pulsar el botón se produce un evento onclick que invoca a la función colorear(). En esta función se obtiene la lista de nodos, luego se recorre con un forEach() (método similar al usado con arrays) que para cada elemento de la lista le pone un color de texto rojo mediante style.color