DOM XML

Co to jest DOM?

Document Object Model (DOM) definiuje standardy dostępu i operacji na dokumentach:

„W3C Document Object Model (DOM) jest interfejsem niezależnym od platformy i języka, który pozwala programom i skryptom dynamicznie uzyskiwać dostęp do i aktualizować treść, strukturę i styl dokumentu.”

HTML DOM Definiuje standardowe metody dostępu i operacji na dokumentach HTML. Przedstawia dokument HTML jako strukturę drzewa.

DOM XML Definiuje standardowe metody dostępu i operacji na dokumentach XML. Przedstawia dokument XML jako strukturę drzewa.

Dla każdego dewelopera używającego HTML lub XML, zrozumienie DOM jest niezbędne.

HTML DOM

Wszystkie elementy HTML można uzyskać za pomocą HTML DOM.

Poniższy przykład zmienia wartość HTML elementu o id="demo":

Przykład

<h1 id="demo">To jest tytuł</h1>
<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello World!'">
Kliknij mnie!
</button>

Spróbuj sam

Możesz nauczyć się więcej o tym w naszym kursie JavaScript. HTML DOM Więcej informacji.

DOM XML

Każdy element XML można uzyskać za pomocą XML DOM.

Books.xml

<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
  <book category="美食">
    <title lang="zh">雅舍谈吃</title>
    <author>梁实秋</author>
    <year>2013</year>
    <price>35</price>
  </book>
  <book category="儿童">
    <title lang="zh">了不起的狐狸爸爸</title>
    <author>罗尔德·达尔</author>
    <year>2009</year>
    <price>10.00</price>
  </book>
</bookstore>

Ten kod przeszukuje tekst wartości pierwszego elementu <title> w dokumencie XML:

Przykład

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

XML DOM to standard dotyczący tego, jak uzyskać, zmienić, dodać i usunąć elementy XML.

Ten przykład ładuje ciąg znaków tekstowych do obiektu DOM XML i używa JavaScript do wyodrębniania informacji z niego:

Przykład

<html>
<body>
<p id="demo"></p>
<script>
var text, parser, xmlDoc;
text = "<bookstore><book>"
"<title>雅舍谈吃</title>" +
"<author>梁实秋</author>" +
"<year>2009</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>

Spróbuj sam

Nauczysz się o tym w naszym tutorialu XML DOM DOM XML Więcej treści.