navigazione HTML DOM
Attraverso il DOM HTML, si è in grado di utilizzare il nodo del rapporto dell'albero di navigazione del nodo.
elenco dei nodi HTML DOM
getElementsByTagName () restituisce una lista di nodi. elenco dei nodi è una matrice nodo.
Il codice seguente documento selezionato tutti <p> nodo:
Esempi
Vi si può accedere dal dell'etichetta successiva. Per accedere al secondo <p>, è possibile scrivere:
Prova »
Nota:
Sotto l'etichetta inizia a 0.
HTML DOM nell'elenco nodi Lunghezza
attributo di lunghezza definisce il numero di nodi nella lista dei nodi.
È possibile utilizzare la proprietà length per elenco dei nodi del ciclo:
Esempi
for (i=0;i<x.length;i++)
{
document.write(x[i].innerHTML);
document.write("<br />");
}
Prova »
Esempi di analisi:
- Ricevi tutte le <p> nodo elemento
- Il valore di uscita di ogni elemento <p> del nodo di testo
rapporto nodo di navigazione
È possibile utilizzare tre attributi dei nodi: parentNode, firstChild e lastChild, navigare attraverso la struttura del documento.
Si consideri il seguente frammento di codice HTML:
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates node relationships.</p>
</div>
</body>
</html>
- Il primo elemento <p> è il primo figlio del <body> (firstChild)
- <Div> elemento è l'ultimo elemento figlio <body> (lastChild)
- <Body> elemento è il primo elemento <p> ed un <div> nodo principale dell'elemento (parentNode)
proprietà firstChild può essere utilizzata per accedere agli elementi del testo:
Esempi
<body>
<p id="intro">Hello World!</p>
<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
</body>
</html>
Prova »
nodo principale DOM
Ci sono due attributi speciali, è possibile accedere a tutta la documentazione:
- document.documentElement - tutti i documenti
- document.body - corpo del documento
Esempi
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>document.body</b> property.</p>
</div>
<script>
alert(document.body.innerHTML);
</script>
</body>
</html>
Prova »
childNodes e nodeValue
Oltre alla proprietà innerHTML, è anche possibile utilizzare i childNodes e la proprietà nodeValue per ottenere il contenuto dell'elemento.
Il codice seguente ottiene il id = "intro" i <p> i valori degli elementi:
Esempi
<body>
<p id="intro">Hello World!</p>
<script>
var txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>
</body>
</html>
Prova »
Nell'esempio precedente, getElementById è un metodo, mentre childNodes e nodeValue sono immobili.
In questo tutorial, useremo la proprietà innerHTML. Tuttavia, il metodo di apprendimento sopra aiuta a navigare la struttura ad albero del DOM e comprensione.