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
| Metodo | Descrizione |
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");
testo.style.color = "red";
</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>