XML DOM Lokaliser Noder

kan findes ved hjælp af forholdet mellem noderne.

Find DOM-noder

Man kan nå noder i nodetræet ved hjælp af forholdet mellem noderne, og dette kaldes ofte "noderfindning" (eller navigeringsnoder, navigating nodes).

I XML DOM defineres noderelationer som egenskaber for noderne:

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

Billedet nedenfor viser books.xml er en del af nodetræet og beskriver forholdet mellem noderne:

DOM Node Tree

DOM - forældernode

Alle knuder har kun én forældernode. Følgende kode navigerer til <book>-nodens forældernode:

Eksempel

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

Prøv det selv

Eksempel forklaring:

  1. Brug books.xml indlæst til xmlDoc i
  2. Få den første <book>-element
  3. Output "x"'s forældernodes nodenavn

Undgå tomme tekstknuder

Visse browsere kan betragte tomrum eller linjeskift som tekstknuder. Dette kan skabe problemer, når man bruger følgende egenskaber:

  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

For at undgå at navigere til tomme tekstknuder (mellem elementknuder og mellemrum og linjeskift), bruger vi en funktion til at kontrollere nodetyper:

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

Med de ovenstående funktioner kan vi bruge get_nextSibling(node) i stedet for node.nextSibling-egenskaben.

Kodeforklaring:

Elementnodens type er 1. Hvis den samme node ikke er en elementnode, bevæg til den næste node, indtil der findes en elementnode.

Få den første undernode

Følgende kode viser det første <book>-elements første elementnode:

Eksempel

<!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;
}
// Tjek om den første node er en elementnode
function get_firstChild(n) {
    var y = n.firstChild;
    while (y.nodeType != 1) {
        y = y.nextSibling;
    }
    return y;
}
</script>
</body>
</html>

Prøv det selv

Eksempel forklaring:

  1. Brug books.xml Indlæs til xmlDoc
  2. Brug funktionen get_firstChild på det første <book>-element for at få det første undernodeelement
  3. Udskriv navnet på den første undernodeelement

Flere eksempler

lastChild()
Brug metoden lastChild() og en brugerdefineret funktion til at få den sidste undernode af et element.
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.