Parsing und Serialisieren von XML

Manchmal müssen Sie XML-Inhalte analysieren und in einen DOM-Baum konvertieren oder umgekehrt einen vorhandenen DOM-Baum in XML serialisieren. In diesem Artikel werden wir die von der Webplattform bereitgestellten Objekte betrachten, die die häufigen Aufgaben des Serialisierens und Parsens von XML erleichtern.

XMLSerializer: Serialisiert DOM-Bäume und wandelt sie in Zeichenfolgen um, die XML enthalten.
DOMParser: Erstellt durch das Parsen einer Zeichenfolge, die XML enthält, einen DOM-Baum und gibt ein XMLDocument oder Document zurück, je nach den Eingabedaten.
fetch(): Lädt Inhalte von einer URL. XML-Inhalte werden als Textzeichenfolge zurückgegeben, die Sie mit DOMParser parsen können.
XMLHttpRequest: Der Vorläufer 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 Zeichenfolgen, die Adressen für bestimmte Abschnitte eines XML-Dokuments enthalten, und zur Lokalisierung von XML-Knoten basierend auf diesen Adressen.

Erstellen eines XML-Dokuments

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

Zeichenfolgen in DOM-Bäume parsen

Dieses Beispiel konvertiert ein XML-Fragment in einer Zeichenfolge in einen DOM-Baum mithilfe eines DOMParser:

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

Verwenden von fetch

Hier ist ein 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 Textzeichenfolge und verwendet dann DOMParser.parseFromString(), um ein XMLDocument zu erstellen.

Wenn das Dokument HTML ist, gibt der oben gezeigte Code ein Document zurück. Wenn das Dokument XML ist, ist das resultierende Objekt tatsächlich ein XMLDocument. Die beiden Typen sind im Wesentlichen gleich; der Unterschied ist hauptsächlich historisch, obwohl die Unterscheidung auch einige praktische Vorteile hat.

Hinweis: Es gibt tatsächlich auch eine HTMLDocument-Schnittstelle, aber sie ist nicht notwendigerweise ein eigenständiger Typ. In einigen Browsern ist sie das, während sie in anderen ein Alias für die Document-Schnittstelle ist.

Serialisieren eines XML-Dokuments

Mit einem Document können Sie den DOM-Baum des Dokuments mithilfe der Methode XMLSerializer.serializeToString() zurück in XML serialisieren.

Verwenden Sie die folgenden Methoden, um die Inhalte des im vorherigen Abschnitt erstellten XML-Dokuments zu serialisieren.

Serialisieren von DOM-Bäumen in Zeichenfolgen

Erstellen Sie zuerst einen DOM-Baum wie in Verwenden des Document Object Models beschrieben. Alternativ können Sie einen DOM-Baum verwenden, der mit 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);

Serialisieren von HTML-Dokumenten

Wenn das DOM, das Sie haben, ein HTML-Dokument ist, können Sie serializeToString() verwenden, aber es gibt eine einfachere Option: Verwenden Sie einfach die Element.innerHTML-Eigenschaft (wenn Sie nur die Nachkommen des angegebenen Knotens möchten) oder die Element.outerHTML-Eigenschaft, wenn Sie den Knoten und alle seine Nachkommen möchten.

const docInnerHtml = document.documentElement.innerHTML;

Als Ergebnis ist docInnerHtml eine Zeichenfolge, die das HTML der Inhalte des Dokuments enthält; das heißt, die Inhalte des <body>-Elements.

Sie können HTML, das dem <body> und seinen Nachkommen entspricht, mit diesem Code erhalten:

const docOuterHtml = document.documentElement.outerHTML;

Siehe auch

XPath
fetch()
XMLHttpRequest
Document, XMLDocument, und HTMLDocument