MutationRecord.attributeNamespace — Eigenschaft · JavaScript-Referenz

Signatur

MutationRecord.attributeNamespace

Beschreibung

Die schreibgeschützte Eigenschaft attributeNamespace eines MutationRecord enthält den Namensraum-URI des Attributs, dessen Änderung ein MutationObserver gemeldet hat. Gefüllt ist sie nur bei Datensätzen mit type === "attributes", und auch dann nur, wenn das Attribut in einem Namensraum liegt, z. B. xlink:href in SVG (http://www.w3.org/1999/xlink) oder Attribute, die mit setAttributeNS() gesetzt wurden.

Normale HTML-Attribute wie class, id oder data-* haben keinen Namensraum. Bei ihnen ist attributeNamespace null. Das gilt ebenso für alle Datensätze vom Typ "childList" und "characterData".

Nützlich ist die Eigenschaft vor allem bei SVG- und XML-Dokumenten oder in Editoren und Frameworks, die gleichnamige Attribute aus verschiedenen Namensräumen auseinanderhalten müssen. Zusammen mit attributeName (dem lokalen Namen) bestimmt sie das geänderte Attribut eindeutig. Den aktuellen Wert liest man dann mit target.getAttributeNS(attributeNamespace, attributeName).

Rückgabewert

Typ

string | null

Beschreibung

Der Namensraum-URI des geänderten Attributs als String oder null, wenn das Attribut keinen Namensraum hat oder der Datensatz nicht vom Typ "attributes" ist.

Beispiele

Namensraum eines SVG-Attributs (xlink:href) erkennen

const XLINK = 'http://www.w3.org/1999/xlink';
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
svg.append(use);
document.body.append(svg);

const observer = new MutationObserver((records) => {
  for (const record of records) {
    console.log(record.attributeName, record.attributeNamespace);
  }
});

observer.observe(use, { attributes: true });
use.setAttributeNS(XLINK, 'xlink:href', '#icon-home');

href http://www.w3.org/1999/xlink

Normale HTML-Attribute liefern null

const box = document.createElement('div');
document.body.append(box);

const observer = new MutationObserver((records) => {
  records.forEach(({ attributeName, attributeNamespace }) => {
    console.log(`${attributeName}: ${attributeNamespace}`);
  });
});

observer.observe(box, { attributes: true });
box.classList.add('aktiv');
box.dataset.status = 'offen';

class: null data-status: null

Neuen Wert namensraumsicher auslesen

const observer = new MutationObserver((records) => {
  for (const { target, attributeName, attributeNamespace, oldValue } of records) {
    const neu = attributeNamespace
      ? target.getAttributeNS(attributeNamespace, attributeName)
      : target.getAttribute(attributeName);
    console.log(`${attributeNamespace ?? '(kein NS)'} | ${attributeName}: ${oldValue} → ${neu}`);
  }
});

const el = document.createElementNS('http://www.w3.org/2000/svg', 'a');
document.body.append(el);
observer.observe(el, { attributes: true, attributeOldValue: true });
el.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '/start');

http://www.w3.org/1999/xlink | href: null → /start

// Wichtig · Fallstricke

attributeName enthält nur den lokalen Namen ohne Präfix, also href statt xlink:href. Für eine eindeutige Zuordnung braucht man deshalb immer beide Werte, attributeName und attributeNamespace.
Wird ein Attribut per setAttribute('xlink:href', …) ohne Namensraum gesetzt, ist attributeNamespace null und attributeName lautet "xlink:href". Das ist ein anderes Attribut als das mit setAttributeNS() gesetzte.
Die Option attributeFilter vergleicht nur lokale Namen. Nach dem Namensraum filtert man selbst im Callback.
Die Eigenschaft ist schreibgeschützt. Zuweisungen werden stillschweigend ignoriert und werfen im Strict Mode einen Fehler.
Kompatibilität: Die Eigenschaft wird von allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge), seit es MutationObserver gibt. In Node.js steht sie nur über DOM-Implementierungen wie jsdom zur Verfügung.

Siehe auch

MutationRecord MutationRecord.attributeName MutationRecord.oldValue MutationRecord.type MutationObserver Element.setAttributeNS() Element.getAttributeNS()