Attr.ownerElement — Eigenschaft · JavaScript-Referenz

Signatur

Attr.ownerElement

Beschreibung

Die Eigenschaft Attr.ownerElement gibt das Element zurück, zu dem ein Attributknoten gehört. Attribute sind im DOM zwar Knoten (Attr erbt von Node), stehen aber nicht im normalen Knotenbaum: parentNode ist bei einem Attr immer null. Über ownerElement kommt man trotzdem vom Attribut zurück zum Element.

Nützlich ist das vor allem dann, wenn man mit Attr-Objekten statt mit Attributnamen arbeitet, etwa beim Durchlaufen von element.attributes (NamedNodeMap), bei MutationObserver-Auswertungen, bei XPath-Abfragen, die Attributknoten liefern (//@data-id), oder in generischen Hilfsfunktionen, die nur einen Attributknoten übergeben bekommen.

Der Wert ist null, wenn das Attribut noch keinem Element zugeordnet ist, zum Beispiel direkt nach document.createAttribute() oder nachdem es per removeAttributeNode() entfernt wurde. Setzt man den Knoten mit setAttributeNode() an ein Element, wird ownerElement automatisch aktualisiert.

Rückgabewert

Typ

Element | null

Beschreibung

Das Element, zu dem das Attribut gehört, oder null, wenn das Attribut keinem Element zugeordnet ist.

Beispiele

Vom Attribut zurück zum Element

const link = document.createElement('a');
link.id = 'home';
link.setAttribute('href', '/start');

const hrefAttr = link.getAttributeNode('href');
console.log(hrefAttr.ownerElement === link);
console.log(hrefAttr.ownerElement.id);
console.log(hrefAttr.parentNode); // Attribute haben keinen Elternknoten

true home null

Lebenszyklus: erzeugen, anhängen, entfernen

const attr = document.createAttribute('data-role');
attr.value = 'dialog';
console.log(attr.ownerElement); // noch keinem Element zugeordnet

const div = document.createElement('div');
div.setAttributeNode(attr);
console.log(attr.ownerElement.tagName);

div.removeAttributeNode(attr);
console.log(attr.ownerElement);

null DIV null

XPath: alle Elemente mit data-track-Attribut finden

document.body.innerHTML = `
  <button data-track="kauf">Kaufen</button>
  <a href="#" data-track="info">Mehr</a>
`;

const result = document.evaluate(
  '//@data-track',
  document,
  null,
  XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
  null
);

for (let i = 0; i < result.snapshotLength; i++) {
  const attr = result.snapshotItem(i);
  console.log(`${attr.ownerElement.tagName}: ${attr.value}`);
}

BUTTON: kauf A: info

Attribute generisch durchlaufen

const input = document.createElement('input');
input.type = 'email';
input.required = true;

const describe = (attr) =>
  `${attr.ownerElement.localName}[${attr.name}="${attr.value}"]`;

for (const attr of input.attributes) {
  console.log(describe(attr));
}

input[type="email"] input[required=""]

// Wichtig · Fallstricke

Nur lesbar: Eine Zuweisung an ownerElement wird ignoriert (im Strict Mode gibt es einen TypeError). Um ein Attribut einem Element zuzuordnen, nutzt man setAttributeNode().
Immer auf null prüfen: Frisch erzeugte oder entfernte Attribute haben kein Besitzerelement. Hier hilft Optional Chaining: attr.ownerElement?.tagName.
Nicht mit parentNode verwechseln: Bei Attr-Knoten sind parentNode, parentElement und childNodes leer bzw. null; die Verbindung zum Element läuft nur über ownerElement.
Ein Attribut kann nur einem Element gehören: Ruft man setAttributeNode() mit einem Attribut auf, das schon an einem anderen Element hängt, wird eine InUseAttributeError-DOMException ausgelöst. Vorher entfernen oder mit cloneNode() kopieren.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Seit DOM4 erbt Attr in einigen Engines nur noch eingeschränkt von Node, ownerElement bleibt davon aber unberührt.

Siehe auch

Attr Element.getAttributeNode() Element.setAttributeNode() Element.removeAttributeNode() Document.createAttribute() Element.attributes Attr.specified