NamedNodeMap.getNamedItem() — Methode · JavaScript-Referenz

Signatur

NamedNodeMap.prototype.getNamedItem(qualifiedName)

Beschreibung

Mit getNamedItem() holt man ein einzelnes Attribut aus einer NamedNodeMap, typischerweise aus element.attributes. Anders als Element.getAttribute(), das nur den Wert als String liefert, bekommt man hier den vollständigen Attr-Knoten mit name, value, namespaceURI, prefix, localName und ownerElement.

Gesucht wird nach dem qualifizierten Namen, also inklusive eines eventuellen Präfixes (z. B. xlink:href). Bei HTML-Elementen in einem HTML-Dokument wird der Name vor dem Vergleich in Kleinbuchstaben umgewandelt, sodass getNamedItem("ID") und getNamedItem("id") dasselbe Attribut finden.

Die Methode eignet sich, wenn man mit dem Attributknoten selbst arbeiten will, etwa um ihn per setNamedItem() auf ein anderes Element zu übertragen oder um Namespace-Details zu prüfen. Wer nur den Wert braucht, ist mit getAttribute() einfacher bedient. Alternativ ist auch der Zugriff per Eigenschaft möglich: element.attributes["id"] entspricht meist getNamedItem("id"), liefert bei fehlendem Attribut aber undefined statt null.

Parameter

Name	Typ	Default	Beschreibung
$qualifiedName Pflicht	string		Qualifizierter Name des gesuchten Attributs, z. B. `"class"` oder `"xlink:href"`. Bei HTML-Elementen wird er in Kleinbuchstaben umgewandelt.

Rückgabewert

Typ

Attr | null

Beschreibung

Der passende Attr-Knoten oder null, wenn kein Attribut mit diesem Namen existiert.

Beispiele

Attribut eines Elements auslesen

// <input id="email" type="email" required>
const input = document.querySelector('#email');
const attrs = input.attributes;

const typeAttr = attrs.getNamedItem('type');
console.log(typeAttr.name, typeAttr.value);
console.log(typeAttr.ownerElement === input);

// Fehlendes Attribut
console.log(attrs.getNamedItem('placeholder'));

type email true null

Groß-/Kleinschreibung bei HTML-Elementen

const div = document.createElement('div');
div.setAttribute('data-Role', 'banner');

// Bei HTML-Elementen wird der Name kleingeschrieben
console.log(div.attributes.getNamedItem('DATA-ROLE').value);
console.log(div.attributes.getNamedItem('data-role').name);

banner data-role

Attribut-Knoten klonen und auf ein anderes Element übertragen

const source = document.createElement('button');
source.setAttribute('aria-label', 'Menü öffnen');
const target = document.createElement('button');

const attr = source.attributes.getNamedItem('aria-label');
if (attr) {
  // Klonen, da ein Attr nur zu einem Element gehören darf
  target.attributes.setNamedItem(attr.cloneNode());
}
console.log(target.getAttribute('aria-label'));

Menü öffnen

Namespace-Attribut in SVG über den qualifizierten Namen finden

const svgNS = 'http://www.w3.org/2000/svg';
const xlinkNS = 'http://www.w3.org/1999/xlink';
const use = document.createElementNS(svgNS, 'use');
use.setAttributeNS(xlinkNS, 'xlink:href', '#icon-star');

const href = use.attributes.getNamedItem('xlink:href');
console.log(href.localName, href.prefix, href.namespaceURI);

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

// Wichtig · Fallstricke

Qualifizierter Name statt lokalem Namen: Bei Attributen mit Namespace muss das Präfix angegeben werden ("xlink:href"). Wer nach Namespace und lokalem Namen suchen will, nimmt getNamedItemNS(namespace, localName).
Kleinschreibung nur bei HTML: Bei Elementen in XML- oder SVG-Kontexten gibt es keine Umwandlung, dort muss die Schreibweise exakt stimmen.
Live-Referenz: Der zurückgegebene Attr ist mit dem Element verknüpft. Wer attr.value ändert, ändert sofort das Attribut am Element.
null vs. undefined: getNamedItem() liefert null, der Klammerzugriff attributes[name] dagegen undefined. Das ist wichtig bei strikten Vergleichen.
Wird ein Attribut-Knoten mit setNamedItem() an ein anderes Element gehängt, ohne ihn vorher zu klonen, wird ein InUseAttributeError (DOMException) ausgelöst.
Die Methode wird von allen Browsern unterstützt. Für einfache Wertabfragen ist Element.getAttribute() kürzer und gut lesbar.

Siehe auch

Attr Element.attributes NamedNodeMap.setNamedItem() NamedNodeMap.getNamedItemNS() NamedNodeMap.setNamedItemNS()