new ProcessingInstruction() — Methode · JavaScript-Referenz

Signatur

new ProcessingInstruction()

Beschreibung

Ein ProcessingInstruction-Knoten steht für eine XML-Verarbeitungsanweisung der Form <?ziel daten?>. Das bekannteste Beispiel ist <?xml-stylesheet href="style.css" type="text/css"?>. Das Interface erbt von CharacterData und damit von Node. Es hat die Eigenschaft target (nur lesbar) sowie data für den Inhalt.

Wichtig: Im Gegensatz zu den verwandten Klassen Text und Comment gibt es in der DOM-Spezifikation keinen öffentlichen Konstruktor für ProcessingInstruction. Ein Aufruf von new ProcessingInstruction() wirft in allen Browsern einen TypeError („Illegal constructor“).

Neue Verarbeitungsanweisungen erzeugt man mit der Fabrikmethode document.createProcessingInstruction(target, data). Den erzeugten Knoten fügt man danach wie jeden anderen Knoten ein, etwa mit insertBefore(), append() oder prepend(). Das ist vor allem in XML-Dokumenten sinnvoll, zum Beispiel um einem SVG- oder XML-Dokument ein Stylesheet zuzuordnen, bevor man es mit XMLSerializer in einen Text umwandelt.

Beispiele

Direkter Konstruktor-Aufruf schlägt fehl

try {
  const pi = new ProcessingInstruction();
} catch (err) {
  console.log(err instanceof TypeError, err.message);
}

true "Illegal constructor" // Die genaue Meldung hängt vom Browser ab

Richtig: Knoten über createProcessingInstruction erzeugen

const doc = new DOMParser().parseFromString('<notizen><notiz>Hallo</notiz></notizen>', 'application/xml');

const pi = doc.createProcessingInstruction(
  'xml-stylesheet',
  'href="notizen.css" type="text/css"'
);

// Vor dem Wurzelelement einfügen
doc.insertBefore(pi, doc.documentElement);

console.log(pi instanceof ProcessingInstruction, pi.target, pi.data);
console.log(new XMLSerializer().serializeToString(doc));

true "xml-stylesheet" "href=\"notizen.css\" type=\"text/css\"" <?xml-stylesheet href="notizen.css" type="text/css"?><notizen><notiz>Hallo</notiz></notizen>

Vorhandene Verarbeitungsanweisungen auslesen

const xml = '<?xml-stylesheet href="a.xsl" type="text/xsl"?><root/>';
const doc = new DOMParser().parseFromString(xml, 'application/xml');

const pis = [...doc.childNodes].filter(
  (n) => n.nodeType === Node.PROCESSING_INSTRUCTION_NODE
);

pis.forEach((pi) => console.log(`${pi.target}: ${pi.data}`));

xml-stylesheet: href="a.xsl" type="text/xsl"

// Wichtig · Fallstricke

Kein öffentlicher Konstruktor: new ProcessingInstruction() wirft immer einen TypeError. Das ist anders als bei new Text() und new Comment(), die es gibt. Verwenden Sie document.createProcessingInstruction().
createProcessingInstruction() wirft einen DOMException vom Typ InvalidCharacterError, wenn target kein gültiger XML-Name ist oder data die Zeichenfolge ?> enthält.
In HTML-Dokumenten parst der Browser <?…?> als Kommentar und nicht als Verarbeitungsanweisung. Sinnvoll sind diese Knoten deshalb nur in XML-Dokumenten, etwa aus DOMParser mit application/xml oder aus document.implementation.createDocument().
Die XML-Deklaration <?xml version="1.0"?> ist keine Verarbeitungsanweisung und erscheint nicht als DOM-Knoten.
Das Interface ProcessingInstruction und createProcessingInstruction() werden von allen aktuellen Browsern unterstützt.

Siehe auch

ProcessingInstruction Document.createProcessingInstruction() ProcessingInstruction.target CharacterData XMLSerializer DOMParser new GPUOutOfMemoryError()