Εκμάθηση XML DOM

Τι είναι το DOM;

Η DOM καθορίζει τα πρότυπα πρόσβασης και επεξεργασίας του εγγράφου:

“Η W3C Document Object Model (DOM) είναι μια διεπαφής ανεξάρτητη από πλαίσιο και γλώσσα που επιτρέπει στα προγράμματα και τα σενάρια να προσέγγιστούν και να ενημερώσουν δυναμικά το περιεχόμενο, τη δομή και το στυλ του εγγράφου.”

Το HTML DOM καθορίζει τα πρότυπα πρόσβασης και επεξεργασίας των εγγράφων HTML. Εμφανίζει το έγγραφο HTML ως δέντρο.

Το XML DOM καθορίζει τα πρότυπα πρόσβασης και επεξεργασίας των εγγράφων XML. Εμφανίζει το έγγραφο XML ως δέντρο.

Για κάθε άτομο που χρησιμοποιεί HTML ή XML, η κατανόηση του DOM είναι απαραίτητη.

HTML DOM

Όλοι οι στοιχεία HTML μπορούν να προσέγγιστούν μέσω του HTML DOM.

Παράδειγμα 1

Το παρακάτω παράδειγμα更改 το στοιχείο HTML με id="demo":

<h1 id="demo">Αυτό είναι ο τίτλος</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

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

Παράδειγμα 2

Το παρακάτω παράδειγμα更改 το στοιχείο <h1> στο έγγραφο HTML:

<h1>Αυτό είναι ο τίτλος</h1>
<h1>Αυτό είναι ο τίτλος</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script>

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

Σημείωση:Ακόμα και αν το έγγραφο HTML περιέχει μόνο ένα στοιχείο <h1>, πρέπει να καθορίσετε τον δείκτη κατά为数 [0], επειδή η μέθοδος getElementsByTagName() întανίζει πάντα μια λίστα.

Μπορείτε να μάθετε περισσότερα για το HTML DOM στο δικό μας σεμινάριο JavaScript.

XML DOM

Όλα τα στοιχεία XML μπορούν να προσπελάθονται μέσω του XML DOM.

Το XML DOM είναι:

  • Πρότυπο αντικειμένων XML
  • Πρότυπο προγραμματιστικής σύνδεσης XML
  • Απλοποιημένο από πλατφόρμα και γλώσσα
  • Πρότυπα W3C

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

Αποκτηση τιμής στοιχείου XML

Το παρακάτω παράδειγμα αναζητά τη τιμή του πρώτου στοιχείου <title> στο XML έγγραφο:

Παράδειγμα

txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;

Φόρτωση αρχείου XML

Το αρχείο XML που χρησιμοποιείται στο παρακάτω παράδειγμα είναι το books.xml.

Η παρακάτω παράδειγμα θα διαβάσει το "books.xml" στο xmlDoc και θα αναζητήσει τη τιμή του πρώτου στοιχείου <title> στο books.xml:

Παράδειγμα

<!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;
    document.getElementById("demo").innerHTML =
    xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
}
</script>
</body>
</html>

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

Ανάλυση παραδείγματος

  1. xmlDoc - Ο XML DOM αντικείμενο που δημιουργήθηκε από τον αναλυτή
  2. getElementsByTagName("title")[0] - Ακquisition του πρώτου στοιχείου <title>
  3. childNodes[0] - Ο πρώτος υποκόμβος του στοιχείου <title> (κενό κόμβος)
  4. nodeValue - Η τιμή του κόμβου (το κείμενο του κειμένου)

Φόρτωση αλφαβητικής αλυσίδας XML

Αυτό το παράδειγμα φορτώνει μια αλφαβητική αλυσίδα στο αντικείμενο XML DOM και χρησιμοποιεί το JavaScript για να εξάγει πληροφορίες από αυτήν:

Παράδειγμα

<html>
<body>
<p id="demo"></p>
<script>
var text, parser, xmlDoc;
text = "<bookstore><book>"
"<title>雅舍谈吃</title>" +
"<author>梁实秋</author>" +
"<year>2013</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>
</html>

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

Προγραμματιστική διεπαφή

Το DOM κατασκευάζει ένα σύνολο αντικειμένων κόμβων από το XML. Μπορείτε να πρόσβαση στα κόμβους χρησιμοποιώντας το JavaScript ή άλλες γλώσσες προγραμματισμού. Σε αυτό το έργο, χρησιμοποιούμε το JavaScript.

Η προγραμματιστική διεπαφή του DOM ορίζεται από ένα σύνολο standard ιδιοτήτων και μεθόδων.

ΙδιότητεςΓενικά αναφέρεται σε τι είναι η ενέργεια (π.χ. το nodename είναι "book").

ΜέθοδοιΓενικά αναφέρεται σε τι μπορεί να γίνει (π.χ. η ενέργεια διαγραφής του "book").

Ιδιότητες XML DOM

Αυτές είναι μερικές από τις τυπικές ιδιότητες DOM:

  • x.nodeName - Ο όνομα του x
  • x.nodeValue - Η τιμή του x
  • x.parentNode - Ο γονέας του x
  • x.childNodes - Οι υποκόμβοι του x
  • x.attributes - Οι ιδιότητες του x

Σημείωση:Στην παραπάνω λίστα, το x είναι ένα αντικείμενο κόμβου.

XML DOM 方法

  • x.getElementsByTagName(name) - Ανακάλυψη όλων των στοιχείων με το καθορισμένο όνομα ετικέτας
  • x.appendChild(node) - Εισαγωγή υποκείμενου κόμβου στο x
  • x.removeChild(node) - Αφαίρεση υποκείμενων κόμβων από το x

Σημείωση:Στην παραπάνω λίσταx Είναι ένα αντικείμενο κόμβου.