Seleccionar por tags

indice de ejemplos
En este ejemplo se trta de encontrar todos los elementos cabecera de tipo h3, y se les cambiará el color: el primero se deja en rojo, el segundo en azúl y el tercero en naranja. La acción se dispara mediante un botón.

Solución

<body>

<h2>El cultivo de los rosales</h2>

<p>Texto sobre las rosas</p>

<h2>Cultivo de claveles </h2>

<p>Texto sobre los claveles</p>

<h2>Cultivo de orquideas</h2>

<p>Texto sobre orquideas</p>

<button id="accion">Colorear</button>

<script>

function colorear(){

   let cabs = document.getElementsByTagName("h2");

   cabs[0].style.color = "red";

   cabs[1].style.color = "blue";

   cabs[2].style.color = "orange";

}

let btn = document.getElementById("accion")

btn.addEventListener("click",colorear)

</script>

</body>

Explicación

La página posee tres cabeceras tipo h2. El método de document getElementsByTagName(tag) permite obtener una colección HTML con los objetos de la página con el tipo indicado en el argumento.

En este caso las cabeceras de tipo h2 forman la lista de nodos, que no es un objeto array sino una lista cuyos items pueden leerse por su numero de índice y posee la propiedad length.

En el script simplemente se asigna el evento onclick para que ejecute la función colorear(), en ella se obtiene la lista de nodos en el orden en que aparecen en la página.

Luego cambia el estilo de cada nodo para modificar el color de texto de las cabeceras