Esercizi Navigazione DOM JavaScript

Ecco degli esercizi con soluzione per praticare la navigazione del DOM in JavaScript.

Esercizio 1: Selezionare un Elemento per ID

Selezionare un elemento del DOM utilizzando il suo ID e modificarne il contenuto.

<!DOCTYPE html>
<html>
  <head>
    <title>Selezionare un Elemento per ID</title>
  </head>
  <body>
    <div id="contenuto">Testo originale</div>
    <script>
      const elemento = document.getElementById("contenuto");
      elemento.textContent = "Testo modificato";
    </script>
  </body>
</html>

Esercizio 2: Selezionare Elementi per Classe

Selezionare tutti gli elementi con una determinata classe e cambiarne il colore di sfondo.

<!DOCTYPE html>
<html>
  <head>
    <title>Selezionare Elementi per Classe</title>
  </head>
  <body>
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
    <script>
      const elementi = document.getElementsByClassName("box");
      for (let elemento of elementi) {
        elemento.style.backgroundColor = "yellow";
      }
    </script>
  </body>
</html>

Esercizio 3: Selezionare Elementi per Tag

Selezionare tutti gli elementi di un determinato tag e modificarne il testo.

<!DOCTYPE html>
<html>
  <head>
    <title>Selezionare Elementi per Tag</title>
  </head>
  <body>
    <p>Paragrafo 1</p>
    <p>Paragrafo 2</p>
    <p>Paragrafo 3</p>
    <script>
      const paragrafi = document.getElementsByTagName("p");
      for (let paragrafo of paragrafi) {
        paragrafo.textContent = "Testo modificato";
      }
    </script>
  </body>
</html>

Esercizio 4: Selezionare Elementi con querySelector

Utilizzare `querySelector` per selezionare il primo elemento che corrisponde a un selettore CSS e modificarne il contenuto.

<!DOCTYPE html>
<html>
  <head>
    <title>Selezionare Elementi con querySelector</title>
  </head>
  <body>
    <div class="contenitore">Contenitore 1</div>
    <div class="contenitore">Contenitore 2</div>
    <script>
      const elemento = document.querySelector(".contenitore");
      elemento.textContent = "Primo contenitore modificato";
    </script>
  </body>
</html>

Esercizio 5: Selezionare Elementi con querySelectorAll

Utilizzare `querySelectorAll` per selezionare tutti gli elementi che corrispondono a un selettore CSS e modificarne lo stile.

<!DOCTYPE html>
<html>
  <head>
    <title>Selezionare Elementi con querySelectorAll</title>
  </head>
  <body>
    <div class="contenitore">Contenitore 1</div>
    <div class="contenitore">Contenitore 2</div>
    <script>
      const elementi = document.querySelectorAll(".contenitore");
      elementi.forEach((elemento) => {
        elemento.style.color = "red";
      });
    </script>
  </body>
</html>

Esercizio 6: Navigare tra i Figli

Selezionare un elemento del DOM e navigare tra i suoi figli per modificarne il contenuto.

<!DOCTYPE html>
<html>
  <head>
    <title>Navigare tra i Figli</title>
  </head>
  <body>
    <div id="contenitore">
      <p>Figlio 1</p>
      <p>Figlio 2</p>
    </div>
    <script>
      const contenitore = document.getElementById("contenitore");
      const figli = contenitore.children;
      for (let figlio of figli) {
        figlio.textContent = "Contenuto modificato";
      }
    </script>
  </body>
</html>

Esercizio 7: Navigare tra i Genitori

Selezionare un elemento del DOM e navigare fino al suo genitore per modificarne lo stile.

<!DOCTYPE html>
<html>
  <head>
    <title>Navigare tra i Genitori</title>
  </head>
  <body>
    <div id="genitore">
      <p id="figlio">Figlio</p>
    </div>
    <script>
      const figlio = document.getElementById("figlio");
      const genitore = figlio.parentElement;
      genitore.style.border = "2px solid blue";
    </script>
  </body>
</html>

Esercizio 8: Selezionare il Primo e l’Ultimo Elemento Figlio

Selezionare il primo e l'ultimo elemento figlio di un contenitore e modificarne il contenuto.

<!DOCTYPE html>
<html>
  <head>
    <title>Selezionare il Primo e l'Ultimo Elemento Figlio</title>
  </head>
  <body>
    <div id="contenitore">
      <p>Primo figlio</p>
      <p>Secondo figlio</p>
      <p>Terzo figlio</p>
    </div>
    <script>
      const contenitore = document.getElementById("contenitore");
      const primoFiglio = contenitore.firstElementChild;
      const ultimoFiglio = contenitore.lastElementChild;

      primoFiglio.textContent = "Primo figlio modificato";
      ultimoFiglio.textContent = "Ultimo figlio modificato";
    </script>
  </body>
</html>

Esercizio 9: Navigare tra i Fratelli

Selezionare un elemento del DOM e navigare tra i suoi fratelli per modificarne lo stile.

<!DOCTYPE html>
<html>
  <head>
    <title>Navigare tra i Fratelli</title>
  </head>
  <body>
    <div>
      <p id="target">Fratello target</p>
      <p>Fratello successivo</p>
    </div>
    <script>
      const target = document.getElementById("target");
      const fratelloSuccessivo = target.nextElementSibling;

      fratelloSuccessivo.style.fontWeight = "bold";
    </script>
  </body>
</html>

Esercizio 10: Aggiungere e Rimuovere Classi

Selezionare un elemento del DOM e aggiungere o rimuovere una classe CSS.

<!DOCTYPE html>
<html>
  <head>
    <title>Aggiungere e Rimuovere Classi</title>
    <style>
      .evidenziato {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <p id="testo">Testo da evidenziare</p>
    <button onclick="evidenzia()">Evidenzia</button>
    <button onclick="rimuoviEvidenziazione()">Rimuovi Evidenziazione</button>

    <script>
      function evidenzia() {
        const testo = document.getElementById("testo");
        testo.classList.add("evidenziato");
      }

      function rimuoviEvidenziazione() {
        const testo = document.getElementById("testo");
        testo.classList.remove("evidenziato");
      }
    </script>
  </body>
</html>