ProcessingInstruction.getAttribute() — Methode · JavaScript-Referenz

Signatur

ProcessingInstruction.prototype.getAttribute(name)

Beschreibung

Eine Verarbeitungsanweisung (Processing Instruction, PI) wie <?xml-stylesheet href="style.css" type="text/css"?> hat einen Zielnamen (target) und einen freien Textteil (data). Im Textteil stehen oft sogenannte Pseudo-Attribute im Format name="wert". Das sind aber keine echten DOM-Attribute, denn ProcessingInstruction erbt von CharacterData und nicht von Element.

getAttribute(name) soll den Wert eines solchen Pseudo-Attributs direkt zurückgeben. Dann müsstest du data nicht mehr selbst zerlegen. Das ist praktisch, wenn du XML-Dokumente mit DOMParser auswertest und zum Beispiel wissen willst, auf welches Stylesheet eine xml-stylesheet-Anweisung verweist.

Wichtig: Die Methode ist im aktuellen DOM-Standard nicht fest verankert und in den gängigen Browsern nicht verlässlich vorhanden. In der Praxis prüfst du deshalb zuerst, ob es sie gibt, und wertest sonst data selbst aus. Die Beispiele unten zeigen dieses Vorgehen.

Parameter

Name	Typ	Default	Beschreibung
$name Pflicht	string		Name des Pseudo-Attributs, das im `data`-Teil der Verarbeitungsanweisung gesucht wird, z. B. `"href"` oder `"type"`.

Rückgabewert

Typ

string | null

Beschreibung

Der Wert des Pseudo-Attributs ohne Anführungszeichen oder null, wenn es in data nicht vorkommt.

Beispiele

Pseudo-Attribute mit Fallback auslesen

// Hilfsfunktion: nutzt getAttribute(), falls vorhanden, sonst eigenes Parsen
const getPiAttribute = (pi, name) => {
  if (typeof pi.getAttribute === 'function') {
    return pi.getAttribute(name);
  }
  const re = new RegExp(`(?:^|\\s)${name}\\s*=\\s*(["'])(.*?)\\1`);
  const match = pi.data.match(re);
  return match ? match[2] : null;
};

const xmlDoc = document.implementation.createDocument(null, 'root');
const pi = xmlDoc.createProcessingInstruction(
  'xml-stylesheet',
  'href="style.css" type="text/css"'
);

console.log(getPiAttribute(pi, 'href'));
console.log(getPiAttribute(pi, 'type'));
console.log(getPiAttribute(pi, 'media'));

style.css text/css null

Stylesheet-Verweise eines XML-Dokuments finden

const xml = `<?xml version="1.0"?>
<?xml-stylesheet href="print.xsl" type="text/xsl"?>
<?xml-stylesheet href="screen.css" type="text/css" media="screen"?>
<katalog/>`;

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

const readAttr = (pi, name) =>
  typeof pi.getAttribute === 'function'
    ? pi.getAttribute(name)
    : pi.data.match(new RegExp(`${name}="([^"]*)"`))?.[1] ?? null;

const stylesheets = [...doc.childNodes]
  .filter((n) => n.nodeType === Node.PROCESSING_INSTRUCTION_NODE)
  .filter((pi) => pi.target === 'xml-stylesheet')
  .map((pi) => ({ href: readAttr(pi, 'href'), type: readAttr(pi, 'type') }));

console.log(stylesheets);

[ { href: 'print.xsl', type: 'text/xsl' }, { href: 'screen.css', type: 'text/css' } ]

Unterstützung im Browser prüfen

const pi = document.implementation
  .createDocument(null, 'x')
  .createProcessingInstruction('demo', 'a="1"');

const supported = typeof pi.getAttribute === 'function';
console.log(`getAttribute() auf PI verfügbar: ${supported}`);

getAttribute() auf PI verfügbar: false

// Wichtig · Fallstricke

Kompatibilität: getAttribute() gehört nicht zu den festen Mitgliedern von ProcessingInstruction im DOM Living Standard. In den meisten Browsern ergibt pi.getAttribute den Wert undefined. Prüfe die Methode immer, bevor du sie aufrufst, und sieh ein Fallback über pi.data vor.
Keine echten Attribute: Pseudo-Attribute sind nur Text in data. setAttribute(), attributes oder CSS-Attributselektoren funktionieren darauf nicht. Wenn du etwas ändern willst, schreibst du pi.data neu.
Parsen: Einfache reguläre Ausdrücke kommen nicht mit maskierten Anführungszeichen oder Entitäten wie " zurecht. Bei Daten aus unsicheren Quellen solltest du Werte wie href prüfen, bevor du sie weiterverwendest (z. B. als URL laden).
Die XML-Deklaration <?xml version="1.0"?> ist keine Verarbeitungsanweisung im DOM und taucht deshalb nicht in childNodes auf.

Siehe auch

ProcessingInstruction ProcessingInstruction.target CharacterData.data Document.createProcessingInstruction() Element.getAttribute() ProcessingInstruction.getAttributeNames()