Navigazione HTML DOM di JavaScript

Tramite HTML DOM, puoi utilizzare le relazioni dei nodi per navigare nelbero dei nodi.

Node DOM

Secondo lo standard W3C HTML DOM, tutto ciò che si trova in un documento HTML è un nodo:

  • L'intero documento è un nodo documento
  • Ogni elemento HTML è un nodo elemento
  • Il testo all'interno di un elemento HTML è un nodo testo
  • Ogni attributo HTML è un nodo attributo
  • Tutte le annotazioni sono nodi di commento
Albero DOM HTML

Con HTML DOM, tutti i nodi nelbero dei nodi possono essere acceduti tramite JavaScript.

Puoi creare nuovi nodi, modificare e eliminare tutti i nodi.

Relazioni dei nodi

I nodi nelbero dei nodi hanno una certa relazione gerarchica.

  • Il termine (padre, figlio e fratello, parent, child e sibling) viene utilizzato per descrivere queste relazioni.
  • Nelbero dei nodi, il nodo in alto è chiamato radice (il nodo radice non ha padre)
  • Ogni nodo ha un nodo padre, eccetto il radice (il nodo radice non ha padre)
  • Un nodo può avere un certo numero di figli
  • Fratello (o sorella) si riferisce a nodi che condividono lo stesso padre.
<html>
   <head>
       <title>Manuale DOM</title>
   </head>
  <body>
       <h1>Lezione 1 DOM</h1>
       <p>Ciao mondo!</p>
   </body>
</html>
Albero DOM HTML

Da questo HTML potete leggere le seguenti informazioni:

  • html è il nodo radice
  • html non ha padre
  • html è il padre di head e body
  • head è il primo figlio di html
  • <body> è l'ultimo figlio di <html>

Allo stesso tempo:

  • <head> ha un figlio: <title>
  • <title> ha un figlio (nodo di testo): "DOM Tutorial"
  • <body> ha due figli: <h1> e <p>
  • <h1> ha un figlio: "Lezione DOM prima"
  • <p> ha un figlio: "Hello world!"
  • <h1> e <p> sono fratelli

Navigazione tra i nodi

Attraverso JavaScript, puoi utilizzare i seguenti attributi dei nodi per navigare tra i nodi:

  • parentNode
  • childNodes[nodenumber]
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

figli e valori dei nodi

Un errore comune nel trattamento DOM è pensare che gli elementi del nodo contengano testo.

Esempio:

<title id="demo">DOM Tutorial</title>

elemento del nodo <title> (nello esempio sopra) Non contieneTesto.

Contiene il testo "DOM Tutorial".Nodo di testo.

Il valore del nodo di testo può essere recuperato attraverso il valore del nodo: innerHTML per accedere all'attributo:

var myTitle = document.getElementById("demo").innerHTML;

Accedere all'attributo innerHTML è equivalente a accedere al primo figlio: nodeValue:

var myTitle = document.getElementById("demo").firstChild.nodeValue;

Puoi anche accedere al primo figlio in questo modo:

var myTitle = document.getElementById("demo").childNodes[0].nodeValue;

Esempi seguenti per recuperare <h1> testo dell'elemento e copiarlo in <p> Elemento:

Esempio 1

<html>
<body>
<h1 id="id01">La mia prima pagina</h1>
<p id="id02">Ciao!</p>
<script>
 document.getElementById("id02").innerHTML  = document.getElementById("id01").innerHTML;
</script>
</body>
</html>

Prova da solo

Esempio 2

<html>
<body>
<h1 id="id01">La mia prima pagina</h1>
<p id="id02">Ciao!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>

Prova da solo

Esempio 3

<html>
<body>
<h1 id="id01">La mia prima pagina</h1>
<p id="id02">Ciao!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>
</body>
</html>

Prova da solo

InnerHTML

In questo tutorial, usiamo innerHTML Recupera il contenuto dell'elemento HTML.

Ma, studiare i metodi elencati di seguito aiuta a comprendere la struttura ad albero del DOM e la navigazione.

Radice DOM

Ci sono due proprietà speciali che permettono di accedere al documento completo:

  • document.body - Corpo del documento
  • document.documentElement - Documento completo

Esempio

<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM è molto utile!</p>
<p>Esempio di utilizzo della proprietà <b>document.body</b>.</p>
</div>
<script>
 alert(document.body.innerHTML);
</script>
</body>
</html>

Prova da solo

Esempio

<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM è molto utile!</p>
<p>Esempio di utilizzo della proprietà <b>document.documentElement</b>.</p>
</div>
<script>
alert(document.documentElement.innerHTML);
</script>
</body>
</html>

Prova da solo

Proprietà nodeName

nodeName La proprietà specifica il nome del nodo.

  • Il nomeNode è readonly
  • Il nomeNode del nodo di elemento è uguale al nome del tag
  • Il nomeNode del nodo di proprietà è il nome dell'attributo
  • Il nomeNode del nodo di testo è sempre #text
  • Il nomeNode del nodo di documento è sempre #document

Esempio

<h1 id="id01">La mia prima pagina web</h1>
<p id="id02">Ciao!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>

Prova da solo

Nota:Il nomeNode contiene sempre il nome del tag dell'elemento HTML in maiuscolo.

Proprietà nodeValue

nodeValue La proprietà specifica il valore del nodo.

  • Il valore del nodo di elemento è undefined
  • Il valore del nodo di testo è il testo
  • Il valore del nodo di proprietà è nodeValue

Proprietà nodeType

La proprietà ritorna il tipo del nodo.La proprietà è readonly.

Esempio

<h1 id="id01">La mia prima pagina web</h1>
<p id="id02">Ciao!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>

Prova da solo

La proprietà nodeType più importante è:

Node Tipo Esempio
ELEMENT_NODE 1 <h1 class="heading">W3School</h1>
ATTRIBUTE_NODE 2 class = "heading" (dismesso)
TEXT_NODE 3 W3School
COMMENT_NODE 8 <!-- Questo è un commento -->
DOCUMENT_NODE 9 Il documento HTML stesso (padre di <html>)
DOCUMENT_TYPE_NODE 10 <!DOCTYPE html>

Type 2 è stato dismesso nell'HTML DOM. Non è stato dismesso nell'XML DOM.