getElementsByClassName

Lección 5 de 13 del curso Métodos del DOM de JavaScript de Coddy.

La función getElementsByClassName() devuelve un array de todos los elementos con un atributo de clase coincidente, lo cual es útil para seleccionar múltiples elementos que comparten el mismo estilo o comportamiento. Por ejemplo:

const elements = document.getElementsByClassName("className");

Lo anterior recupera los elementos con una clase de className y los guarda en una variable llamada elements.

Tenemos que iterar sobre esta variable para cambiar las propiedades de todos los elementos similares, por ejemplo:

for (const element of elements) {
	className.style.color = "blue";
	className.style.fontWeight = "bolder";
}

Desafío

Fácil

Se te proporciona un código HTML que contiene párrafos con un nombre de clase highlight.

Utilizando solo JavaScript, cambia el color y el grosor de la fuente del texto:

Recupera los elementos utilizando la función getElementsByClassName().
Itera sobre esta variable de elementos recuperados utilizando un bucle for.
Modifica el color a “orange” y el fontWeight a “bold” utilizando la propiedad style, para cada elemento en el array.

Necesitarás refrescar la página web para ver los cambios:

Pruébalo tú mismo

<!DOCTYPE html>
<html>
    <body>
        <p class="highlight">Text 1</p>
        <p class="highlight">Text 2</p>
        <script src="script.js"></script>
    </body>
</html>

Todas las lecciones de Métodos del DOM de JavaScript

1Introducción

Introducción Document Object Model

2Métodos del DOM I

getElementById Modificar el estilo del elementogetElementsByClassNameRecorrer y manipular getElementsByTagName querySelector

3Métodos del DOM II

querySelectorAll addEventListener innerHTML createElement y appendChild classList toggle