JavaScript - Navigazione DOM

Ciao a tutti, futuri maghi di JavaScript! ? Siete pronti a intraprendere un viaggio emozionante attraverso il magico mondo della navigazione del DOM? Come il vostro amico insegnante di scienze informatiche del quartiere, sono entusiasta di guidarvi in questa avventura. Allora, afferrate il vostro compasso virtuale e iniziamo l'esplorazione!

JavaScript - DOM Navigation

Cos'è un Nodo DOM?

Immaginate il DOM (Document Object Model) come un albero genealogico della vostra pagina web. Ogni elemento in questo albero è chiamato nodo. Proprio come in una vera famiglia, questi nodi hanno relazioni tra di loro - genitori, figli e fratelli. Cool, vero?

Guardiamo un esempio semplice:

<html>
<head>
<title>La Mia Pagina Awesome</title>
</head>
<body>
<h1>Benvenuti!</h1>
<p>Questo è un paragrafo.</p>
</body>
</html>

In questa "famiglia", l'elemento <html> è il bisnonno, <head> e <body> sono i suoi figli e così via. Ogniuno di questi elementi è un nodo nel nostro albero DOM.

Relazioni tra Nodi DOM

Ora che capiamo cosa sono i nodi, esploriamo come sono collegati. Nel nostro albero genealogico DOM:

I nodi genitore hanno figli
I figli hanno genitori
I fratelli sono nodi con lo stesso genitore

Per esempio, nel nostro HTML precedente:

<html> è il genitore di <head> e <body>
<head> e <body> sono fratelli
<h1> e <p> sono figli di <body>

Navigazione tra Nodi Utilizzando JavaScript

È giunto il momento di indossare i nostri cappelli da esploratore! ? JavaScript ci offre alcuni strumenti utili per navigare tra questi nodi. Immergiamoci!

Accesso al Primo Elemento Figlio

Per ottenere il primo figlio di un elemento, utilizziamo la proprietà firstElementChild. Ecco come:

let body = document.body;
let firstChild = body.firstElementChild;
console.log(firstChild.tagName); // Output: H1

In questo esempio, stiamo trovando il primo figlio del tag <body>, che è il nostro elemento <h1>.

Accesso all'Ultimo Elemento Figlio

Similmente, possiamo trovare l'ultimo figlio utilizzando lastElementChild:

let body = document.body;
let lastChild = body.lastElementChild;
console.log(lastChild.tagName); // Output: P

Qui, stiamo obtaining l'ultimo figlio del <body>, che è il nostro elemento <p>.

Accesso a Tutti i Figli di un Elemento HTML

Vuoi vedere tutti i figli? Usa children:

let body = document.body;
let allChildren = body.children;
for(let child of allChildren) {
console.log(child.tagName);
}
// Output:
// H1
// P

Questo codice scorre attraverso tutti i figli del <body> e registra i loro nomi di tag.

Accesso al Nodo Genitore di un Elemento HTML

Per trovare il nodo genitore, utilizziamo parentNode:

let heading = document.querySelector('h1');
let parent = heading.parentNode;
console.log(parent.tagName); // Output: BODY

Qui, stiamo trovando il genitore del nostro elemento <h1>, che è <body>.

Accesso al Nodo Fratello Successivo

Per trovare il fratello successivo, usa nextElementSibling:

let heading = document.querySelector('h1');
let nextSibling = heading.nextElementSibling;
console.log(nextSibling.tagName); // Output: P

Questo codice trova il fratello che segue il nostro <h1>, che è l'elemento <p>.

Accesso al Nodo Fratello Precedente

E per il fratello precedente, usa previousElementSibling:

let paragraph = document.querySelector('p');
let prevSibling = paragraph.previousElementSibling;
console.log(prevSibling.tagName); // Output: H1

Qui, stiamo trovando il fratello prima del nostro <p>, che è l'elemento <h1>.

Nodi Radice del DOM

Ogni albero genealogico ha le sue radici, e nel DOM abbiamo tre principali:

document.documentElement - L'elemento radice (solitamente <html>)
document.head - L'elemento <head>
document.body - L'elemento <body>

console.log(document.documentElement.tagName); // Output: HTML
console.log(document.head.tagName); // Output: HEAD
console.log(document.body.tagName); // Output: BODY

Proprietà nodeName del DOM

Ogni nodo ha un nome, che possiamo accedere utilizzando la proprietà nodeName:

let heading = document.querySelector('h1');
console.log(heading.nodeName); // Output: H1

Proprietà nodeValue del DOM

La proprietà nodeValue ci dà il valore di un nodo. Per i nodi di testo, questo è il contenuto del testo:

let heading = document.querySelector('h1');
let textNode = heading.firstChild;
console.log(textNode.nodeValue); // Output: Benvenuti!

Tipi di Nodo nel DOM

Non tutti i nodi sono uguali! Ci sono diversi tipi di nodi nel DOM. Ecco i principali:

Tipo di Nodo	Descrizione	Valore nodeType
Nodo Elemento	Qualsiasi elemento HTML (come `<p>`, `<div>`, ecc.)	1
Nodo Attributo	Un attributo di un elemento HTML	2
Nodo Testo	Il testo all'interno di un elemento HTML	3
Nodo Commento	Un commento HTML	8
Nodo Documento	L'intero documento	9

Proprietà nodeType del DOM

Possiamo utilizzare la proprietà nodeType per determinare che tipo di nodo stiamo affrontando:

let element = document.querySelector('h1');
let textNode = element.firstChild;
let commentNode = document.createComment('Questo è un commento');

console.log(element.nodeType); // Output: 1 (Nodo Elemento)
console.log(textNode.nodeType); // Output: 3 (Nodo Testo)
console.log(commentNode.nodeType); // Output: 8 (Nodo Commento)

Ecco fatto, gente! Avete appena navigato attraverso il DOM come dei professionisti. Ricordate, la pratica rende perfetti, quindi non avete paura di sperimentare con questi concetti. Prima di sapere, traverserete l'albero DOM più veloci di una scoiattola in una fabbrica di noci! ?️

Buon codice, e possa il DOM essere con voi! ?

Credits: Image by storyset

Tutorial precedente:

JavaScript - Animazione DOM

Prossimo tutorial:

JavaScript - Raccolte DOM