XML parsen und serialisieren

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.
XPath: 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.

Ein XML-Dokument erstellen

Verwenden Sie eine der folgenden Methoden, um ein XML-Dokument zu erstellen (das eine Instanz von Document ist).

Strings in DOM-Bäume parsen

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);
}

URL-adressierbare Ressourcen in DOM-Bäume parsen

Verwendung von fetch

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.

Ein XML-Dokument serialisieren

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 serialisieren

Erstellen 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);

HTML-Dokumente serialisieren

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;

Siehe auch

XPath
fetch()
XMLHttpRequest
Document, XMLDocument und HTMLDocument