NamedNodeMap — Schnittstelle · JavaScript-Referenz

Signatur

interface NamedNodeMap

Beschreibung

NamedNodeMap ist die Sammlung, die Element.prototype.attributes zurückgibt. Sie enthält alle Attribute eines Elements als Attr-Objekte. Jedes Attr hat unter anderem die Eigenschaften name, value, namespaceURI und ownerElement. Anders als der Name vermuten lässt, ist die Sammlung nicht sortiert. Die Reihenfolge hängt vom Browser ab und ist nicht garantiert.

Die Sammlung ist live: Wenn Attribute am Element hinzukommen oder entfernt werden, sieht man das sofort in der Map. Zugreifen kann man per Index (attrs[0], item(0)) oder per Name (attrs.id, getNamedItem("id")). Die wichtigsten Mitglieder sind:

length: Anzahl der Attribute
item(index): Attribut an der Position index oder null
getNamedItem(name) / getNamedItemNS(ns, localName): Attribut über seinen Namen
setNamedItem(attr) / setNamedItemNS(attr): fügt ein Attr ein oder ersetzt ein vorhandenes. Rückgabewert ist das ersetzte Attribut oder null.
removeNamedItem(name) / removeNamedItemNS(ns, localName): entfernt das Attribut und gibt es zurück

NamedNodeMap ist iterierbar. for...of, der Spread-Operator und Array.from() funktionieren also direkt. So lassen sich Attribute gut auslesen, kopieren oder serialisieren, etwa für data-*-Auswertungen, zum Klonen von Elementen oder für Debugging-Werkzeuge. Für einfache Lese- und Schreibzugriffe sind getAttribute() und setAttribute() meist bequemer.

Parameter

Name	Typ	Default	Beschreibung
$index Pflicht	number		Für `item(index)`: nullbasierte Position des Attributs. Liegt die Position außerhalb der Sammlung, ist der Rückgabewert `null`.
$name Pflicht	string		Für `getNamedItem()` und `removeNamedItem()`: qualifizierter Attributname, z. B. `"class"`. Bei HTML-Elementen wird dabei nicht zwischen Groß- und Kleinschreibung unterschieden.
$attr Pflicht	Attr		Für `setNamedItem()` und `setNamedItemNS()`: das einzufügende `Attr`-Objekt, z. B. aus `document.createAttribute()`.
$namespace	string \| null	null	Für die `*NS`-Varianten: Namensraum-URI des Attributs, z. B. `"http://www.w3.org/1999/xlink"`.
$localName	string		Für die `*NS`-Varianten: lokaler Name ohne Präfix.

Rückgabewert

Typ

NamedNodeMap

Beschreibung

Kommt aus element.attributes. Die Methoden liefern jeweils ein Attr oder null. length liefert eine number.

Beispiele

Alle Attribute eines Elements auflisten

const link = document.createElement('a');
link.href = '/kontakt';
link.className = 'btn primary';
link.dataset.track = 'footer';

const attrs = link.attributes; // NamedNodeMap
console.log(attrs.length);

for (const { name, value } of attrs) {
  console.log(`${name} = ${value}`);
}

3 href = /kontakt class = btn primary data-track = footer

Zugriff per Name, Index und Live-Verhalten

const input = document.createElement('input');
input.setAttribute('type', 'email');

const attrs = input.attributes;
console.log(attrs.getNamedItem('type').value);
console.log(attrs.item(0).name);
console.log(attrs.getNamedItem('required'));

// Live: neue Attribute tauchen sofort auf
input.setAttribute('required', '');
console.log(attrs.length);

email type null 2

Attribute in ein Objekt umwandeln und auf ein anderes Element kopieren

const source = document.createElement('img');
source.setAttribute('src', 'logo.png');
source.setAttribute('alt', 'Firmenlogo');
source.setAttribute('loading', 'lazy');

// Serialisieren
const asObject = Object.fromEntries(
  Array.from(source.attributes, (a) => [a.name, a.value])
);
console.log(asObject);

// Kopieren (Attr-Knoten werden geklont, nicht verschoben)
const target = document.createElement('img');
for (const attr of source.attributes) {
  target.attributes.setNamedItem(attr.cloneNode());
}
console.log(target.outerHTML);

{ src: 'logo.png', alt: 'Firmenlogo', loading: 'lazy' } <img src="logo.png" alt="Firmenlogo" loading="lazy">

Attribute mit setNamedItem und removeNamedItem verwalten

const div = document.createElement('div');

const role = document.createAttribute('role');
role.value = 'dialog';
console.log(div.attributes.setNamedItem(role)); // kein Vorgänger

const removed = div.attributes.removeNamedItem('role');
console.log(removed.value, div.hasAttribute('role'));

try {
  div.attributes.removeNamedItem('gibt-es-nicht');
} catch (err) {
  console.log(err.name);
}

null dialog false NotFoundError

// Wichtig · Fallstricke

Keine feste Reihenfolge: Die Reihenfolge der Attribute ist nicht festgelegt. Für die Logik sollte man sich nicht auf Indizes verlassen, sondern über den Namen zugreifen.
Live-Sammlung: Wer beim Durchlaufen Attribute entfernt, verschiebt die Indizes. Dabei werden leicht Attribute übersprungen. Deshalb zuerst mit [...el.attributes] eine Kopie anlegen oder rückwärts iterieren.
Kein Array: map, filter usw. gibt es nicht. Vorher mit Array.from() oder dem Spread-Operator umwandeln.
setNamedItem() wirft einen InUseAttributeError, wenn das Attr bereits zu einem anderen Element gehört. In dem Fall vorher cloneNode() verwenden. removeNamedItem() wirft einen NotFoundError, wenn das Attribut nicht existiert.
Kein Bezug zu Knoten: Trotz des Namens enthält die Sammlung nur Attr-Objekte. Seit DOM4 sind diese keine Kindknoten des Elements mehr.
Sicherheit: Wer Attribute aus fremden Quellen, etwa aus geparstem HTML, ungeprüft kopiert, übernimmt womöglich Event-Handler wie onerror oder javascript:-URLs. Das öffnet XSS-Lücken. Vorher mit einer Positivliste filtern.
Kompatibilität: Das Interface wird von allen Browsern unterstützt. Die Iterierbarkeit mit for...of gibt es in allen modernen Browsern, der Internet Explorer kennt sie nicht.

Siehe auch

Element.attributes Attr Element.getAttribute() Element.setAttribute() Element.getAttributeNames() Document.createAttribute() NodeList