ProcessingInstruction.toggleAttribute() — Methode · JavaScript-Referenz

Signatur

ProcessingInstruction.prototype.toggleAttribute(name, force)

Beschreibung

toggleAttribute() überträgt das bekannte Verhalten von Element.prototype.toggleAttribute() auf Knoten vom Typ ProcessingInstruction (z. B. <?xml-stylesheet href="style.css"?>). Die pseudo-attributartigen Paare im Datenteil der Verarbeitungsanweisung werden dabei wie echte Attribute behandelt: Ein boolesches Attribut ist entweder vorhanden (Wert egal, meist leer) oder nicht vorhanden.

Ohne zweites Argument arbeitet die Methode als echter Umschalter: Ist das Attribut vorhanden, wird es entfernt und false zurückgegeben; fehlt es, wird es mit leerem Wert angelegt und true zurückgegeben. Mit force wird die Richtung festgelegt: true sorgt dafür, dass das Attribut existiert (ein bestehender Wert bleibt erhalten), false dafür, dass es fehlt.

Einsatzgebiet sind vor allem Werkzeuge, die XML- oder XHTML-Dokumente verarbeiten und Verarbeitungsanweisungen gezielt ändern, etwa ein alternate-Merkmal an einer xml-stylesheet-Anweisung ein- oder ausschalten, ohne den data-String selbst zerlegen zu müssen.

Parameter

Name	Typ	Default	Beschreibung
$name Pflicht	string		Name des Attributs, das umgeschaltet werden soll. Muss ein gültiger Attributname sein, sonst wird eine `InvalidCharacterError`-`DOMException` ausgelöst.
$force	boolean		Optional. `true`: Attribut nur hinzufügen (bzw. behalten). `false`: Attribut nur entfernen. Ohne Angabe wird echt umgeschaltet.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das Attribut nach dem Aufruf vorhanden ist, sonst false.

Beispiele

Attribut an einer xml-stylesheet-Anweisung umschalten

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

// Die Verarbeitungsanweisung ist der erste Kindknoten des Dokuments
const pi = [...doc.childNodes].find(
  (n) => n.nodeType === Node.PROCESSING_INSTRUCTION_NODE
);

if (typeof pi?.toggleAttribute === 'function') {
  console.log(pi.toggleAttribute('alternate')); // hinzufügen
  console.log(pi.data);
  console.log(pi.toggleAttribute('alternate')); // wieder entfernen
} else {
  console.warn('ProcessingInstruction.toggleAttribute() wird nicht unterstützt');
}

true href="druck.css" type="text/css" alternate="" false

Richtung mit force erzwingen

const doc = new DOMParser().parseFromString('<root/>', 'application/xml');
const pi = doc.createProcessingInstruction('app-config', 'mode="dev"');
doc.insertBefore(pi, doc.documentElement);

const setDebug = (enabled) => pi.toggleAttribute('debug', enabled);

console.log(setDebug(true));  // sicher vorhanden
console.log(setDebug(true));  // bleibt vorhanden
console.log(setDebug(false)); // sicher entfernt

true true false

Fallback ohne native Unterstützung

// Einfacher Fallback, der den data-String direkt bearbeitet
const togglePiAttribute = (pi, name, force) => {
  if (typeof pi.toggleAttribute === 'function') {
    return pi.toggleAttribute(name, force);
  }
  const re = new RegExp(`(^|\\s)${name}(=("[^"]*"|'[^']*'))?(?=\\s|$)`);
  const present = re.test(pi.data);
  const want = force ?? !present;
  if (want && !present) pi.data = `${pi.data} ${name}=""`.trim();
  if (!want && present) pi.data = pi.data.replace(re, '').trim();
  return want;
};

const doc = new DOMParser().parseFromString('<a/>', 'application/xml');
const pi = doc.createProcessingInstruction('marker', 'id="x"');
console.log(togglePiAttribute(pi, 'aktiv'), pi.data);

true id="x" aktiv=""

// Wichtig · Fallstricke

Experimentell: Attribut-Methoden an ProcessingInstruction sind neu und werden bisher nur von wenigen Browsern unterstützt. Vor der Verwendung immer mit typeof pi.toggleAttribute === 'function' prüfen und einen Fallback vorsehen.
Ein ungültiger Name (z. B. mit Leerzeichen) löst eine InvalidCharacterError-DOMException aus.
Die Änderung wirkt sich direkt auf data bzw. nodeValue der Verarbeitungsanweisung aus. Code, der den data-String selbst zerlegt, muss damit umgehen können.
force = true überschreibt einen bestehenden Wert nicht, es wird nur sichergestellt, dass das Attribut vorhanden ist.
Im HTML-Parser werden <?…?>-Konstrukte normalerweise zu Kommentaren. Verarbeitungsanweisungen entstehen daher vor allem in XML-Dokumenten (DOMParser mit application/xml) oder über document.createProcessingInstruction().
Ob sich das Stylesheet neu lädt, wenn man eine eingebundene xml-stylesheet-Anweisung ändert, hängt vom Browser ab.

Siehe auch

ProcessingInstruction.hasAttributes() ProcessingInstruction.getAttribute() ProcessingInstruction.removeAttribute() ProcessingInstruction.hasAttribute() ProcessingInstruction.setAttribute()