XML DOM lokalisera noder

kan du定位 noder genom att använda förhållandet mellan noder.

DOM nod定位

Genom att använda förhållandet mellan noder kan du komma åt noder i nodträdet, detta kallas ofta "noder定位" (eller navigerande noder, navigating nodes).

I XML DOM definieras nodförhållandena som egenskaper för noder:

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

Nedanstående bild visar books.xml är en del av nodträdet och beskriver förhållandet mellan noder:

DOM nodstruktur

DOM - föräldernod

Alla noder har endast en föräldernod. Följande kod navigerar till föräldernoden för <book>:

Exempel

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

Prova själv

Fördjupning:

  1. För att books.xml laddas till xmlDoc i
  2. Hämta den första <book>-elementen
  3. Output "x"s föräldernodens nodnamn

Undvik tomma textnoder

Vissa webbläsare kan betrakta tomma utrymme eller nyckelrador som textnoder. Detta kan orsaka problem när du använder följande egenskaper:

  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

För att undvika navigering till tomma textnoder (tomma mellanslag och nyckelrador mellan elementnoder), använder vi en funktion för att kontrollera nodtypen:

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

Med hjälp av de ovanstående funktionerna kan vi använda get_nextSibling(node) för att ersätta node.nextSibling-attributet.

Kodförklaring:

Typen för elementnoden är 1. Om noden på samma nivå inte är en elementnod, flyttas till nästa nod tills en elementnod hittas.

Hämta den första barnnoden

Nedanstående kod visar den första elementnoden för det första <book>-elementet:

Exempel

<!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;
}
// Kontrollera om den första noden är en elementnod
function get_firstChild(n) {
    var y = n.firstChild;
    while (y.nodeType != 1) {
        y = y.nextSibling;
    }
    return y;
}
</script>
</body>
</html>

Prova själv

Fördjupning:

  1. För att books.xml Ladda till xmlDoc
  2. Använd funktionen get_firstChild på det första <book>-elementnoden för att hämta den första barnnoden
  3. Skriv ut namnet på den första barnnoden

Mer exempel

lastChild()
Använd metoden lastChild() och en anpassad funktion för att hämta den sista barnnoden för ett 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.