MutationEvent.attrName — Eigenschaft · JavaScript-Referenz

Signatur

MutationEvent.attrName

Beschreibung

Die schreibgeschützte Eigenschaft attrName der Schnittstelle MutationEvent enthält den Namen des Attributs, das ein DOMAttrModified-Ereignis ausgelöst hat, zum Beispiel "class", "id" oder "data-state". Bei allen anderen Mutationsereignissen wie DOMNodeInserted oder DOMSubtreeModified ist der Wert ein leerer String.

Normalerweise wertet man attrName zusammen mit den Eigenschaften attrChange (Art der Änderung: MODIFICATION = 1, ADDITION = 2, REMOVAL = 3), prevValue und newValue aus. Damit lässt sich nachvollziehen, welches Attribut sich an einem Element wie geändert hat.

Wichtig: Mutationsereignisse sind veraltet und werden aus den Browsern entfernt. Chrome und Safari haben DOMAttrModified nie unterstützt, andere Mutationsereignisse hat Chrome ab Version 127 standardmäßig abgeschaltet. Für neuen Code solltest du immer MutationObserver verwenden. Dort übernimmt MutationRecord.attributeName die Aufgabe von attrName.

Rückgabewert

Typ

string

Beschreibung

Name des betroffenen Attributs bei DOMAttrModified. Bei anderen Mutationsereignissen ist der Wert ein leerer String "".

Beispiele

Attributänderungen mit DOMAttrModified protokollieren (Altcode)

const box = document.querySelector('#box');

const changeTypes = { 1: 'geändert', 2: 'hinzugefügt', 3: 'entfernt' };

const onAttrModified = (event) => {
  console.log(`Attribut "${event.attrName}" ${changeTypes[event.attrChange]}:`,
    event.prevValue, '→', event.newValue);
};

box.addEventListener('DOMAttrModified', onAttrModified);

box.setAttribute('data-state', 'open');
box.classList.add('active');

Attribut "data-state" hinzugefügt: → open Attribut "class" hinzugefügt: → active (nur in Browsern, die DOMAttrModified noch auslösen)

Nur bestimmte Attribute beachten und Listener wieder entfernen

const input = document.querySelector('input');

const watchDisabled = (event) => {
  if (event.attrName !== 'disabled') return;
  console.log('disabled-Status:', event.attrChange === MutationEvent.REMOVAL ? 'aktiv' : 'deaktiviert');
  // Nach der ersten Meldung abmelden
  input.removeEventListener('DOMAttrModified', watchDisabled);
};

input.addEventListener('DOMAttrModified', watchDisabled);
input.disabled = true;

disabled-Status: deaktiviert

Moderner Ersatz: MutationObserver mit attributeName

const box = document.querySelector('#box');

const observer = new MutationObserver((records) => {
  for (const record of records) {
    // record.attributeName entspricht MutationEvent.attrName
    console.log(`Attribut "${record.attributeName}":`,
      record.oldValue, '→', box.getAttribute(record.attributeName));
  }
});

observer.observe(box, {
  attributes: true,
  attributeOldValue: true,
  attributeFilter: ['class', 'data-state']
});

box.setAttribute('data-state', 'closed');

Attribut "data-state": null → closed

// Wichtig · Fallstricke

Veraltet: Mutationsereignisse gehören nicht mehr zum DOM-Standard. Die Unterstützung ist uneinheitlich: Chrome und Safari haben DOMAttrModified nie ausgelöst, Chrome deaktiviert Mutationsereignisse seit Version 127 insgesamt, und Firefox arbeitet ebenfalls an der Entfernung. Code, der sich auf attrName verlässt, läuft deshalb in modernen Browsern meist ins Leere, ohne dass ein Fehler erscheint.
Performance: Mutationsereignisse werden synchron bei jeder einzelnen Änderung ausgelöst und bremsen DOM-Operationen stark. MutationObserver sammelt die Änderungen dagegen und liefert sie gebündelt als Mikrotask.
Leerer String: Außerhalb von DOMAttrModified ist attrName immer "". Prüfe deshalb vorher event.type.
Keine Funktionserkennung per Eigenschaft: Dass 'attrName' in MutationEvent.prototype zutrifft, bedeutet nicht, dass das Ereignis auch tatsächlich ausgelöst wird. Verlässlich klappt die Erkennung nur, wenn du testweise ein Attribut setzt und prüfst, ob der Listener aufgerufen wird.

Siehe auch

MutationEvent MutationEvent.attrChange MutationEvent.prevValue MutationEvent.newValue MutationObserver MutationRecord.attributeName DeviceMotionEventRotationRate.gamma