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

El fragmento HTML de la página web podría ser algo así. Completa el resto de la página con head y las etiquetas restantes.

<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>

El script sería este que puedes colocar al final del 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. 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 conertirse en un array con el método est´taico 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 lsita le pone un color de texto rojo mediante style.color