XML DOM solmun sijainti

Solmuja voidaan sijoittaa käyttämällä solmun välisiä suhteita.

Solmun sijainnin DOM

Solmun välisistä suhteista päästään solmun puun solmuihin, mikä tunnetaan yleisesti "solmun sijainnista" (tai navigointisolmuista, navigating nodes).

XML DOM:ssa solmun väliset suhteet määritellään solmun ominaisuuksilla:

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

Seuraavassa kuvassa näkyy: books.xml Osa solmun puusta ja selittää solmun välisiä suhteita:

DOM Solmu puu

DOM - isäsolmu

Kaikki solmut ovat vain yhdellä isäsolmulla. Seuraava koodi navigoi <book>-solmun isäsolmuun:

Esimerkki

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

Kokeile itse

Esimerkki selitys:

  1. Siirrä books.xml lataa xmlDoc keskellä
  2. Hae ensimmäinen <book>-elementti
  3. Tulosta "x"-arvon isäsolmun solmunimi

Vältä tyhjiä tekstipisteitä

Jotkut selaimet saattavat nähdä tyhjät tai rivinvaihdot tekstipisteinä. Tämä aiheuttaa ongelmia seuraavien ominaisuuksien käytössä:

  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

Jotta vältetään navigointi tyhjiin tekstipisteisiin (elementtipisteiden väliset välilyönnit ja rivinvaihdot), käytämme funktiota tarkistamaan solmun tyyppisiä:

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

Yllä olevien funktioiden avulla voimme käyttää get_nextSibling(node) korvaamaan node.nextSibling -ominaisuuden.

Koodin selitys:

Solmun tyyppi on 1. Jos saman tason solmut eivät ole elementtejä, siirry seuraavaan solmuun, kunnes löytyy elementti.

Hanki ensimmäinen lapsisolmu

Seuraava koodi näyttää ensimmäisen <book> -solmun ensimmäisen elementti-solmun:

Esimerkki

<!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;
}
// Tarkista, onko ensimmäinen solmu elementti
function get_firstChild(n) {
    var y = n.firstChild;
    while (y.nodeType != 1) {
        y = y.nextSibling;
    }
    return y;
}
</script>
</body>
</html>

Kokeile itse

Esimerkki selitys:

  1. Siirrä books.xml Lataa xmlDoc -muuttujaan
  2. Käytä get_firstChild -funktiota ensimmäisen <book> -solmun ensimmäisen lapsisolmun saamiseksi
  3. Tulosta ensimmäisen lapsisolmun solmun nimi

Lisää esimerkkejä

lastChild()
Käytä lastChild() -metodia ja mukautettua funktiota saadaksesi solmun viimeisen lapsisolmun.
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.