Samouczek XML DOM
XML DOM
Co to jest DOM?
DOM definiuje standard dostępu do dokumentów i manipulowania nimi:
HTML DOM definiuje standardowy sposób dostępu do dokumentów HTML i manipulowania nimi. Przedstawia dokument HTML jako strukturę drzewa.
XML DOM definiuje standardowy sposób uzyskiwania dostępu do dokumentów XML i manipulowania nimi. Przedstawia dokument XML jako strukturę drzewa.
Zrozumienie DOM jest koniecznością dla każdego, kto pracuje z HTML lub XML.
DOM HTML
Dostęp do wszystkich elementów HTML można uzyskać poprzez HTML DOM.
Ten przykład zmienia wartość elementu HTML na id="demo":
Przykład
<h1 id="demo">This is a Heading</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
Ten przykład zmienia wartość pierwszego elementu <h1> w dokumencie HTML:
Przykład
<h1>This is a Heading</h1>
<h1>This is a Heading</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script>
Uwaga: Nawet jeśli dokument HTML zawiera tylko JEDEN element <h1>, nadal musisz określić indeks tablicy [0], ponieważ metoda getElementsByTagName() zawsze zwraca tablicę.
Możesz dowiedzieć się więcej o HTML DOM w naszym samouczku JavaScript .
XML DOM
Dostęp do wszystkich elementów XML można uzyskać poprzez XML DOM.
DOM XML to:
- Standardowy model obiektowy dla XML
- Standardowy interfejs programistyczny dla XML
- Niezależność od platformy i języka
- Standard W3C
Innymi słowy: XML DOM to standard pobierania, zmiany, dodawania lub usuwania elementów XML.
Uzyskaj wartość elementu XML
Ten kod pobiera wartość tekstową pierwszego elementu <title> w dokumencie XML:
Przykład
txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
Ładowanie pliku XML
Plik XML użyty w poniższych przykładach to books.xml .
Ten przykład odczytuje "books.xml" do xmlDoc i pobiera wartość tekstową 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>
Przykład wyjaśniony
- xmlDoc - obiekt XML DOM utworzony przez parser.
- getElementsByTagName("title")[0] - pobierz pierwszy element <title>
- childNodes[0] - pierwsze dziecko elementu <title> (węzeł tekstowy)
- nodeValue - wartość węzła (sam tekst)
Ładowanie ciągu XML
Ten przykład ładuje ciąg tekstowy do obiektu XML DOM i wyodrębnia z niego informacje za pomocą JavaScript:
Przykład
<html>
<body>
<p id="demo"></p>
<script>
var text, parser,
xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday
Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</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>
Interfejs programowania
DOM modeluje XML jako zbiór obiektów węzłów. Dostęp do węzłów można uzyskać za pomocą JavaScript lub innych języków programowania. W tym tutorialu używamy JavaScript.
Interfejs programistyczny do DOM jest zdefiniowany przez zestaw standardowych właściwości i metod.
Właściwości są często określane jako coś, co jest (np. nazwa węzła to „książka”).
Metody są często określane jako coś, co zostało zrobione (np. usuń „książkę”).
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ł rodzicielski x
- x.childNodes - węzły potomne x
- x.attributes - węzły atrybutów x
Uwaga: Na powyższej liście x jest obiektem węzła.
Metody XML DOM
- x.getElementsByTagName( name ) - pobierz wszystkie elementy o określonej nazwie tagu
- x.appendChild( node ) - wstaw podrzędny węzeł do x
- x.removeChild( node ) - usuń węzeł podrzędny z x
Uwaga: Na powyższej liście x jest obiektem węzła.