Neueste Web-Entwicklung Tutorials
 

XML DOM - Navigating Knoten

❮ Zurück Weiter Kapitel ❯

Die Knoten können mit Knotenbeziehungen navigiert werden.

×

Kopfzeile

Navigieren DOM-Knoten

Der Zugriff auf Knoten in der Knotenstruktur über die Beziehung zwischen den Knoten, wird oft als "navigating nodes" .

In der XML DOM, Knotenbeziehungen werden als Eigenschaften mit den Knoten definiert:

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

Das folgende Bild zeigt einen Teil des Knotenstruktur und die Beziehung zwischen den Knoten in books.xml :

Knoten Baum

DOM - Übergeordneter Knoten

Alle Knoten haben genau einen übergeordneten Knoten. Der folgende Code navigiert zu dem übergeordneten Knoten von <book> :

Beispiel

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

Erklärt Beispiel:

  1. Load " books.xml " in xmlDoc
  2. Holen Sie sich das erste <book> Element
  3. Ausgabe der Knotenname des übergeordneten Knotens von "x"

Vermeiden Sie leere Textknoten

Firefox und einigen anderen Browsern, werden leere weiße Räume oder neue Linien als Textknoten behandeln, wird der Internet Explorer nicht.

Dies führt zu einem Problem, wenn die Eigenschaften mit: first, lastchild, nextSibling, previousSibling.

Um zu vermeiden, um leere Textknoten (Räume und new-line Zeichen zwischen Elementknoten) zu navigieren, verwenden wir eine Funktion, die den Knotentyp überprüft:

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

Die Funktion oben können Sie verwenden get_nextSibling( node ) anstelle des Immobilien node .nextSibling.

Code erklärt:

Elementknoten sind vom Typ 1. Wenn der Geschwisterknoten kein Elementknoten ist, ist es zu den nächsten Knoten bewegt, bis ein Elementknoten gefunden wird. Auf diese Weise wird das Ergebnis das gleiche in Internet Explorer und Firefox.

Holen Sie sich das First Child Element

Der folgende Code zeigt das erste Element Knoten des ersten <book> :

Beispiel

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
myFunction(xhttp);
}
};
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>

Ausgabe:

title
Versuch es selber "

Erklärt Beispiel:

  1. Load " books.xml " in xmlDoc
  2. Verwenden Sie die get_firstChild Funktion auf der ersten <book> Element Knoten das erste Kind Knoten zu erhalten , die ein Elementknoten ist
  3. Ausgabe der Knotenname des ersten Kindes Knoten, der ein Elementknoten ist
Beispiele

Mehr Beispiele

lastChild()
In diesem Beispiel wird die lastChild() Methode und eine benutzerdefinierte Funktion die letzten Kindknoten eines Knotens zu erhalten

nextSibling()
Dieses Beispiel verwendet die nextSibling() Methode und eine benutzerdefinierte Funktion den nächsten Geschwisterknoten eines Knotens zu erhalten

previousSibling()
Dieses Beispiel verwendet die previousSibling() Methode und eine benutzerdefinierte Funktion den vorherigen Geschwisterknoten eines Knotens zu erhalten


❮ Zurück Weiter Kapitel ❯