Manchmal müssen Sie XML-Inhalte parsen und in einen DOM-Baum umwandeln oder umgekehrt, einen bestehenden DOM-Baum in XML serialisieren. In diesem Artikel betrachten wir die Objekte, die von der Webplattform bereitgestellt werden, um die gängigen Aufgaben des Serialisierens und Parsens von XML zu erleichtern.
XMLSerializer
Serialisiert DOM-Bäume und wandelt sie in Strings um, die XML enthalten.
DOMParser
Konstruiert einen DOM-Baum, indem er einen String, der XML enthält, analysiert und entsprechend den Eingabedaten ein XMLDocument oder Document zurückgibt.
fetch()
Lädt Inhalte von einer URL. XML-Inhalte werden als Textstring zurückgegeben, den Sie mit DOMParser parsen können.
XMLHttpRequest
Der Vorgänger von fetch(). Im Gegensatz zur fetch()-API kann XMLHttpRequest eine Ressource als Document über seine responseXML-Eigenschaft zurückgeben.
Eine Technologie zur Erstellung von Strings, die Adressen für bestimmte Teile eines XML-Dokuments enthalten und zum Auffinden von XML-Knoten basierend auf diesen Adressen verwendet werden.
Verwenden Sie eine der folgenden Methoden, um ein XML-Dokument zu erstellen (das eine Instanz von Document ist).
Dieses Beispiel wandelt ein XML-Fragment in einem String in einen DOM-Baum um, indem es einen DOMParser verwendet:
const xmlStr = '<q id="a"><span id="b">hey!</span></q>';
const parser = new DOMParser();
const doc = parser.parseFromString(xmlStr, "application/xml");
// print the name of the root element or error message
const errorNode = doc.querySelector("parsererror");
if (errorNode) {
console.log("error while parsing");
} else {
console.log(doc.documentElement.nodeName);
}
Hier ist Beispielcode, der eine URL-adressierbare XML-Datei liest und in einen DOM-Baum parst:
fetch("example.xml")
.then((response) => response.text())
.then((text) => {
const parser = new DOMParser();
const doc = parser.parseFromString(text, "text/xml");
console.log(doc.documentElement.nodeName);
});
Dieser Code holt die Ressource als Textstring und verwendet dann DOMParser.parseFromString(), um ein XMLDocument zu konstruieren.
Wenn das Dokument HTML ist, gibt der oben gezeigte Code ein Document zurück. Ist das Dokument XML, ist das resultierende Objekt tatsächlich ein XMLDocument. Die beiden Typen sind im Wesentlichen gleich; der Unterschied ist gröÃtenteils historisch, obwohl die Unterscheidung auch einige praktische Vorteile bietet.
Hinweis: Es gibt tatsächlich ein HTMLDocument-Interface, aber es ist nicht unbedingt ein unabhängiger Typ. In einigen Browsern ist es das, während es in anderen ein Alias für das Document-Interface ist.
Angenommen, Sie haben ein Document, können Sie den DOM-Baum des Dokuments mit der Methode XMLSerializer.serializeToString() zurück in XML serialisieren.
Verwenden Sie die folgenden Ansätze, um die Inhalte des im vorherigen Abschnitt erstellten XML-Dokuments zu serialisieren.
DOM-Bäume zu Strings serialisierenErstellen Sie zunächst einen DOM-Baum, wie in Die Verwendung des Document Object Model beschrieben. Alternativ verwenden Sie einen DOM-Baum, der von fetch() erhalten wurde.
Um den DOM-Baum doc in XML-Text zu serialisieren, rufen Sie XMLSerializer.serializeToString() auf:
const serializer = new XMLSerializer();
const xmlStr = serializer.serializeToString(doc);
Wenn der DOM, den Sie haben, ein HTML-Dokument ist, können Sie serializeToString() verwenden, aber es gibt eine weitere Option, die viele einfacher finden: Verwenden Sie die Eigenschaft Element.innerHTML (wenn Sie nur die Nachkommen des angegebenen Knotens möchten) oder die Eigenschaft Element.outerHTML, wenn Sie den Knoten und alle seine Nachkommen möchten.
const docInnerHtml = document.documentElement.innerHTML;
Als Ergebnis enthält docInnerHtml einen String, der das HTML der Inhalte des Dokuments enthält; das heiÃt, den Inhalt des <body>-Elements.
Sie können HTML erhalten, das zu <body> und seinen Nachkommen gehört, mit diesem Code:
const docOuterHtml = document.documentElement.outerHTML;
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4