XML-DOM -Tutorial
XML-DOM
Was ist das DOM?
Das DOM definiert einen Standard für den Zugriff auf und die Bearbeitung von Dokumenten:
Das HTML-DOM definiert eine Standardmethode für den Zugriff auf und die Bearbeitung von HTML-Dokumenten. Es präsentiert ein HTML-Dokument als Baumstruktur.
Das XML-DOM definiert eine Standardmethode für den Zugriff auf und die Bearbeitung von XML-Dokumenten. Es stellt ein XML-Dokument als Baumstruktur dar.
Das Verständnis des DOM ist ein Muss für jeden, der mit HTML oder XML arbeitet.
Das HTML-DOM
Auf alle HTML-Elemente kann über das HTML-DOM zugegriffen werden.
Dieses Beispiel ändert den Wert eines HTML-Elements mit id="demo":
Beispiel
<h1 id="demo">This is a Heading</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
Dieses Beispiel ändert den Wert des ersten <h1>-Elements in einem HTML-Dokument:
Beispiel
<h1>This is a Heading</h1>
<h1>This is a Heading</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script>
Hinweis: Auch wenn das HTML-Dokument nur EIN <h1>-Element enthält, müssen Sie trotzdem den Array-Index [0] angeben, da die Methode getElementsByTagName() immer ein Array zurückgibt.
In unserem JavaScript-Tutorial können Sie viel mehr über das HTML-DOM erfahren .
Das XML-DOM
Auf alle XML-Elemente kann über das XML-DOM zugegriffen werden.
Das XML-DOM ist:
- Ein Standardobjektmodell für XML
- Eine Standard-Programmierschnittstelle für XML
- Plattform- und sprachunabhängig
- Ein W3C-Standard
Mit anderen Worten: Das XML-DOM ist ein Standard dafür, wie XML-Elemente abgerufen, geändert, hinzugefügt oder gelöscht werden.
Holen Sie sich den Wert eines XML-Elements
Dieser Code ruft den Textwert des ersten <title>-Elements in einem XML-Dokument ab:
Beispiel
txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
Laden einer XML-Datei
Die in den folgenden Beispielen verwendete XML-Datei ist books.xml .
Dieses Beispiel liest „books.xml“ in xmlDoc ein und ruft den Textwert des ersten <title>-Elements in books.xml ab:
Beispiel
<!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>
Beispiel erklärt
- xmlDoc – das vom Parser erstellte XML-DOM-Objekt.
- getElementsByTagName("title")[0] - Ruft das erste <title>-Element ab
- childNodes[0] – das erste untergeordnete Element des <title>-Elements (der Textknoten)
- nodeValue - der Wert des Knotens (der Text selbst)
Laden eines XML-Strings
Dieses Beispiel lädt eine Textzeichenfolge in ein XML-DOM-Objekt und extrahiert die Informationen daraus mit JavaScript:
Beispiel
<html>
<body>
<p id="demo"></p>
<script>
var text, parser,
xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday
Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</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>
Programmierschnittstelle
Das DOM modelliert XML als eine Menge von Knotenobjekten. Auf die Knoten kann mit JavaScript oder anderen Programmiersprachen zugegriffen werden. In diesem Tutorial verwenden wir JavaScript.
Die Programmierschnittstelle zum DOM wird durch eine Reihe von Standardeigenschaften und -methoden definiert.
Eigenschaften werden oft als etwas bezeichnet, das ist (dh Knotenname ist "Buch").
Methoden werden oft als etwas, das getan wird, bezeichnet (dh "Buch" löschen).
XML-DOM-Eigenschaften
Dies sind einige typische DOM-Eigenschaften:
- x.nodeName – der Name von x
- x.nodeValue - der Wert von x
- x.parentNode – der übergeordnete Knoten von x
- x.childNodes – die untergeordneten Knoten von x
- x.attributes - die Attributknoten von x
Hinweis: In der obigen Liste ist x ein Knotenobjekt.
XML-DOM-Methoden
- x.getElementsByTagName( name ) – Alle Elemente mit einem angegebenen Tag-Namen abrufen
- x.appendChild( node ) - fügt einen untergeordneten Knoten in x ein
- x.removeChild( node ) - entfernt einen untergeordneten Knoten von x
Hinweis: In der obigen Liste ist x ein Knotenobjekt.