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 who uses HTML or XML.

HTML DOM

All HTML elements can be accessed through the HTML DOM.

Exempel 1

Denna exempel ändrar värdet för HTML-elementet med id="demo":

<h1 id="demo">Detta är en rubrik</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

Prova själv

Exempel 2

Denna exempel ändrar värdet för det första <h1>-elementet i HTML-dokumentet:

<h1>Detta är en rubrik</h1>
<h1>Detta är en rubrik</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script>

Prova själv

Observera:Även om HTML-dokumentet bara innehåller en <h1>-element måste du specificera arrayindex [0], eftersom getElementsByTagName()-metoden alltid returnerar en array.

Du kan lära dig mer om HTML DOM i vår JavaScript-tutorial.

XML DOM

Alla XML-element kan nås via XML DOM.

XML DOM är:

  • XML:s standardobjektmodell
  • XML:s standardprogrammeringsgränssnitt
  • oberoende av plattform och språk
  • W3C-standard

Det vill säga: XML DOM är en standard för hur man hämtar, ändrar, lägger till eller tar bort XML-element.

Hämta värdet för XML-elementet

Denna exempel söker efter textvärdet för den första <title>-elementet i XML-dokumentet:

Exempel

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

Ladda XML-fil

Den XML-fil som används i detta exempel är books.xml.

Denna exempel visar hur "books.xml" läses in i xmlDoc och söker efter textvärdet för den första <title>-elementet i books.xml:

Exempel

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

Prova själv

Exempel förklaring

  1. xmlDoc - XML DOM-objekt skapat av parsern
  2. getElementsByTagName("title")[0] - Hämta det första <title>-elementet
  3. childNodes[0] - Den första undernoden till <title>-elementet (textnod)
  4. nodeValue - Nodens värde (texten själv)

Ladda XML-sträng

Detta exempel laddar en textsträng till en XML DOM-objekt och extraherar information från den med JavaScript:

Exempel

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

Prova själv

Programmeringsgränssnitt

DOM modellerar XML som en uppsättning nodobjekt. Noder kan nås med JavaScript eller annat programmeringsspråk. I denna tutorial använder vi JavaScript.

DOM:s programmeringsgränssnitt definieras av en uppsättning standardegenskaper och metoder.

EgenskaperDetta betyder vanligtvis vad något är (t.ex. nodenamn är "book").

MetoderDetta betyder vanligtvis vad som kan göras (t.ex. att ta bort handlingen "book").

XML DOM-egenskaper

Detta är några typiska DOM-egenskaper:

  • x.nodeName - x:s namn
  • x.nodeValue - x:s värde
  • x.parentNode - x:s föräldernod
  • x.childNodes - x:s undernoder
  • x.attributes - egenskapsnoden för x

Kommentar:I den ovanstående listan är x en nodobjekt.

XML DOM metoder

  • x.getElementsByTagName(name) - Hämta alla element med specifik etikett
  • x.appendChild(node) - Lägg till en undernod till x
  • x.removeChild(node) - Ta bort undernod från x

Kommentar:I listan ovan,x Det är ett nodobjekt.