XML DOM- zelfstudie
XML-DOM
Wat is de DOM?
De DOM definieert een standaard voor het openen en manipuleren van documenten:
De HTML DOM definieert een standaardmanier voor toegang tot en manipulatie van HTML-documenten. Het presenteert een HTML-document als een boomstructuur.
De XML DOM definieert een standaardmanier voor toegang tot en manipulatie van XML-documenten. Het presenteert een XML-document als een boomstructuur.
Het begrijpen van de DOM is een must voor iedereen die met HTML of XML werkt.
De HTML DOM
Alle HTML-elementen zijn toegankelijk via de HTML DOM.
Dit voorbeeld wijzigt de waarde van een HTML-element met id="demo":
Voorbeeld
<h1 id="demo">This is a Heading</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
Dit voorbeeld wijzigt de waarde van het eerste <h1> element in een HTML-document:
Voorbeeld
<h1>This is a Heading</h1>
<h1>This is a Heading</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script>
Opmerking: zelfs als het HTML-document slechts EEN <h1>-element bevat, moet u toch de array-index [0] specificeren, omdat de methode getElementsByTagName() altijd een array retourneert.
U kunt veel meer leren over de HTML DOM in onze JavaScript-tutorial .
De XML DOM
Alle XML-elementen zijn toegankelijk via de XML DOM.
De XML-DOM is:
- Een standaard objectmodel voor XML
- Een standaard programmeerinterface voor XML
- Platform- en taalonafhankelijk
- Een W3C-standaard
Met andere woorden: de XML DOM is een standaard voor het ophalen, wijzigen, toevoegen of verwijderen van XML-elementen.
De waarde van een XML-element verkrijgen
Deze code haalt de tekstwaarde op van het eerste <title>-element in een XML-document:
Voorbeeld
txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
Een XML-bestand laden
Het XML-bestand dat in de onderstaande voorbeelden wordt gebruikt, is books.xml .
Dit voorbeeld leest "books.xml" in xmlDoc en haalt de tekstwaarde op van het eerste <title>-element in books.xml:
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 uitgelegd
- xmlDoc - het XML DOM-object dat door de parser is gemaakt.
- getElementsByTagName("title")[0] - haal het eerste <title>-element op
- childNodes[0] - het eerste onderliggende element van het <title>-element (het tekstknooppunt)
- nodeValue - de waarde van het knooppunt (de tekst zelf)
Een XML-string laden
Dit voorbeeld laadt een tekenreeks in een XML DOM-object en haalt de informatie eruit 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>
Programmeerinterface
De DOM modelleert XML als een set knooppuntobjecten. De nodes zijn toegankelijk met JavaScript of andere programmeertalen. In deze tutorial gebruiken we JavaScript.
De programmeerinterface naar de DOM wordt gedefinieerd door een set standaardeigenschappen en -methoden.
Eigenschappen worden vaak aangeduid als iets dat is (dwz knooppuntnaam is "boek").
Methoden worden vaak aangeduid als iets dat is gedaan (dwz "boek" verwijderen).
XML DOM-eigenschappen
Dit zijn enkele typische DOM-eigenschappen:
- x.nodeName - de naam van x
- x.nodeValue - de waarde van x
- x.parentNode - het bovenliggende knooppunt van x
- x.childNodes - de onderliggende knooppunten van x
- x.attributes - de attributenknooppunten van x
Opmerking: In de bovenstaande lijst is x een knooppuntobject.
XML DOM-methoden
- x.getElementsByTagName( name ) - haal alle elementen op met een gespecificeerde tagnaam
- x.appendChild( node ) - voeg een onderliggende node toe aan x
- x.removeChild( node ) - verwijder een onderliggende node uit x
Opmerking: In de bovenstaande lijst is x een knooppuntobject.