Der DOM definiert einen Standard für den Zugriff auf und Manipulation von Dokumenten.
Die XML-DOM stellt ein XML-Dokument als Baumstruktur.
Die HTML-DOM stellt ein HTML-Dokument als Baumstruktur.
das DOM zu verstehen, ist ein Muss für jeden mit HTML oder XML arbeiten.
XML-DOM-Baum Beispiel
Was ist das DOM?
Der DOM definiert einen Standard für Dokumente wie XML und HTML-Zugriff auf:
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
Das DOM ist in 3 verschiedenen Teilen / Ebenen unterteilt:
- Core DOM - Core DOM - Standardmodell für ein strukturiertes Dokument
- XML DOM - Standardmodell für XML - Dokumente
- HTML DOM - HTML DOM - Standardmodell für die HTML - Dokumente
Das DOM definiert die objects and properties die methods (interface) objects and properties aller Dokumentelemente und die methods (interface) auf sie zugreifen.
Die HTML-DOM
Die HTML-DOM definiert einen Standard für den Zugriff auf und die Manipulation von HTML-Dokumenten.
Alle HTML-Elemente können über das HTML-DOM zugegriffen werden.
Die HTML - DOM definiert die objects, properties and methods aller HTML - Elemente.
Ändern Sie den Wert eines HTML-Elements
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> Versuch es selber " Dieses Beispiel ändert den Wert des ersten <h1> Element 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> Versuch es selber " Hinweis: Auch wenn die HTML - Dokument definiert zusätzliche nur EIN <h1> Element , das Sie immer noch die Array - Index angeben müssen [0], weil die getElementsByTagName() Methode immer ein Array zurückgibt.
Sie können viel mehr über den HTML - DOM in unserem lernen JavaScript Tutorial .
Die XML-DOM
Die XML-DOM definiert einen Standard für den Zugriff auf und Bearbeiten von XML-Dokumenten.
Alle XML-Elemente können über die XML-DOM zugegriffen werden.
Die XML - DOM definiert die objects, properties and methods aller XML - Elemente.
Die XML-DOM ist:
- Ein Standard-Objektmodell für XML
- Ein Standard-Programmierschnittstelle für XML
- Plattform- und sprachunabhängig
- Ein W3C-Standard
Mit anderen Worten: The XML DOM is a standard for how to get, change, add, or delete XML elements. - The XML DOM is a standard for how to get, change, add, or delete XML elements. - The XML DOM is a standard for how to get, change, add, or delete XML elements. zu The XML DOM is a standard for how to get, change, add, or delete XML elements.
Rufen Sie den Wert eines XML-Elements
Dieser Code ruft den Textwert des ersten <title> Element in einem XML - Dokument:
Beispiel
txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
Laden einer XML-Datei
Die XML - Datei in den nachfolgenden Beispielen verwendet werden ist books.xml .
Dieses Beispiel liest "books.xml" in xmlDoc und ruft den Textwert des ersten <title> Element in books.xml:
Beispiel
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
myFunction(xhttp);
}
};
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>
Versuch es selber " Beispiel erklärt
- xmlDoc - das Objekt XML DOM vom Parser erstellt.
- getElementsByTagName("title")[0] - erhalten die ersten <title> Element
- childNodes[0] - das erste Kind des <title> Element (Textknoten)
- nodeValue - der Wert des Knotens (the text itself)
Laden einer XML-String
Dieses Beispiel lädt eine Textzeichenfolge in ein XML-DOM-Objekt, und extrahiert die Daten aus es 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>
Versuch es selber " Programming Interface
Die DOM-Modelle XML als eine Reihe von Knotenobjekten. Die Knoten können mit JavaScript oder anderen Programmiersprachen zugegriffen werden. In diesem Tutorial verwenden wir JavaScript.
Die Programmierschnittstelle zum DOM wird durch einen Satz Standard-Eigenschaften und Methoden definiert.
Properties werden oft als etwas bezeichnet , das ist (dh Knotenname ist "Buch").
Methods werden oft als etwas bezeichnet , das getan wird (dh löschen "Buch").
XML-DOM-Eigenschaften
Dies sind einige typische DOM Eigenschaften:
- x.nodeName - der Name x
- x.nodeValue - der Wert von x
- x.parentNode - der Elternknoten von x
- x.childNodes - die Kinderknoten von x
- x.attributes - die Attribute Knoten von x
Hinweis: In der Liste oben, x ist ein Knotenobjekt.
XML-DOM-Methoden
- x.getElementsByTagName( name ) - erhalten alle Elemente mit einem bestimmten Tag - Namen
- x.appendChild( node ) - legen Sie einen untergeordneten Knoten zu x
- x.removeChild( node ) - einen untergeordneten Knoten aus x entfernen
Hinweis: In der Liste oben, x ist ein Knotenobjekt.