XML parsen und serialisieren

Manchmal müssen Sie Inhalte in XML parsen und in einen DOM-Baum umwandeln oder umgekehrt einen bestehenden DOM-Baum in XML serialisieren. In diesem Artikel schauen wir uns die Objekte an, die die Web-Plattform bereitstellt, um die üblichen Aufgaben des XML-Serialisierens und -Parsens zu erleichtern.

XMLSerializer: Serialisiert DOM-Bäume und wandelt sie in Zeichenfolgen um, die XML enthalten.
DOMParser: Erstellt einen DOM-Baum, indem eine Zeichenfolge, die XML enthält, geparst wird, und gibt ein XMLDocument oder ein Document zurück, je nach Eingabedaten.
fetch(): Lädt Inhalte von einer URL. XML-Inhalte werden als Zeichenfolge zurückgegeben, die 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 zum Erstellen von Zeichenfolgen, die Adressen für bestimmte Teile eines XML-Dokuments enthalten, und zum Lokalisieren 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).

Parsen von Zeichenfolgen in DOM-Bäume

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

Parsen von URL-adressierbaren Ressourcen in DOM-Bäume

Verwendung von fetch

Hier ist ein Codebeispiel, das eine URL-adressierbare XML-Datei liest und in einen DOM-Baum parst:

fetch("https://developer.mozilla.org/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 Zeichenfolge ab und verwendet dann DOMParser.parseFromString(), um ein XMLDocument zu erstellen.

Wenn das Dokument HTML ist, gibt der obige 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 größtenteils historisch, obwohl die Unterscheidung auch einige praktische Vorteile hat.

Hinweis: Es gibt tatsächlich auch eine HTMLDocument-Schnittstelle, aber sie ist nicht unbedingt 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

Angenommen, Sie haben ein Document, können Sie den DOM-Baum des Dokuments mithilfe der Methode XMLSerializer.serializeToString() wieder in XML serialisieren.

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

Serialisieren von DOM-Bäumen zu Zeichenfolgen

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

Serialisieren von HTML-Dokumenten

Wenn der DOM, den Sie haben, ein HTML-Dokument ist, können Sie serializeToString() verwenden, aber es gibt eine andere Option, die viele als einfacher empfinden: 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 wünschen.

const docInnerHtml = document.documentElement.innerHTML;

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

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

const docOuterHtml = document.documentElement.outerHTML;

Siehe auch

XPath
fetch()
XMLHttpRequest
Document, XMLDocument, und HTMLDocument

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden