Posizionamento dei nodi DOM XML

I nodi possono essere localizzati utilizzando le relazioni tra i nodi.

Localizzare nodi DOM

Accedere ai nodi dell'albero dei nodi tramite le relazioni tra i nodi, di solito chiamati "nodi di localizzazione" (o nodi di navigazione, navigating nodes).

In XML DOM, le relazioni tra i nodi sono definite come attributi del nodo:

  • parentNode
  • childNodes
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

La seguente immagine mostra books.xml Fanno parte di un albero di nodi e illustrano le relazioni tra i nodi:

Albero dei nodi DOM

DOM - Genitore del nodo

Tutti i nodi hanno un solo genitore. Il seguente codice naviga al genitore di <book>:

Esempio

function myFunction(xml) {
var xmlDoc = xml.responseXML;
    var x = xmlDoc.getElementsByTagName("book")[0];
    document.getElementById("demo").innerHTML = x.parentNode.nodeName;
}

Prova tu stesso

Esempio di spiegazione:

  1. Convertire books.xml caricato in xmlDoc In
  2. Ottenere il primo elemento <book>
  3. Output del nome del nodo del genitore di "x"

Evitare nodi di testo vuoti

Alcuni browser potrebbero considerare spazi o newline come nodi di testo. Questo può causare problemi quando si utilizzano i seguenti attributi:

  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

Per evitare di navigare verso nodi di testo vuoti (spazi e segni di newline tra nodi elementari), utilizziamo una funzione per controllare il tipo del nodo:

function get_nextSibling(n) {}}
    var y = n.nextSibling;
    while (y.nodeType != 1) {
        y = y.nextSibling;
    }
    return y;
}

Con la funzione sopra, possiamo utilizzare get_nextSibling(node) per sostituire l'attributo node.nextSibling.

Spiegazione del codice:

Il tipo del nodo elemento è 1. Se il nodo同级 non è un nodo elemento, spostati al nodo successivo fino a trovare un nodo elemento.

Ottieni il primo elemento figlio

Il seguente codice mostra il primo elemento figlio del primo <book>:

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;
}
// Verifica se il primo nodo è un nodo elemento
function get_firstChild(n) {
    var y = n.firstChild;
    while (y.nodeType != 1) {
        y = y.nextSibling;
    }
    return y;
}
</script>
</body>
</html>

Prova tu stesso

Esempio di spiegazione:

  1. Convertire books.xml Caricato in xmlDoc
  2. Utilizzare la funzione get_firstChild sul primo elemento <book> per ottenere il primo elemento figlio
  3. Output del nome del nodo del primo elemento figlio

Più esempi

lastChild()
Utilizzare il metodo lastChild() e la funzione personalizzata per ottenere l'ultimo figlio del nodo.
nextSibling()
Use the nextSibling() method and custom functions to get the next sibling node of the element.
previousSibling()
Use the previousSibling() method and custom functions to get the previous sibling node of the element.