XML DOM Tutorial

What is DOM?

The DOM defines standard methods for accessing and manipulating documents:

The W3C Document Object Model (DOM) is a platform- and language-independent interface that allows programs and scripts to dynamically access and update the content, structure, and style of documents.

The HTML DOM defines standard methods for accessing and manipulating HTML documents. It presents HTML documents as a tree structure.

The XML DOM defines standard methods for accessing and manipulating XML documents. It presents XML documents as a tree structure.

Understanding DOM is essential for anyone using HTML or XML.

HTML DOM

All HTML elements can be accessed through the HTML DOM.

Voorbeeld 1

Dit voorbeeld wijzigt de waarde van het HTML-element met id="demo":

<h1 id="demo"> Dit is de titel </h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

Probeer het zelf

Voorbeeld 2

Dit voorbeeld wijzigt de waarde van het eerste <h1> element in het HTML-document:

<h1> Dit is de titel </h1>
<h1> Dit is de titel </h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script>

Probeer het zelf

Opmerking:Zelfs als het HTML-document alleen een <h1> element bevat, moet je de arrayindex [0] specificeren omdat de getElementsByTagName() methode altijd een array retourneert.

Je kunt meer leren over HTML DOM in onze JavaScript-tutorial.

XML DOM

Alle XML-elementen zijn toegankelijk via XML DOM.

XML DOM is:

  • Standaard objectmodel voor XML
  • Standaard programmabibliotheek voor XML
  • onafhankelijk van platform en taal
  • W3C-standaard

In andere woorden: XML DOM is een standaard voor hoe je XML-elementen kunt ophalen, wijzigen, toevoegen of verwijderen.

Ophalen van de waarde van een XML-element

Deze voorbeeld zoekt naar de tekstwaarde van het eerste <title> element in het XML-document:

Voorbeeld

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

Laden van XML-bestand

Het XML-bestand dat in dit voorbeeld wordt gebruikt is books.xml.

Deze voorbeeld leest "books.xml" in xmlDoc in en zoekt naar de tekstwaarde van het eerste <title> element in books.xml:

Voorbeeld

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

Probeer het zelf

Voorbeelduitslegging

  1. xmlDoc - Door de parser gecreëerde XML DOM-object
  2. getElementsByTagName("title")[0] - Haal het eerste <title>-element op
  3. childNodes[0] - De eerste onderliggende knooppunt van het <title>-element (tekstknooppunt)
  4. nodeValue - De waarde van het knooppunt (de tekst zelf)

Laad XML-tekst

Dit voorbeeld laadt een tekststring in een XML DOM-object en haalt informatie eruit met behulp van JavaScript:

Voorbeeld

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

Probeer het zelf

Programmeerbibliotheek

DOM modelliseert XML als een set knooppuntenobjecten. Knooppunten kunnen worden toegang verkregen met behulp van JavaScript of andere programmeertalen. In deze handleiding gebruiken we JavaScript.

De programmabibliotheek van DOM wordt gedefinieerd door een set standaard eigenschappen en methoden.

EigenschappenDit verwijst meestal naar wat iets is (bijvoorbeeld nodenaam is "book").

MethodenDit verwijst meestal naar wat er gedaan kan worden (bijvoorbeeld het verwijderen van de actie "book").

XML DOM-eigenschappen

Dit zijn enkele typische DOM-eigenschappen:

  • x.nodeName - de naam van x
  • x.nodeValue - de waarde van x
  • x.parentNode - de ouderknooppunt van x
  • x.childNodes - de onderliggende knooppunten van x
  • x.attributes - de eigenschapsknooppunten van x

Opmerking:In de bovenstaande lijst is x een knooppuntobject.

XML DOM Methoden

  • x.getElementsByTagName(name) - Haal alle elementen met de specifieke tagnaam op
  • x.appendChild(node) - Voeg een onderliggende knooppunt toe aan x
  • x.removeChild(node) - Verwijder een onderliggende knooppunt van x

Opmerking:In de bovenstaande lijst,x Is een knooppuntobject.