Προσέγγιση στο XML DOM

Οι κόμβοι μπορούν να προσδιοριστούν χρησιμοποιώντας τις σχέσεις μεταξύ των κόμβων.

Πλοήγηση DOM κόμβων

Ορισμός κόμβων στο δέντρο κόμβων μέσω των σχέσεων μεταξύ των κόμβων, συχνά ονομάζεται "定位节点" (ή πλοήγηση κόμβων, navigating nodes).

Στο XML DOM, οι σχέσεις κόμβων ορίζονται ως ιδιότητες του κόμβου:

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

Η παρακάτω εικόνα δείχνει books.xml Μέρος του δέντρου κόμβων και εξηγεί τις σχέσεις μεταξύ των κόμβων:

Δέντρο κειμένων DOM

DOM - Γονικός κόμβος

Ο καθένας από τους κόμβους έχει μόνο έναν γονικό κόμβο. Το παρακάτω κώδικα πλοηγείται στον γονικό κόμβο του <book>:

Παράδειγμα

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

Δοκιμάστε το προσωπικά

Παράδειγμα εξήγησης:

  1. Μεταφέρετε books.xml φορτωμένο στο xmlDoc με
  2. Ανακτηση του πρώτου στοιχείου <book>
  3. Εκτύπωση του ονόματος του γονικού κόμβου του "x"

Αποφυγή κενών κειμένων κόμβων

Μερικοί περιηγητές μπορεί να θεωρούν τα κενά ή τις αλλαγές γραμμής ως κόμβους κειμένου. Αυτό μπορεί να προκαλέσει προβλήματα όταν χρησιμοποιούμε τις παρακάτω ιδιότητες:

  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

Για να αποφύγουμε την πλοήγηση σε κενά κείμενα κόμβων (χώρους και αλλαγές γραμμής μεταξύ στοιχείων), χρησιμοποιούμε μια συνάρτηση για να ελέγξουμε τον τύπο του κόμβου:

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

Με τη βοήθεια των παραπάνω συναρτήσεων, μπορούμε να χρησιμοποιήσουμε get_nextSibling(node) αντί για την ιδιότητα node.nextSibling.

Ανάλυση κώδικα:

Ο τύπος του στοιχείου κόμβου είναι 1. Αν οι同级 κόμβοι δεν είναι στοιχεία, μετακινηθείτε στον επόμενο κόμβο μέχρι να βρείτε ένα στοιχείο.

Αποκτήστε τον πρώτο στοιχείο κόμβο

Η παρακάτω κώδικας δείχνει τον πρώτο στοιχείο κόμβου του πρώτου <book>:

Παράδειγμα

<!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;
}
// Ελέγξτε αν ο πρώτος κόμβος είναι κόμβος στοιχείου
function get_firstChild(n) {
    var y = n.firstChild;
    while (y.nodeType != 1) {
        y = y.nextSibling;
    }
    return y;
}
</script>
</body>
</html>

Δοκιμάστε το προσωπικά

Παράδειγμα εξήγησης:

  1. Μεταφέρετε books.xml Φορτώστε στο xmlDoc
  2. Χρησιμοποιήστε τη συνάρτηση get_firstChild στο πρώτο στοιχείο κόμβου <book> για να αποκτήσετε τον πρώτο υποκείμενο κόμβο
  3. Εκτυπώστε το όνομα του πρώτου υποκείμενου κόμβου

Περισσότερες παραδείξεις

lastChild()
Χρησιμοποιήστε τη μέθοδο lastChild() και τις προσαρμοσμένες συνάρτησεις για να αποκτήσετε τον τελευταίο υποκείμενο του κόμβου.
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.