Web Development

Wir haben schon glernt wie man mit Javascript das Document Object Model (DOM) eines HTML-Dokuments manipuliert. Auch ein XML Dokument hat ein DOM, man kann es mit den gleichen Methoden manipulieren.

Manipulieren des DOM

var container = document.getElementById('container');
div = document.createElement("div");
container.appendChild( div );

In folgendem Beispiel ist XML (hier: SVG) direkt in HTML eingebettet. Der SVG-Tag kann genau so gefunden werden wie ein HTML tag. Der einzige Unterschied ergibt sich beim Erzeugen eines neuen Elements: hier muss die Methode createElementNS verwendet werden.

var svg = document.getElementsByTagName('svg')[0];
circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute("cx", 10);
circle.setAttribute("cy", 10);
circle.setAttribute("r", 10);
svg.appendChild( circle );  

demo

Laden von XML

Zum Laden von XML-Dateien gibt es ein eigenes Objekt, dessen Lade-Methode synchron oder asynchron verwendet werden kann. Wir verwenden hier die synchrone Variante, und beschäftigen uns im Kapitel AJAX mit der asynchronenen Variante.

Die Methode open legt fest: die HTTP Methoden, die URL, und ob asynchron geladen werden soll. Mit der Methode send wird der Request abgeschickt, hier könnte man noch den HTTP-Request Body als String übergeben.

xhttp = new XMLHttpRequest();
xhttp.open("GET", "stark.xml", false);
xhttp.send(null);

xmlDoc = xhttp.responseXML;
var first = xmlDoc.getElementsByTagName("person")[0];
document.getElementById('output').value = first.firstChild.nodeValue;

demo