JavaScript HTML DOM Navigazione
Con il DOM HTML, puoi navigare nell'albero dei nodi usando le relazioni dei nodi.
Nodi DOM
Secondo lo standard W3C HTML DOM, tutto in un documento HTML è un nodo:
- L'intero documento è un nodo del documento
- Ogni elemento HTML è un nodo di elemento
- Il testo all'interno degli elementi HTML sono nodi di testo
- Ogni attributo HTML è un nodo di attributo (obsoleto)
- Tutti i commenti sono nodi di commento
Con il DOM HTML, è possibile accedere a tutti i nodi nell'albero dei nodi tramite JavaScript.
È possibile creare nuovi nodi e tutti i nodi possono essere modificati o eliminati.
Relazioni di nodo
I nodi nell'albero dei nodi hanno una relazione gerarchica tra loro.
I termini genitore, figlio e fratello sono usati per descrivere le relazioni.
- In un albero di nodi, il nodo superiore è chiamato radice (o nodo radice)
- Ogni nodo ha esattamente un genitore, eccetto la radice (che non ha genitore)
- Un nodo può avere più figli
- I fratelli (fratelli o sorelle) sono nodi con lo stesso genitore
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
Dall'HTML sopra puoi leggere:
<html>è il nodo radice<html>non ha genitori<html>è il genitore di<head>e<body><head>è il primo figlio di<html><body>è l'ultimo figlio di<html>
e:
<head>ha un figlio:<title><title>ha un figlio (un nodo di testo): "DOM Tutorial"<body>ha due figli:<h1>e<p><h1>ha un figlio: "DOM Lezione uno"<p>ha un figlio: "Ciao mondo!"<h1>e<p>sono fratelli
Navigazione tra i nodi
Puoi utilizzare le seguenti proprietà del nodo per navigare tra i nodi con JavaScript:
parentNodechildNodes[nodenumber]firstChildlastChildnextSiblingpreviousSibling
Nodi figli e valori dei nodi
Un errore comune nell'elaborazione DOM è aspettarsi che un nodo elemento contenga testo.
Esempio:
<title
id="demo">DOM Tutorial</title>
Il nodo dell'elemento
<title>(nell'esempio sopra) non contiene testo.
Contiene un nodo di testo con il valore "DOM Tutorial".
Il valore del nodo di testo è accessibile dalla
innerHTMLproprietà del nodo:
myTitle = document.getElementById("demo").innerHTML;
L'accesso alla proprietà innerHTML equivale all'accesso alla proprietà nodeValue
del primo figlio:
myTitle = document.getElementById("demo").firstChild.nodeValue;
L'accesso al primo figlio può essere fatto anche in questo modo:
myTitle = document.getElementById("demo").childNodes[0].nodeValue;
Tutti i (3) esempi seguenti recuperano il testo di un <h1>elemento e lo copiano in un <p>elemento:
Esempio
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML
= document.getElementById("id01").innerHTML;
</script>
</body>
</html>
Esempio
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>
Esempio
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>
</body>
</html>
HTML interno
In questo tutorial utilizziamo la proprietà innerHTML per recuperare il contenuto di un elemento HTML.
Tuttavia, l'apprendimento degli altri metodi di cui sopra è utile per comprendere la struttura ad albero e la navigazione del DOM.
Nodi radice DOM
Esistono due proprietà speciali che consentono l'accesso al documento completo:
document.body- Il corpo del documentodocument.documentElement- Il documento completo
Esempio
<html>
<body>
<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.body</p>
<p
id="demo"></p>
<script>
document.getElementById("demo").innerHTML
= document.body.innerHTML;
</script>
</body>
</html>
Esempio
<html>
<body>
<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.documentElement</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
document.documentElement.innerHTML;
</script>
</body>
</html>
La proprietà nodeName
La nodeNameproprietà specifica il nome di un nodo.
- nodeName è di sola lettura
- nodeName di un elemento node è uguale al nome del tag
- nodeName di un attributo node è il nome dell'attributo
- nodeName di un nodo di testo è sempre #text
- nodeName del documento node è sempre #document
Esempio
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML
= document.getElementById("id01").nodeName;
</script>
Nota: nodeName contiene sempre il nome del tag maiuscolo di un elemento HTML.
La proprietà nodeValue
La nodeValueproprietà specifica il valore di un nodo.
- nodeValue per i nodi dell'elemento è
null - nodeValue per i nodi di testo è il testo stesso
- nodeValue per i nodi dell'attributo è il valore dell'attributo
La proprietà nodeType
L' nodeTypeimmobile è di sola lettura. Restituisce il tipo di un nodo.
Esempio
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML
= document.getElementById("id01").nodeType;
</script>
Le proprietà nodeType più importanti sono:
| Node | Type | Example |
|---|---|---|
| ELEMENT_NODE | 1 | <h1 class="heading">W3Schools</h1> |
| ATTRIBUTE_NODE | 2 | class = "heading" (deprecated) |
| TEXT_NODE | 3 | W3Schools |
| COMMENT_NODE | 8 | <!-- This is a comment --> |
| DOCUMENT_NODE | 9 | The HTML document itself (the parent of <html>) |
| DOCUMENT_TYPE_NODE | 10 | <!Doctype html> |
Il tipo 2 è deprecato nel DOM HTML (ma funziona). Non è deprecato nel DOM XML.