Start · Sprachen · JavaScript · Referenz · ProcessingInstruction

ProcessingInstruction

Schnittstelle

Stellt einen Verarbeitungsanweisungs-Knoten (<code>&lt;?target data?&gt;</code>) dar, der Anweisungen für eine bestimmte Anwendung enthält und von anderen ignoriert wird.

seit JavaScript Baseline: alle Browser (DOM Level 1) Kategorie: webapi

Signatur

interface ProcessingInstruction extends CharacterData

Beschreibung

ProcessingInstruction steht für eine Verarbeitungsanweisung (engl. Processing Instruction, kurz PI) in einem XML-Dokument, z. B. <?xml-stylesheet href="style.css" type="text/css"?>. Solche Knoten enthalten Anweisungen für eine bestimmte Anwendung. Programme, die mit der Anweisung nichts anfangen können, ignorieren sie einfach. Im DOM haben sie den nodeType 7 (Node.PROCESSING_INSTRUCTION_NODE).

Die Schnittstelle erbt von CharacterData und damit auch von Node. Wichtige Eigenschaften sind:

  • target (nur lesbar): der Name der Zielanwendung, also der Teil direkt nach <?. Er ist identisch mit nodeName.
  • data (von CharacterData geerbt): der Inhalt nach dem Ziel, les- und schreibbar.
  • sheet (über LinkStyle): bei xml-stylesheet-Anweisungen das zugehörige CSSStyleSheet oder null.

Einen Konstruktor gibt es nicht. Neue Knoten erzeugt man mit document.createProcessingInstruction(target, data). In der Praxis braucht man die Schnittstelle vor allem beim Erzeugen, Auswerten oder Umschreiben von XML-Dokumenten, etwa für SVG, RSS/Atom-Feeds oder Office-XML. Ein weiteres Beispiel ist das Einbinden von XSLT- oder CSS-Stylesheets per xml-stylesheet.

Parameter

Name Typ Default Beschreibung
$target Pflicht string Parameter von document.createProcessingInstruction(): der Name der Zielanwendung, z. B. "xml-stylesheet". Er muss ein gültiger XML-Name sein.
$data Pflicht string Parameter von document.createProcessingInstruction(): der Inhalt der Anweisung. Er darf die Zeichenfolge ?> nicht enthalten.

Rückgabewert

Typ
ProcessingInstruction
Beschreibung
Einen neuen ProcessingInstruction-Knoten, der noch nicht im Dokument hängt. Man fügt ihn z. B. mit insertBefore() oder prepend() ein.

Beispiele

xml-stylesheet-Anweisung erzeugen und serialisieren

// Neues XML-Dokument mit Wurzelelement <root> anlegen
const doc = document.implementation.createDocument(null, 'root', null);

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

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

console.log(pi.nodeType === Node.PROCESSING_INSTRUCTION_NODE);
console.log(new XMLSerializer().serializeToString(doc));
true <?xml-stylesheet href="style.css" type="text/css"?><root/>

Alle Verarbeitungsanweisungen eines XML-Dokuments auslesen

const xml = `<?xml version="1.0"?>
<?xml-stylesheet href="feed.xsl" type="text/xsl"?>
<feed><?app-cache ttl="3600"?><title>News</title></feed>`;

const doc = new DOMParser().parseFromString(xml, 'application/xml');

const walker = doc.createTreeWalker(
  doc,
  NodeFilter.SHOW_PROCESSING_INSTRUCTION
);

const pis = [];
while (walker.nextNode()) {
  const { target, data } = walker.currentNode;
  pis.push({ target, data });
}
console.log(pis);
[ { target: 'xml-stylesheet', data: 'href="feed.xsl" type="text/xsl"' }, { target: 'app-cache', data: 'ttl="3600"' } ]

Inhalt einer bestehenden Anweisung ändern

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

const pi = [...doc.childNodes].find(
  (n) => n.nodeType === Node.PROCESSING_INSTRUCTION_NODE &&
         n.target === 'xml-stylesheet'
);

// data ist schreibbar, target nicht
pi.data = pi.data.replace('alt.css', 'neu.css');
console.log(new XMLSerializer().serializeToString(doc));
<?xml-stylesheet href="neu.css" type="text/css"?><root/>

// Wichtig · Fallstricke

  • Die XML-Deklaration ist keine Verarbeitungsanweisung. <?xml version="1.0"?> erscheint nicht als ProcessingInstruction-Knoten im DOM. Ihre Werte stehen stattdessen in document.xmlVersion usw., wobei diese Eigenschaften inzwischen veraltet sind.
  • In HTML-Dokumenten wandelt der HTML-Parser <?...?> in einen Kommentar (Comment) um. Echte PI-Knoten entstehen dort nur über createProcessingInstruction() und haben keine Wirkung.
  • createProcessingInstruction() wirft einen DOMException vom Typ InvalidCharacterError, wenn target kein gültiger XML-Name ist oder data die Zeichenfolge ?> enthält.
  • target ist nur lesbar. Wer das Ziel ändern will, muss einen neuen Knoten erzeugen und den alten mit replaceWith() ersetzen.
  • Der Inhalt von data ist ein einfacher String. Pseudo-Attribute wie href="..." werden nicht automatisch ausgewertet und müssen selbst geparst werden.
  • Die Eigenschaft sheet ist nur bei xml-stylesheet-Anweisungen in XML-Dokumenten belegt, sonst ist sie null.
  • Die Schnittstelle wird von allen modernen Browsern und von DOM-Umgebungen wie jsdom unterstützt. Node.js hat ohne solche Bibliotheken kein eingebautes DOM.