XML DOM kurs

Czym jest DOM?

DOM definiuje standardowe metody dostępu i operacji na dokumentach:

„W3C Document Object Model (DOM) jest interfejsem niezależnym od platformy i języka, który pozwala na dynamiczny dostęp i aktualizację zawartości, struktury i stylu dokumentu przez programy i skrypty.”

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

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

Rozumienie DOM jest obowiązkowe dla każdego, kto używa HTML lub XML.

HTML DOM

Wszystkie elementy HTML można uzyskać dostęp do za pomocą HTML DOM.

Przykład 1

Ten przykład zmienia wartość elementu HTML o id="demo":

<h1 id="demo">to tytuł</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

Spróbuj sam

Przykład 2

Ten przykład zmienia wartość pierwszego elementu <h1> w dokumencie HTML:

<h1>to tytuł</h1>
<h1>to tytuł</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script>

Spróbuj sam

Uwaga:Nawet jeśli dokument HTML zawiera tylko jeden element <h1>, musisz podać indeks tablicy [0], ponieważ metoda getElementsByTagName() zawsze zwraca tablicę.

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

DOM XML

wszystkie elementy XML można uzyskać za pomocą XML DOM.

XML DOM to:

  • Standardowy model obiektów XML
  • Standardowe interfejsy programistyczne XML
  • niezależne od platformy i języka
  • Standardy W3C

Innymi słowy: XML DOM to standard dotyczący sposobu pobierania, modyfikowania, dodawania lub usuwania elementów XML.

Pobieranie wartości elementu XML

Ten przykład wyszukuje wartość tekstu pierwszego elementu <title> w dokumencie XML:

Przykład

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

Ładowanie pliku XML

Plik XML użyty w tym przykładzie to books.xml.

Ten przykład czyta "books.xml" do xmlDoc i wyszukuje wartość tekstu pierwszego elementu <title> w books.xml:

Przykład

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

Spróbuj sam

Wyjaśnienie przykładu

  1. xmlDoc - Obiekt XML DOM utworzony przez parsera
  2. getElementsByTagName("title")[0] - Pobranie pierwszego elementu <title>
  3. childNodes[0] - Pierwszy podwęzeł elementu <title> (węzeł tekstowy)
  4. nodeValue - Wartość węzła (sam tekst)

Ładowanie ciągu XML

Ten przykład ładuje ciąg tekstowy do obiektu DOM XML i używa JavaScript do wyodrębnienia informacji z niego:

Przykład

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

Spróbuj sam

Interfejs programowania

DOM modeluje XML jako zestaw obiektów węzłów. Można do nich dostęp uzyskać za pomocą JavaScript lub innych języków programowania. W tym kursie używamy JavaScript.

Interfejs programowania DOM definiuje zestaw standardowych właściwości i metod.

AtrybutyZwykle oznacza, co coś jest (np. nodename to "book").

MetodyZwykle oznacza, co można zrobić (np. usunięcie akcji "book").

Właściwości XML DOM

Oto kilka typowych właściwości DOM:

  • x.nodeName - nazwa x
  • x.nodeValue - wartość x
  • x.parentNode - węzeł rodzica x
  • x.childNodes - węzły potomków x
  • x.attributes - węzły atrybutów x

Uwaga:W liście powyżej, x to obiekt węzła.

Metody XML DOM

  • x.getElementsByTagName(name) - Uzyskaj wszystkie elementy o określonej nazwie etykiety
  • x.appendChild(node) - Wstaw podwęzeł do x
  • x.removeChild(node) - Usuń podwęzeł z x

Uwaga:W liście powyżej:x Jest to obiekt węzła.