Nella lezione precedente, abbiamo visto quali sono i metodi fondamentali per trovare gli elementi nella pagina HTML. In questa lezione, vedremo alcuni metodi che ci consentono di navigare del DOM, tra gli elementi HTML.
Lista dei metodi
| Metodo | Descrizione |
parentNode | Ottiene l'elemento genitore di un nodo specificato. |
firstChild | Ottiene il primo nodo figlio di un elemento. |
lastChild | Ottiene l'ultimo nodo figlio di un elemento. |
children | Restituisce una HTMLCollection con tutti gli elementi figli diretti di un elemento. |
firstElementChild | Ottiene il primo elemento figlio di un elemento. |
lastElementChild | Ottiene l'ultimo elemento figlio di un elemento. |
nextSibling | Ottiene il nodo fratello successivo di un nodo specificato. |
previousSibling | Ottiene il nodo fratello precedente di un nodo specificato. |
parentElement | Ottiene l'elemento genitore di un nodo specificato. |
Esempio di una pagina HTML
Prima di addentrarci tra i metodi di navigazione del DOM, prendiamo come esempio una pagina HTML, che utilizzeremo per spiegare i vari metodi.
<html>
<body>
<div id="genitore">
<p id="figlio1">Questo è il primo paragrafo</p>
<p id="figlio2">Questo è il secondo paragrafo</p>
<p id="figlio3">Questo è il terzo paragrafo</p>
</div>
</body>
</html>
In questo esempio, possiamo definire "genitore" il <div> e "figli" i tag <p>, perché si trovano all'interno. I <p> possiamo definirli "fratelli", perché sono nello stesso livello. Se vuoi approfondire, puoi dare un'occhiata alla lezione Il DOM di HTML e JavaScript.
I metodi di navigazione
Tutti i metodi che vedremo oggi hanno la sintassi elemento.metodo. Ad esempio: figlio.parentNode. Vediamo ora i metodi di navigazione del DOM.
Il metodo parentNode
Il metodo parentNode ci permette di accedere all'elemento genitore di un elemento specificato all'interno del DOM.
const figlio = document.getElementById("figlio1");
const genitore = figlio.parentNode;
// Risultato: <div id="genitore">Il metodo firstChild
Con il metodo firstChild, possiamo ottenere il primo figlio di un elemento.
const genitore = document.getElementById("genitore");
const primo_figlio = genitore.firstChild;
// Risultato: <p id="figlio1">Il metodo lastChild
Il metodo lastChild ci consente di ottenere l'ultimo nodo figlio di un elemento specificato.
const genitore = document.getElementById("genitore");
const primo_figlio = genitore.lastChild;
// Risultato: <p id="figlio3">Il metodo children
Il metodo children ci fornisce una lista DOM che contenente tutti gli elementi figli diretti di un elemento specificato.
const genitore = document.getElementById("genitore");
const figli_diretti = genitore.children;
// Risultato: <p id="figlio1">, <p id="figlio2">, <p id="figlio3">Il metodo firstElementChild
Con firstElementChild, possiamo ottenere il primo elemento figlio di un elemento specificato.
const genitore = document.getElementById("genitore");
const primo_figlio = genitore.firstElementChild;
// Risultato: <p id="figlio1">Il metodo lastElementChild
Il metodo lastElementChild ci consente di ottenere l'ultimo elemento figlio di un elemento specificato.
const genitore = document.getElementById("genitore");
const ultimo_figlio = genitore.lastElementChild;
// Risultato: <p id="figlio3">Il metodo nextSibling
Il metodo nextSibling ci permette di ottenere il nodo fratello successivo di un nodo specificato.
const nodo = document.getElementById("figlio1");
const nodo_successivo = nodo.nextSibling;
// Risultato: <p id="figlio2">Il metodo previousSibling
Con previousSibling, possiamo accedere al nodo fratello precedente di un nodo specificato.
const secondo_nodo = document.getElementById("figlio2");
const nodo_precedente = nodo.previousSibling;
// Risultato: <p id="figlio1">Il metodo parentElement
Il metodo parentElement restituisce l'elemento genitore di un nodo specificato.
const figlio = document.getElementById("figlio1");
const genitore = figlio.parentElement;
// Risultato: <div id="genitore">Qual è la differenza tra nodo ed elemento?
Un nodo è un termine generico che rappresenta qualsiasi elemento all'interno del DOM, e può essere di diversi tipi, tra cui elementi HTML, attributi, testo, commenti, e così via. In altre parole, ogni componente del DOM è considerato un nodo.
Un elemento, invece, è un particolare nodo, ovvero un elemento HTML all'interno del DOM. Gli elementi sono gli oggetti che costituiscono la struttura di una pagina web, come ad esempio <div>, <p>, <h1>, e così via.
console.log() con un metodo che restituisce un nodo (come ad esempio firstChild) e controlla all'interno della console del browser.