ProcessingInstruction.setAttribute() — Methode · JavaScript-Referenz

Signatur

ProcessingInstruction.prototype.setAttribute(name, value)

Beschreibung

Die Methode setAttribute() der Schnittstelle ProcessingInstruction setzt den Wert eines Attributs innerhalb einer Verarbeitungsanweisung (Processing Instruction, kurz PI). Gemeint sind die sogenannten Pseudo-Attribute im Inhalt einer PI, also etwa href="style.css" und type="text/css" in <?xml-stylesheet href="style.css" type="text/css"?>. Existiert das Attribut schon, wird sein Wert ersetzt, andernfalls wird es hinzugefügt.

Klassisch bestehen Verarbeitungsanweisungen im DOM nur aus target (z. B. "xml-stylesheet") und einem unstrukturierten Textinhalt in data. Wer bisher einzelne Werte ändern wollte, musste den data-String selbst parsen und neu zusammensetzen. setAttribute() nimmt einem diese fehleranfällige Arbeit ab und behandelt den Inhalt wie eine Liste von Name-Wert-Paaren – analog zu Element.setAttribute().

Typische Einsatzfälle sind XML-Dokumente, in denen Stylesheet-Verknüpfungen dynamisch umgeschaltet werden (etwa zwischen hellem und dunklem Design), oder Werkzeuge, die XML-Dateien erzeugen und mit Verarbeitungsanweisungen anreichern.

Wichtig: Die Methode ist neu bzw. experimentell und nicht Teil des lange etablierten DOM-Standards. In den meisten aktuellen Browsern und in Bibliotheken wie jsdom existiert sie nicht. Produktiver Code sollte deshalb immer per Feature-Erkennung prüfen und auf eine manuelle Bearbeitung von data ausweichen.

Parameter

Name	Typ	Default	Beschreibung
$name Pflicht	string		Name des Pseudo-Attributs, z. B. `"href"`, `"type"` oder `"media"`.
$value Pflicht	string		Neuer Wert des Attributs. Andere Typen werden in einen String umgewandelt. Anführungszeichen im Wert werden beim Serialisieren maskiert.

Beispiele

Stylesheet-PI anlegen und Attribute setzen (mit Feature-Erkennung)

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

if (typeof pi.setAttribute === 'function') {
  pi.setAttribute('href', 'hell.css');
  pi.setAttribute('media', 'screen');
} else {
  // Rückfall: data-String direkt bearbeiten
  pi.data += ' href="hell.css" media="screen"';
}

doc.insertBefore(pi, doc.documentElement);
console.log(new XMLSerializer().serializeToString(doc));

<?xml-stylesheet type="text/css" href="hell.css" media="screen"?><root/>

Polyfill-artige Hilfsfunktion für alle Browser

const setPIAttribute = (pi, name, value) => {
  if (typeof pi.setAttribute === 'function') {
    pi.setAttribute(name, value);
    return;
  }
  const escaped = String(value).replace(/"/g, '&quot;');
  const pattern = new RegExp(`(^|\\s)${name}\\s*=\\s*("[^"]*"|'[^']*')`);
  pi.data = pattern.test(pi.data)
    ? pi.data.replace(pattern, `$1${name}="${escaped}"`)
    : `${pi.data} ${name}="${escaped}"`.trim();
};

const doc = new DOMParser().parseFromString(
  '<?xml-stylesheet href="hell.css" type="text/css"?><root/>',
  'application/xml'
);
const pi = doc.firstChild;
setPIAttribute(pi, 'href', 'dunkel.css');
console.log(pi.data);

href="dunkel.css" type="text/css"

Theme-Umschaltung in einem geladenen XML-Dokument

// Läuft in einem XML-Dokument, das per xml-stylesheet gestylt wird
const toggleTheme = (dark) => {
  const pi = [...document.childNodes].find(
    (n) => n.nodeType === Node.PROCESSING_INSTRUCTION_NODE && n.target === 'xml-stylesheet'
  );
  if (!pi) return;
  const href = dark ? 'dunkel.css' : 'hell.css';
  if (typeof pi.setAttribute === 'function') {
    pi.setAttribute('href', href);
  } else {
    pi.data = pi.data.replace(/href="[^"]*"/, `href="${href}"`);
  }
  console.log('Aktuell:', pi.data);
};

toggleTheme(true);

Aktuell: href="dunkel.css" type="text/css"

// Wichtig · Fallstricke

Kompatibilität: Diese Methode ist experimentell und in den meisten Browsern, in Node.js-DOM-Implementierungen (jsdom, xmldom) und älteren Umgebungen nicht vorhanden. Immer mit typeof pi.setAttribute === 'function' prüfen und einen Rückfall über data vorsehen.
Keine echten Attribute: Verarbeitungsanweisungen haben laut XML keine Attribute, nur Textinhalt. Pseudo-Attribute sind eine Konvention (z. B. aus der Spezifikation Associating Style Sheets with XML documents). Die PI hat deshalb weder attributes noch Attr-Knoten.
HTML-Dokumente: Der HTML-Parser macht aus <?…?> einen Kommentar. document.createProcessingInstruction() funktioniert, aber im HTML-Kontext haben PIs keine Wirkung – nur in XML-Dokumenten.
Wirkung auf Stylesheets: Ob eine Änderung von href ein bereits geladenes Stylesheet neu lädt, ist je nach Browser unterschiedlich. Im Zweifel die PI entfernen und neu einfügen.
Manueller Rückfall: Beim Bearbeiten von data die Zeichenfolge ?> und nicht maskierte Anführungszeichen vermeiden, sonst entsteht beim Serialisieren ungültiges XML.

Siehe auch

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