ProcessingInstruction.getAttributeNames() — Methode · JavaScript-Referenz

Signatur

ProcessingInstruction.prototype.getAttributeNames()

Beschreibung

Ein ProcessingInstruction-Knoten (Verarbeitungshinweis) besteht aus einem Ziel (target, z. B. xml-stylesheet) und einem frei formatierten Datenteil (data). Viele Verarbeitungshinweise schreiben ihre Daten in einer attributähnlichen Syntax, den sogenannten Pseudo-Attributen: href="style.css" type="text/css". Klassisch steht dieser Text im DOM nur als einfacher String zur Verfügung.

getAttributeNames() zerlegt diesen Datenteil und liefert die Namen aller Pseudo-Attribute in der Reihenfolge ihres Auftretens als Array zurück – analog zu Element.getAttributeNames(). Damit lassen sich Verarbeitungshinweise untersuchen, ohne eigene reguläre Ausdrücke für das Parsen von data zu schreiben.

Typische Einsatzfälle sind das Auslesen von Stylesheet-Verknüpfungen in XML-Dokumenten, das Prüfen von eigenen Markern in Dokumenten oder Werkzeuge, die XML/XHTML analysieren. Da die Methode neu und experimentell ist, sollte sie immer per Feature-Erkennung geprüft und bei Bedarf durch eine eigene Auswertung von data ersetzt werden.

Rückgabewert

Typ

string[]

Beschreibung

Ein neues Array mit den Namen aller Pseudo-Attribute in Quelltext-Reihenfolge. Enthält der Verarbeitungshinweis keine Attribute, ist das Array leer ([]). Änderungen am Array wirken sich nicht auf den Knoten aus.

Beispiele

Attributnamen eines xml-stylesheet-Hinweises auslesen

const xml = `<?xml version="1.0"?>
<?xml-stylesheet href="style.css" type="text/css"?>
<root/>`;

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

// Den ersten Verarbeitungshinweis finden
const pi = [...doc.childNodes].find(
  (node) => node.nodeType === Node.PROCESSING_INSTRUCTION_NODE
);

console.log(pi.target);

if (typeof pi.getAttributeNames === 'function') {
  console.log(pi.getAttributeNames());
} else {
  console.log('getAttributeNames() wird nicht unterstützt, data:', pi.data);
}

xml-stylesheet ["href", "type"]

Hilfsfunktion mit Fallback für ältere Browser

// Liefert Pseudo-Attributnamen – nativ, falls vorhanden, sonst per RegExp
const getPiAttributeNames = (pi) => {
  if (typeof pi.getAttributeNames === 'function') {
    return pi.getAttributeNames();
  }
  const names = [];
  const re = /([\w:.-]+)\s*=\s*("[^"]*"|'[^']*')/g;
  for (const [, name] of pi.data.matchAll(re)) {
    names.push(name);
  }
  return names;
};

const doc = document.implementation.createDocument(null, 'root');
const pi = doc.createProcessingInstruction(
  'xml-stylesheet',
  'href="print.css" type="text/css" media="print"'
);
doc.insertBefore(pi, doc.documentElement);

console.log(getPiAttributeNames(pi));

["href", "type", "media"]

Alle Verarbeitungshinweise eines Dokuments auflisten

const xml = `<?xml-stylesheet href="a.css" type="text/css"?>
<?app-config mode="debug" level="3"?>
<data/>`;

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

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

let node;
while ((node = walker.nextNode())) {
  const names = node.getAttributeNames?.() ?? [];
  console.log(`${node.target}: ${names.join(', ') || '(keine)'}`);
}

xml-stylesheet: href, type app-config: mode, level

// Wichtig · Fallstricke

Experimentell: Die Methode gehört zu einer neuen Erweiterung des DOM-Standards und wird bisher nur von wenigen Browsern (teils hinter Flags) unterstützt. Immer mit typeof pi.getAttributeNames === 'function' oder optionaler Verkettung (pi.getAttributeNames?.()) prüfen.
Pseudo-Attribute sind keine echten Attribute: Der Knoten hat keine attributes-Sammlung und keine Attr-Knoten. Die Werte stammen aus dem Text in data; ist dieser nicht in name="wert"-Syntax geschrieben, liefert die Methode ggf. ein leeres Array.
Die Reihenfolge entspricht dem Quelltext. Namensräume werden nicht berücksichtigt – ein Name wie xmlns:foo wird unverändert als String zurückgegeben.
Das zurückgegebene Array ist eine Momentaufnahme: Wird data später geändert, muss die Methode erneut aufgerufen werden.
In HTML-Dokumenten erzeugt der Parser in der Regel keine ProcessingInstruction-Knoten (<?…?> wird zum Kommentar); die Methode ist daher vor allem in XML-/XHTML-Dokumenten relevant.

Siehe auch

ProcessingInstruction ProcessingInstruction.target CharacterData.data Element.getAttributeNames() Document.createProcessingInstruction() PerformanceSoftNavigation.getLargestInteractionContentfulPaint()