XML DOM-Tutorial

Was ist DOM?

DOM definiert die Standards für den Zugriff und die Manipulation von Dokumenten:

Der "W3C-Document Object Model (DOM) ist eine plattform- und sprachunabhängige Schnittstelle, die es Programmen und Skripten ermöglicht, den Inhalt, die Struktur und das Stil des Dokuments dynamisch zu erreichen und zu aktualisieren."

Das HTML DOM definiert die Standards für den Zugriff und die Manipulation von HTML-Dokumenten. Es stellt ein HTML-Dokument als Baumstruktur dar.

Das XML DOM definiert die Standards für den Zugriff und die Manipulation von XML-Dokumenten. Es stellt ein XML-Dokument als Baumstruktur dar.

Für jeden, der HTML oder XML verwendet, ist das Verständnis des DOM unerlässlich.

HTML DOM

Alle HTML-Elemente können über das HTML DOM erreicht werden.

Beispiel 1

In diesem Beispiel wird der Wert des HTML-Elements mit id="demo" geändert:

<h1 id="demo">Das ist der Titel</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

Versuchen Sie es selbst

Beispiel 2

In diesem Beispiel wird der Wert des ersten <h1>-Elements im HTML-Dokument geändert:

<h1>Das ist der Titel</h1>
<h1>Das ist der Titel</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script>

Versuchen Sie es selbst

Beachten Sie:Selbst wenn das HTML-Dokument nur ein <h1>-Element enthält, müssen Sie die Array-Indizes [0] angeben, da die Methode getElementsByTagName() immer ein Array zurückgibt.

Sie können mehr über HTML DOM in unserem JavaScript-Tutorial lernen.

XML DOM

Alle XML-Elemente können über XML DOM erreicht werden.

XML DOM ist:

  • Standardobjektmodell für XML
  • Standardprogrammierschnittstelle für XML
  • unabhängig von Plattform und Sprache
  • W3C-Standard

Mit anderen Worten: XML DOM ist ein Standard für das Abrufen, Ändern, Hinzufügen oder Entfernen von XML-Elementen.

Wert des XML-Elements abrufen

In diesem Beispiel wird der Textwert des ersten <title>-Elements im XML-Dokument abgerufen:

Beispiel

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

Laden Sie das XML-Dokument

Das in diesem Beispiel verwendete XML-Dokument ist books.xml.

In diesem Beispiel wird "books.xml" in xmlDoc gelesen und der Textwert des ersten <title>-Elements in books.xml abgerufen:

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>

Versuchen Sie es selbst

Beispiel Erklärung

  1. xmlDoc - Von dem Parser erstelltes XML-DOM-Objekt
  2. getElementsByTagName("title")[0] - Ersten <title>-Element erhalten
  3. childNodes[0] - Erster Kindknoten des <title>-Elements (Textknoten)
  4. nodeValue - Wert des Knotens (der Text selbst)

Laden Sie den XML-String

Dieser Beispiel lädt einen Textstring in ein XML-DOM-Objekt und extrahiert Informationen daraus mit JavaScript:

Beispiel

<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>

Versuchen Sie es selbst

Programmierschnittstelle

DOM modelliert XML als eine Gruppe von Knotenobjekten. Knoten können mit JavaScript oder anderen Programmiersprachen erreicht werden. In diesem Tutorial verwenden wir JavaScript.

DOM definiert die Programmierschnittstelle durch eine Reihe von Standardattributen und Methoden.

AttributeDies bezieht sich in der Regel darauf, was etwas ist (z.B. nodename ist "book").

MethodenDies bezieht sich in der Regel darauf, was man tun kann (z.B. das Löschen der Aktion "book").

XML-DOM-Attribute

Dies sind einige typische DOM-Attribute:

  • x.nodeName - Name von x
  • x.nodeValue - Wert von x
  • x.parentNode - Elternknoten von x
  • x.childNodes - Kindknoten von x
  • x.attributes - Attributknoten von x

Note:In der obigen Liste ist x ein Knotenobjekt.

XML DOM Methods

  • x.getElementsByTagName(name) - Get all elements with a specified tag name
  • x.appendChild(node) - Insert a child node into x
  • x.removeChild(node) - Remove child nodes from x

Note:In the above list,x Is a node object.