Locating Nodes in XML DOM

Kan worden gelokaliseerd door middel van de relatie tussen knopen.

Locatie DOM knopen

Door middel van de relatie tussen knopen knopen in de knopenboom te verkrijgen, wordt dit meestal "knopenlocatie" (of navigatieknopen, navigating nodes) genoemd.

In de XML DOM worden knopenrelaties gedefinieerd als eigenschappen van knopen:

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

De onderstaande afbeelding toont books.xml is een deel van de knopenboom en verduidelijkt de relatie tussen knopen:

DOM Node Tree

DOM - ouderknooppunt

Alle knopen hebben maar één ouderknooppunt. De volgende code navigeert naar het ouderknooppunt van <book>:

Voorbeeld

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

Probeer het zelf

Voorbeeldverklaring:

  1. Verbind books.xml geladen naar xmlDoc in
  2. Verkrijg de eerste <book> knopen
  3. Output het knopennaam van het ouderknooppunt van "x"

Voorkom lege tekstknopen

Sommige browsers kunnen witruimte of newline beschouwen als tekstknopen. Dit kan problemen veroorzaken bij het gebruik van de volgende eigenschappen:

  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

Om te voorkomen dat je wordt doorgestuurd naar een lege tekstknopen (ruimte en newline tussen elementknopen), gebruiken we een functie om het type van de knopen te controleren:

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

Met de bovenstaande functie kunnen we get_nextSibling(node) gebruiken in plaats van de property node.nextSibling.

Codeverklaring:

Het type van de elementknoop is 1. Als de同级knopen geen elementknooppunten zijn, verplaats dan naar de volgende knoop totdat een elementknoop wordt gevonden.

Verkrijg de eerste onderliggende elementknoop

De volgende code toont de eerste elementknoop van het eerste <book>:

Voorbeeld

<!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;
}
// Controleer of de eerste knoop een elementknoop is
function get_firstChild(n) {
    var y = n.firstChild;
    while (y.nodeType != 1) {
        y = y.nextSibling;
    }
    return y;
}
</script>
</body>
</html>

Probeer het zelf

Voorbeeldverklaring:

  1. Verbind books.xml Laden in xmlDoc
  2. Gebruik de functie get_firstChild op de eerste <book>-elementknoop om de eerste onderliggende elementknoop te verkrijgen
  3. Geef de naam van de knoop van de eerste onderliggende elementknoop

Meer voorbeelden

lastChild()
Gebruik de methode lastChild() en een aangepaste functie om de laatste onderliggende knoop van een knoop te verkrijgen.
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.