Iterare e manipolare

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

Facciamo una sfida!

Sfida

Facile

Ti viene fornito del codice HTML che contiene cinque paragrafi con il nome della classe item.

Usando solo JavaScript, modifica il testo dei paragrafi in modo che formino un elenco numerato.

Ecco il risultato atteso:

Non dimenticare di aggiornare la pagina web per vedere le modifiche apportate da JS!

Provalo tu

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <p class="item">Banana</p>
        <p class="item">Apple</p>
        <p class="item">Pear</p>
        <p class="item">Water</p>
        <p class="item">Milk</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 elemento getElementsByClassNameIterare e manipolaregetElementsByTagName querySelector

3Metodi DOM II

querySelectorAll addEventListener innerHTML createElement e appendChild Attivazione/disattivazione con classList

Esercitati da solo: Playground Web