XML DOM Tutoriaal
XML DOM
Wat is die DOM?
Die DOM definieer 'n standaard vir toegang tot en manipulering van dokumente:
Die HTML DOM definieer 'n standaard manier vir toegang tot en manipulering van HTML-dokumente. Dit bied 'n HTML-dokument as 'n boomstruktuur aan.
Die XML DOM definieer 'n standaard manier om toegang tot XML-dokumente te verkry en te manipuleer. Dit bied 'n XML-dokument as 'n boomstruktuur aan.
Om die DOM te verstaan is 'n moet vir almal wat met HTML of XML werk.
Die HTML DOM
Alle HTML-elemente kan verkry word deur die HTML DOM.
Hierdie voorbeeld verander die waarde van 'n HTML-element met id="demo":
Voorbeeld
<h1 id="demo">This is a Heading</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
Hierdie voorbeeld verander die waarde van die eerste <h1>-element in 'n HTML-dokument:
Voorbeeld
<h1>This is a Heading</h1>
<h1>This is a Heading</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script>
Let wel: Selfs as die HTML-dokument slegs EEN <h1>-element bevat, moet jy steeds die skikking-indeks [0] spesifiseer, want die getElementsByTagName()-metode gee altyd 'n skikking terug.
Jy kan baie meer leer oor die HTML DOM in ons JavaScript-tutoriaal .
Die XML DOM
Alle XML-elemente kan verkry word deur die XML DOM.
Die XML DOM is:
- 'n Standaard objekmodel vir XML
- 'n Standaard programmeringskoppelvlak vir XML
- Platform- en taalonafhanklik
- 'n W3C-standaard
Met ander woorde: Die XML DOM is 'n standaard vir hoe om XML-elemente te kry, te verander, by te voeg of uit te vee.
Kry die waarde van 'n XML-element
Hierdie kode haal die tekswaarde van die eerste <title>-element in 'n XML-dokument op:
Voorbeeld
txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
Laai tans 'n XML-lêer
Die XML-lêer wat in die voorbeelde hieronder gebruik word, is books.xml .
Hierdie voorbeeld lees "books.xml" in xmlDoc en haal die tekswaarde van die eerste <title>-element in books.xml op:
Voorbeeld
<!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>
Voorbeeld Verduidelik
- xmlDoc - die XML DOM-objek wat deur die ontleder geskep is.
- getElementsByTagName("title")[0] - kry die eerste <title>-element
- childNodes[0] - die eerste kind van die <title>-element (die teksnodus)
- nodeValue - die waarde van die node (die teks self)
Laai tans 'n XML-string
Hierdie voorbeeld laai 'n teksstring in 'n XML DOM-objek, en onttrek die inligting daaruit met JavaScript:
Voorbeeld
<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>
Programmering Interface
Die DOM modelleer XML as 'n stel nodus-objekte. Die nodusse kan verkry word met JavaScript of ander programmeertale. In hierdie tutoriaal gebruik ons JavaScript.
Die programmeringskoppelvlak na die DOM word gedefinieer deur 'n stel standaard eienskappe en metodes.
Daar word dikwels na eienskappe verwys as iets wat is (maw nodenaam is "boek").
Daar word dikwels na metodes verwys as iets wat gedoen word (dws skrap "boek").
XML DOM-eienskappe
Dit is 'n paar tipiese DOM-eienskappe:
- x.nodeName - die naam van x
- x.nodeValue - die waarde van x
- x.parentNode - die ouernodus van x
- x.childNodes - die kind nodes van x
- x.attributes - die eienskappe nodes van x
Let wel: In die lys hierbo is x 'n nodus voorwerp.
XML DOM-metodes
- x.getElementsByTagName( name ) - kry alle elemente met 'n gespesifiseerde merkernaam
- x.appendChild( node ) - voeg 'n kind node by x in
- x.removeChild( node ) - verwyder 'n kind node van x
Let wel: In die lys hierbo is x 'n nodus voorwerp.