XML DOM vejledning

Hvad er DOM?

DOM definerer standarder for adgang og manipulation af dokumenter:

“W3C Dokumentobjektmodel (DOM) er en platformuafhængig og sprogneutral grænseflade, der muliggør dynamisk adgang til og opdatering af dokumentets indhold, struktur og stil.”

HTML DOM definerer standardmetoder til at tilgå og operere med HTML-dokumenter. Det præsenterer HTML-dokumenter som en træstruktur.

XML DOM definerer standardmetoder til at tilgå og operere med XML-dokumenter. Det præsenterer XML-dokumenter som en træstruktur.

For enhver, der bruger HTML eller XML, er det nødvendigt at forstå DOM.

HTML DOM

Alle HTML-elementer kan tilgås gennem HTML DOM.

Eksempel 1

Dette eksempel ændrer værdien af HTML-elementet med id="demo":

<h1 id="demo"> Dette er titlen </h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

Try it yourself

Eksempel 2

Dette eksempel ændrer værdien af den første <h1> element i HTML-dokumentet:

<h1> Dette er titlen </h1>
<h1> Dette er titlen </h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script>

Try it yourself

Bemærk:Selvom HTML-dokumentet kun indeholder en <h1> element, skal du stadig specificere arrayindekset [0], fordi getElementsByTagName() metoden altid returnerer et array.

Du kan lære mere om HTML DOM i vores JavaScript-tur.

XML DOM

Alle XML-elementer kan tilgås gennem XML DOM.

XML DOM er:

  • XML's standard objektmodel
  • XML's standard programmergrænseflade
  • uafhængig af platform og sprog
  • W3C-standarder

På den anden side: XML DOM er en standard for, hvordan man henter, ændrer, tilføjer eller sletter XML-elementer.

Få XML-elementets værdi

Dette eksempel søger efter teksten i den første <title> element i XML-dokumentet:

Example

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

Indlæs XML-fil

Den XML-fil, der bruges i dette eksempel, er books.xml.

Dette eksemplet læser "books.xml" ind i xmlDoc og søger efter tek斯特 værdien af den første <title> element i books.xml:

Example

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

Try it yourself

Example Explanation

  1. xmlDoc - XML DOM object created by the parser
  2. getElementsByTagName("title")[0] - Get the first <title> element
  3. childNodes[0] - First child node of <title> element
  4. nodeValue - Node value (text itself)

Load XML string

This example loads a text string into an XML DOM object and extracts information from it using JavaScript:

Example

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

Try it yourself

Programming Interface

DOM models XML as a set of node objects. Nodes can be accessed using JavaScript or other programming languages. In this tutorial, we use JavaScript.

The programming interface of DOM is defined by a set of standard properties and methods.

PropertiesGenerally refers to what something is (such as nodename is "book").

MethodsGenerally refers to what can be done (such as deleting the action of "book").

XML DOM properties

These are some typical DOM properties:

  • x.nodeName - x's name
  • x.nodeValue - x's value
  • x.parentNode - x's parent node
  • x.childNodes - x's child node
  • x.attributes - x's attribute node

Bemærk:I listen to the list above, x is a node object.

XML DOM metoder

  • x.getElementsByTagName(name) - Få alle elementer med angivet etiketnavn
  • x.appendChild(node) - Indsæt en undernode i x
  • x.removeChild(node) - Fjern undernode fra x

Bemærk:I listen ovenfor,x Er en node objekt.