logo Dove iniziare Linguaggi Aiuto Blog
Home Dove iniziare Linguaggi Aiuto e Supporto Info e Blog

Medodi di accesso al DOM

Nella lezione precedente, abbiamo visto che cos'è il DOM e a cosa serve. JavaScript permette di lavorare e modificare il DOM con diversi metodi. In questa lezione, vediamo quali sono i metodi di accesso al DOM utilizzando JavaScript.

Schema dei metodi del DOM

Per prima cosa, vediamo qual è lo schema base da utilizzare quando dobbiamo lavorare con il DOM.

<html>
  <body>
  
    <p id="testo">Questo testo diventa rosso</p>

    <script>
    document.getElementById("testo").style.color = "red";
    </script>

  </body>
</html>

Nell'esempio, lo script è utilizzato per modificare il colore del testo in rosso.

Viene utilizzato getElementById, che è il metodo, e style.color, che è la proprietà. Si utilizza document perché si sta lavorando nel documento HTML. Tutte le istruzioni JavaScript per il DOM saranno strutturate in questo modo.

Metodi di accesso al DOM

MetodoDescrizione
getElementById() Trova un elemento tramite il suo id.
getElementsByClassName() Trova tutti gli elementi tramite la loro classe (attributo class).
getElementsByName() Trova tutti gli elementi tramite la loro nome (attributo name).
getElementsByTagName() Trova tutti gli elementi con un tag specifico.
querySelector() Trova il primo elemento con un selettore specifico.
querySelectorAll() Trova tutti gli elementi con un selettore specifico.

Vediamo in dettaglio questi metodi.

Il metodo getElementById()

Il metodo getElementById() trova l'elemento che ha l'id specificato. 

La sintassi è: document.getElementById(id).

<html>
  <body>
  
    <p id="testo">Questo testo diventa rosso</p>

    <script>
    const testo = document.getElementById("testo");
    </script>

  </body>
</html>

Il metodo getElementsByClassName()

Il metodo getElementsByClassName() permette di trovare gli elementi che hanno una classe specificata (ovvero il valore dell'attributo class).

La sintassi è: document.getElementsByClassName(classe).

Questo metodo restituisce un array di elementi che hanno la classe specificata.

<html>
  <body>
  
    <p class="testo">Questo testo diventa rosso</p>

    <script>
    const testo = document.getElementsByClassName("testo");
    </script>

  </body>
</html>

Per modificare un solo elemento (ad esempio il primo), bisogna utilizzare:

<html>
  <body>
  
    <p class="testo">Questo testo diventa rosso</p>

    <script>
    const testo = document.getElementsByClassName("testo");
    testo[0].style.color = "red";
    </script>

  </body>
</html>

Se hai più elementi che hanno la stessa classe, e vuoi modificarli tutti, puoi utilizzare un ciclo di for.

<html>
  <body>
  
    <p class="testo">Sto facendo diventare</p>
    <p class="testo">rosso questo testo</p>
    <p class="testo">attraverso JavaScript.</p>

    <script>
    const testo = document.getElementsByClassName("testo");

    for(i = 0; i < testo.length; i++) {
      testo[i].style.color = "red";
    }
    </script>

  </body>
</html>

Il metodo getElementsByName()

Il metodo getElementsByName() trova tutti gli elementi che hanno un nome specificato (ovvero il valore dell'attributo name).

La sintassi è: document.getElementsByName(nome).

Anche questo metodo restituisce un array di elementi che hanno lo stesso nome specificato.

<html>
  <body>
  
    <p name="testo">Questo testo diventa rosso</p>

    <script>
    const testo = document.getElementsByName("testo");
    testo[0].style.color = "red";
    </script>

  </body>
</html>

Se vuoi modificare tutti gli elementi con il valore name specificato, puoi utilizzare un ciclo di for.

<html>
  <body>
  
    <p name="testo">Sto facendo diventare</p>
    <p name="testo">rosso questo testo</p>
    <p name="testo">attraverso JavaScript.</p>

    <script>
    const testo = document.getElementsByName("testo");
    for(i = 0; i < testo.length; i++) {
      testo[i].style.color = "red";
    }
    </script>

  </body>
</html>

Il metodo getElementsByTagName()

Il metodo getElementsByTagName() permette di trovare tutti gli elementi che hanno un determinato tag.

La sintassi è: document.getElementsByTagName(tag).

Questo metodo restituisce un array di elementi che hanno lo stesso tag specificato.

<html>
  <body>
  
    <p>Questo testo diventa rosso</p>

    <script>
    const testo = document.getElementsByTagName("p");
    testo[0].style.color = "red";
    </script>

  </body>
</html>

Se vogliamo modificare tutti gli elementi con il tag specificato, utilizziamo un ciclo di for.

<html>
  <body>
  
    <p>Sto facendo diventare</p>
    <p>rosso questo testo</p>
    <p>attraverso JavaScript.</p>

    <script>
    const testo = document.getElementsByTagName("p");
    for(i = 0; i < testo.length; i++) {
      testo[i].style.color = "red";
    }
    </script>

  </body>
</html>

Il metodo querySelector()

Il metodo querySelector() permette di selezionare un elemento HTML utilizzando un selettore CSS.

La sintassi è: document.querySelector(selettore).

<html>
  <body>
  
    <p class="testo">Questo è un testo</p>

    <script>
    const testo = document.querySelector(".testo");
    </script>

  </body>
</html>

È possibile anche inserire il tag all'interno del selettore, così da trovare soltanto un tipo di tag con un tipo di classe CSS.

<html>
  <body>
  
    <p class="testo">Questo è un testo</p>

    <script>
    const testo = document.querySelector("p.testo");
    </script>

  </body>
</html>

Questo metodo restituisce un solo elemento. In caso ce ne siano più di uno, preleva il primo.

<html>
  <body>
  
    <p class="testo">Questo è un testo</p> <!-- Diventa rosso -->
    <p class="testo">Questo è un testo</p> <!-- Rimane nero -->
    <p class="testo">Questo è un testo</p> <!-- Rimane nero -->

    <script>
    const testo = document.querySelector("p.testo");
    testo.style.color = "red";
    </script>

  </body>
</html>

Il metodo querySelectorAll()

Con querySelectorAll(), è possibile ottenere tutti gli elementi HTML corrispondenti a un selettore CSS specificato.

La sintassi è: document.querySelectorAll(selettore). Questo metodo restituisce un array di elementi.

<html>
  <body>
  
    <p class="testo">Questo è un testo rosso</p>
    <p class="testo">Questo è un testo rosso</p>
    <p class="testo">Questo è un testo rosso</p>

    <script>
    const testo = document.querySelectorAll("p.testo");
    for(i = 0; i < testo.length; i++) {
      testo[i].style.color = "red";
    }
    </script>

  </body>
</html>

Prova!Completa gli spazi vuoti con il testo appropriato.
<!-- Modifica il colore del testo -->
<p id="errore">Password errata! Riprova</p>

<script>
const testo = document.("");
testo.style.color = "red";
</script>

Prova!Scegli l'opzione corretta tra quelle elencate.
<!-- Seleziona il primo elemento con JavaScript -->
<p class="testo">Primo element</p>
<p class="testo">Secondo element</p>
<p class="testo">Terzo element</p>

<script>
const primo_elemento = document.____________("p.testo");
</script>