ProcessingInstruction

Konstruktor

ProcessingInstruction.ProcessingInstruction()

Erstellt eine neue Instanz eines ProcessingInstruction-Objekts.

Entwickler können den Konstruktor ProcessingInstruction() nicht direkt verwenden, um eine neue ProcessingInstruction-Instanz zu erstellen; dies führt zu einem „illegal constructor“-Fehler. Verwenden Sie stattdessen die Methode document.createProcessingInstruction().

Instanzeigenschaften

Diese Schnittstelle erbt außerdem Eigenschaften von ihren übergeordneten Schnittstellen CharacterData, Node und EventTarget.

ProcessingInstruction.sheet Schreibgeschützt

Gibt das zugehörige StyleSheet-Objekt zurück, falls eines vorhanden ist; andernfalls null.

ProcessingInstruction.target Schreibgeschützt

Ein Name, der die Anwendung bezeichnet, an die sich die Anweisung richtet.

Instanzmethoden

Diese Schnittstelle erbt außerdem Methoden von ihren übergeordneten Schnittstellen CharacterData, Node und EventTarget.

ProcessingInstruction.getAttribute()

Ruft den Wert des benannten Attributs des aktuellen Knotens ab und gibt ihn als Zeichenfolge zurück.

ProcessingInstruction.getAttributeNames()

Gibt ein Array mit den Attributnamen des aktuellen Knotens zurück.

ProcessingInstruction.hasAttribute()

Gibt einen booleschen Wert zurück, der angibt, ob das Element das angegebene Attribut besitzt.

ProcessingInstruction.hasAttributes()

Gibt einen booleschen Wert zurück, der angibt, ob das Element ein oder mehrere HTML-Attribute besitzt.

ProcessingInstruction.removeAttribute()

Entfernt das benannte Attribut vom aktuellen Knoten.

ProcessingInstruction.setAttribute()

Setzt das benannte Attribut des aktuellen Knotens auf einen neuen Wert.

ProcessingInstruction.toggleAttribute()

Schaltet ein boolesches Attribut am angegebenen Element um: Ist es vorhanden, wird es entfernt; andernfalls wird es hinzugefügt.

Diese Methoden erleichtern den Zugriff auf Attribute in der Zeichenfolge data.

Beschreibung

Verarbeitungsanweisungen geben, wie der Name schon sagt, an, wie ein Dokument verarbeitet werden soll. Sie können Stylesheets für XML-Dokumente, Platzhalter für HTML-Dokumente oder andere Verarbeitungsanweisungen enthalten.

Verarbeitungsanweisungen sind Nodes und keine Elements. Sie haben keine Kindknoten und bewirken keine Verschachtelung (wie unser Patching-Beispiel zeigt). Daher verändern sie die Struktur des Document Object Model (DOM) nicht.

Ursprünglich wurden ProcessingInstruction-Knoten nur in XML-Dokumenten unterstützt, nicht in HTML-Dokumenten. In Browsern ohne entsprechende Unterstützung werden Verarbeitungsanweisungen als Kommentare interpretiert und im DOM-Baum als Comment-Objekte dargestellt.

Wenn Verarbeitungsanweisungen direkt in Dokumente geschrieben werden, statt mit document.createProcessingInstruction() erstellt zu werden, beginnen und enden sie mit den Begrenzungszeichen <? und ?> und enthalten ein target sowie optional data-Attribute. Zum Beispiel:

<?my-target name="my-name"?>

In HTML können Verarbeitungsanweisungen mit oder ohne abschließendes ? angegeben werden. Fehlt es, ergänzt der Browser es beim Parsen des DOM. Sowohl <?my-target?> als auch <?my-target> sind daher gültig. XML ist strenger und erfordert das abschließende ?.

Aus Gründen der Abwärtskompatibilität gelten im HTML-Parser außerdem weitere Einschränkungen für den target-Namen. Er muss [A-Za-z_][-_A-Za-z0-9]* entsprechen; andernfalls wird die Anweisung als Kommentar verarbeitet.

Obwohl die Syntax identisch mit der von Verarbeitungsanweisungen ist, gilt die XML-Deklaration (<?xml version="1.0"?>) nicht als Verarbeitungsanweisung und wird nicht zum DOM hinzugefügt.

Benutzerdefinierte Verarbeitungsanweisungen dürfen nicht mit "xml" beginnen, da die XML-Spezifikation xml-präfigierte target-Namen von Verarbeitungsanweisungen für bestimmte standardisierte Zwecke reserviert (zum Beispiel <?xml-stylesheet ?>).

Aus Gründen der Abwärtskompatibilität wird eine Verarbeitungsanweisung in einem HTML-Dokument als Kommentar geparst, wenn ihr target xml oder xml-stylesheet ist. Das gilt unabhängig davon, ob sie im ursprünglichen HTML enthalten ist oder mit einer Methode wie Element.innerHTML eingefügt wird.

Beispiele

Grundlegende Verwendung

Dieses Beispiel zeigt eine Verarbeitungsanweisung mit dem target display und den data table-view.

<?display table-view?>

Beispiel für einen reservierten XML-target-Namen

<?xml-stylesheet href="styles.css"?>

Dieses Beispiel zeigt eine Verarbeitungsanweisung mit dem target xml-stylesheet und den data href="styles.css".

Verwendung beim Patching mit <template for>

Dieses Beispiel verwendet die Verarbeitungsanweisungen <?start> und <?end> als Platzhalter und fügt deren Inhalt später mithilfe von <template for> ein. Bei beiden fehlt das optionale abschließende ?.

<body>
  <div>
    <?start name="placeholder">
    Loading...
    <?end>
  </div>
  ...
  <template for="placeholder">
    Lorem Ipsum...
  </template>
  ...
</body>

Dieses Beispiel zeigt auch, dass Verarbeitungsanweisungen keine Kindknoten haben und keine Verschachtelung bewirken. Obwohl die Verarbeitungsanweisungen <?start> und <?end> im Zusammenhang mit <template for> miteinander verknüpft sind, besteht im DOM keine entsprechende Verknüpfung. Der dazwischenliegende Inhalt Loading... wird dadurch nicht zu einem Kindknoten (was sich an der fehlenden Einrückung erkennen lässt).

Methoden statt des Attributs data verwenden

Dieses Beispiel erstellt eine Verarbeitungsanweisung mit der Methode createProcessingInstruction(). Anschließend protokolliert es zunächst die Daten der Verarbeitungsanweisung (abgerufen über ihre Eigenschaft CharacterData.data) und danach ihre beiden Attribute einzeln (abgerufen über ihre Methode ProcessingInstruction.getAttribute()).

const pi = document.createProcessingInstruction(
  "my-target",
  "my-data1='value1' my-data2='value2'",
);

console.log(pi.data);
console.log(pi.getAttribute("my-data1"));
console.log(pi.getAttribute("my-data2"));
// logs
// my-data1='value1' my-data2='value2'
// value1
// value2

Spezifikationen

Browser-Kompatibilität

Siehe auch

• document.createProcessingInstruction()
• Die DOM-API