getElementsByClassName

Lezione 5 di 13 del corso Metodi DOM di JavaScript di Coddy.

La funzione getElementsByClassName() restituisce un array di tutti gli elementi con un attributo class corrispondente, utile per selezionare più elementi che condividono lo stesso stile o comportamento. Per esempio:

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

Quanto sopra recupera gli elementi con una classe className e li salva in una variabile chiamata elements.

Dobbiamo scorrere questa variabile per modificare le proprietà di tutti gli elementi simili, per esempio:

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

Sfida

Facile

Ti viene fornito del codice HTML che contiene paragrafi con il nome di classe highlight.

Usando solo JavaScript, modifica il colore e lo spessore del carattere del testo:

Recupera gli elementi usando la funzione getElementsByClassName().
Itera sulla variabile degli elementi recuperati usando un ciclo for.
Modifica il color in “orange” e fontWeight in “bold” usando la proprietà style, per ogni elemento dell'array.

Dovrai aggiornare la pagina web per vedere le modifiche:

Provalo tu

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

Tutte le lezioni di Metodi DOM di JavaScript

1Introduzione

Introduzione Document Object Model

2Metodi DOM I

getElementById Modificare lo stile di un elementogetElementsByClassNameIterare e manipolare getElementsByTagName querySelector

3Metodi DOM II

querySelectorAll addEventListener innerHTML createElement e appendChild Attivazione/disattivazione con classList

Esercitati da solo: Playground Web