Element.getAttributeNode() — Methode · JavaScript-Referenz

Signatur

Element.prototype.getAttributeNode(attrName)

Beschreibung

Die Methode getAttributeNode() liefert statt eines einfachen Strings (wie getAttribute()) das vollständige Attr-Objekt eines Attributs. Dieses Objekt hat unter anderem die Eigenschaften name, value, ownerElement, namespaceURI, prefix und localName.

Sinnvoll ist das vor allem dann, wenn man mit dem Attribut als eigenem Objekt arbeiten will: etwa um über ownerElement auf das besitzende Element zurückzugreifen, um Attribute mit removeAttributeNode() gezielt zu entfernen oder um den Wert direkt über attr.value zu ändern. Das zurückgegebene Attr ist live, Änderungen an value wirken sich also sofort auf das Element aus.

In HTML-Dokumenten wird der Name vor der Suche in Kleinbuchstaben umgewandelt. Existiert das Attribut nicht, gibt die Methode null zurück (im Unterschied zu getAttribute(), das ebenfalls null liefert, aber nur den Wert). Für Attribute in einem Namensraum (z. B. xlink:href in SVG) nimmt man besser getAttributeNodeNS().

Im Alltag reichen meist getAttribute(), setAttribute() und hasAttribute(). getAttributeNode() ist dann nützlich, wenn man generischen DOM-Code schreibt, der mit Knoten-Objekten statt mit Strings arbeitet.

Parameter

Name	Typ	Default	Beschreibung
$attrName Pflicht	string		Name des gesuchten Attributs, z. B. `"id"` oder `"data-user"`. Wird in HTML-Dokumenten auf Kleinbuchstaben normalisiert.

Rückgabewert

Typ

Attr | null

Beschreibung

Den Attr-Knoten des Attributs oder null, wenn das Element kein Attribut mit diesem Namen hat.

Beispiele

Attribut als Attr-Knoten auslesen

// <input id="email" type="email" placeholder="name@example.com">
const input = document.getElementById('email');
const attr = input.getAttributeNode('placeholder');

if (attr) {
  console.log(attr.name);                  // Name des Attributs
  console.log(attr.value);                 // Wert
  console.log(attr.ownerElement === input); // gehört zum Element
}

placeholder name@example.com true

Fehlendes Attribut ergibt null

const button = document.createElement('button');
button.textContent = 'Senden';

const disabled = button.getAttributeNode('disabled');
console.log(disabled); // Attribut nicht vorhanden

button.setAttribute('disabled', '');
console.log(button.getAttributeNode('disabled') !== null);

null true

Wert über den live Attr-Knoten ändern

const link = document.createElement('a');
link.setAttribute('href', '/alt');

const hrefAttr = link.getAttributeNode('href');
hrefAttr.value = '/neu'; // wirkt direkt auf das Element

console.log(link.getAttribute('href'));

/neu

Attribut gezielt per Knoten entfernen

const box = document.createElement('div');
box.setAttribute('data-state', 'geladen');

const stateAttr = box.getAttributeNode('data-state');
const removed = box.removeAttributeNode(stateAttr);

console.log(removed.value);            // entfernter Knoten behält Wert
console.log(box.hasAttribute('data-state'));
console.log(removed.ownerElement);     // nicht mehr zugeordnet

geladen false null

// Wichtig · Fallstricke

Kein Wert, sondern ein Knoten: Wer nur den String braucht, nimmt getAttribute(). Das ist kürzer und etwas schneller.
Immer auf null prüfen: Ein direkter Zugriff wie el.getAttributeNode('x').value wirft einen TypeError, wenn das Attribut fehlt. Optional Chaining hilft: el.getAttributeNode('x')?.value.
Groß-/Kleinschreibung: In HTML-Dokumenten wird der Name in Kleinbuchstaben umgewandelt, in XML-/SVG-Dokumenten außerhalb von HTML nicht. Für Attribute mit Namensraum nimmt man getAttributeNodeNS().
Attribut ist nicht gleich Eigenschaft: Der Knoten zeigt den Attributwert aus dem Markup, nicht unbedingt den aktuellen DOM-Eigenschaftswert. Bei <input value> liefert attr.value zum Beispiel den Startwert, nicht die aktuelle Benutzereingabe (input.value).
Kompatibilität: Wird von allen Browsern unterstützt. Attr ist seit DOM4 kein Kindknoten mehr. Eigenschaften wie childNodes oder nodeValue an Attr sollte man nicht mehr verwenden, value ist der richtige Weg.

Siehe auch

Element.getAttribute() Element.getAttributeNodeNS() Element.setAttributeNode() Element.removeAttributeNode() Element.attributes Attr new ViewTimeline()