XML DOM - Nodi di navigazione
I nodi possono essere esplorati utilizzando le relazioni dei nodi.
Navigazione nei nodi DOM
L'accesso ai nodi nell'albero dei nodi tramite la relazione tra i nodi è spesso chiamato "nodi di navigazione".
Nel DOM XML, le relazioni dei nodi sono definite come proprietà dei nodi:
- parentNode
- childNodes
- Primogenito
- ultimo bambino
- prossimoFratello
- precedenteFratello
L'immagine seguente illustra una parte dell'albero dei nodi e la relazione tra i nodi in books.xml :
DOM - Nodo padre
Tutti i nodi hanno esattamente un nodo padre. Il codice seguente passa al nodo padre di <book>:
Esempio
function myFunction(xml) {
var xmlDoc = xml.responseXML;
var x = xmlDoc.getElementsByTagName("book")[0];
document.getElementById("demo").innerHTML = x.parentNode.nodeName;
}
Esempio spiegato:
- Carica " books.xml " in xmlDoc
- Ottieni il primo elemento <book>
- Emetti il nome del nodo del nodo padre di "x"
Evita nodi di testo vuoti
Firefox e alcuni altri browser tratteranno gli spazi vuoti o le nuove righe come nodi di testo, Internet Explorer no.
Ciò causa un problema quando si utilizzano le proprietà: firstChild, lastChild, nextSibling, previousSibling.
Per evitare di navigare verso nodi di testo vuoti (spazi e caratteri di nuova riga tra i nodi degli elementi), utilizziamo una funzione che controlla il tipo di nodo:
function get_nextSibling(n)
{
var y = n.nextSibling;
while (y.nodeType! = 1)
{
y = y.nextSibling;
}
return y;
}
La funzione precedente consente di utilizzare get_nextSibling( node ) invece della proprietà node .nextSibling.
Codice spiegato:
I nodi elemento sono di tipo 1. Se il nodo di pari livello non è un nodo elemento, si sposta ai nodi successivi finché non viene trovato un nodo elemento. In questo modo, il risultato sarà lo stesso sia in Internet Explorer che in Firefox.
Ottieni il primo elemento figlio
Il codice seguente mostra il primo nodo elemento del primo <libro>:
Esempio
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET",
"books.xml", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
var x = get_firstChild(xmlDoc.getElementsByTagName("book")[0]);
document.getElementById("demo").innerHTML = x.nodeName;
}
//check if
the first node is an element node
function get_firstChild(n) {
var y = n.firstChild;
while (y.nodeType != 1) {
y = y.nextSibling;
}
return y;
}
</script>
</body>
</html>
Produzione:
title
Esempio spiegato:
- Carica " books.xml " in xmlDoc
- Utilizzare la funzione get_firstChild sul primo nodo elemento <book> per ottenere il primo nodo figlio che è un nodo elemento
- Genera il nome del nodo del primo nodo figlio che è un nodo elemento
Altri esempi
Questo esempio utilizza il metodo lastChild() e una funzione personalizzata per ottenere l'ultimo nodo figlio di un nodo
Questo esempio utilizza il metodo nextSibling() e una funzione personalizzata per ottenere il nodo di pari livello successivo di un nodo
Questo esempio utilizza il metodo previousSibling() e una funzione personalizzata per ottenere il nodo di pari livello precedente di un nodo