La proprietà nodeType in Javascript

La proprietà nodeType è una proprietà che mi restituisce il tipo di un nodo.

nodetype

Ogni nodo ha un tipo che determina quali operazioni possono essere effettuate.

Ci sono diversi tipi di nodi, ma i più comuni sono:

Element Node (tipo 1)
Rappresenta gli elementi HTML, come <div>, <p>, <a> ecc.
Text Node (tipo 3)
Rappresenta il testo all'interno degli elementi. Per esempio, il contenuto testuale di un paragrafo <p>.
Comment Node (tipo 8)
Rappresenta i commenti nel codice HTML.

Questa proprietà è fondamentale quando lavoro con il Document Object Model (DOM) nel web development.

Cos'è il DOM? Il DOM è essenzialmente la struttura ad albero che rappresenta una pagina web nel browser. Ogni elemento della pagina, come un paragrafo, un'immagine o anche un semplice testo, è un nodo in questo albero.

Ecco un esempio pratico di utilizzo.

Considero questo documento HTML

<html>
<body>
<p>Questo è un paragrafo. <span>Questo è un testo all'interno di uno span.</span></p>
<script>
let paragrafo = document.querySelector("p");
document.write(paragrafo.nodeType);
let testo = paragrafo.firstChild;
document.write(testo.nodeType);
let commento = paragrafo.previousSibling;
document.write(commento.nodeType);
</script>
</body>
</html>

Il tag <p> è un Element Node, il testo "Questo è un paragrafo." è un Text Node, mentre il commento iniziale è un Comment Node.

Lo script seleziona il primo tag <p> tramite document.querySelector("p") e lo salva nella variabile paragrafo.

Poi, utilizza la proprietà nodeType per restituire il tipo di nodo.

In questo caso stampa 1, perché il tag <p> è un Element Node

Poi utilizza firstChild per individuare il primo nodo figlio all'interno del nodo corrente ovvero del paragrafo <p>, estrae il tipo di nodo e lo stampa.

Ora stampa 3, perché il nodo figlio "Questo è un paragrafo." è un nodo di testo (Text Node)

Infine, lo script individua il nodo precedente al nodo corrente (<p>) tramite previousSibling che, in questo caso, è un commento.

Quindi, la proprietà nodeType restituisce il tipo 8.

A cosa serve conoscere il tipo di nodo?

E' particolarmente utile quando manipolo il DOM.

Ad esempio, potrei voler attraversare il documento per fare qualcosa solo con i nodi di tipo testo, ignorando i nodi di tipo elemento e i commenti. Conoscere il nodeType mi permette di identificare i nodi di testo e agire solo su di essi.

Ecco un esempio di codice che fa proprio questo:

<html>
<body>
Questo è un testo
<p>Questo è il paragrafo 1 <span>Questo è uno span</span></p>
<p>Questo è il paragrafo 2</p>
<p>Questo è il paragrafo 3</p>
<script>
let paragrafi = document.querySelectorAll("p");
paragrafi.forEach(p => {
p.childNodes.forEach(nodo => {
// Se è un Text Node cambia il contenuto
if (nodo.nodeType === 3) {
nodo.textContent = "Testo aggiornato";
}
});
});
</script>
</body>
</html>

Questo codice seleziona tutti i paragrafi con document.querySelectorAll("p"), poi itera su ogni nodo figlio (childNodes) di ogni paragrafo.

Se il nodo figlio è un nodo di testo (tipo 3) aggiorna il suo contenuto.

Pertanto, il risultato finale visualizzato sullo schermo del browser è il seguente:

Questo è un testo
Testo aggiornatoQuesto è uno span
Testo aggiornato
Testo aggiornato

Il primo nodo ("Questo è un testo") viene stampato tale e quale perché non non è un paragrafo <p>. Quindi, non viene selezionato.

Nel primo paragrafo <p> viene sostituito solo il nodo figlio di tipo testo ("Questo è il paragrafo 1") ma non il nodo figlio <span> perché quest'ultimo ha il nodeType di tipo Element (tipo 1).

E via dicendo.