Element.getAttributeNames() — Methode · JavaScript-Referenz

Signatur

Element.prototype.getAttributeNames()

Beschreibung

Die Methode getAttributeNames() liefert die qualifizierten Namen aller Attribute eines Elements als echtes Array von Zeichenketten. Hat das Element keine Attribute, erhältst du ein leeres Array. Die Reihenfolge entspricht der Reihenfolge der Attribute in der internen Attributliste (in der Praxis meist die Reihenfolge im Markup bzw. in der Reihenfolge, in der sie gesetzt wurden).

Zusammen mit getAttribute() ist sie eine speicherschonende und bequeme Alternative zur Eigenschaft Element.attributes: Statt einer „lebendigen“ NamedNodeMap mit Attr-Objekten bekommst du ein einfaches, statisches Array, auf das du direkt map(), filter() oder includes() anwenden kannst.

Typische Einsatzfälle sind das Kopieren oder Serialisieren von Attributen, das Bereinigen von Markup (z. B. alle on*-Attribute entfernen), das Auslesen aller data-*- oder aria-*-Attribute sowie Debugging- und Test-Werkzeuge.

Bei Attributen mit Namensraum (z. B. xlink:href in SVG) wird der qualifizierte Name inklusive Präfix zurückgegeben. Um den Wert solcher Attribute zuverlässig zu lesen, eignet sich getAttributeNS() oder der Weg über Element.attributes.

Rückgabewert

Typ

string[]

Beschreibung

Ein neues, statisches Array mit den qualifizierten Namen aller Attribute des Elements. Leeres Array, wenn keine Attribute vorhanden sind. Spätere Änderungen am Element wirken sich nicht auf das zurückgegebene Array aus.

Beispiele

Alle Attribute mit Werten auflisten

const link = document.createElement('a');
link.href = '/kontakt';
link.setAttribute('target', '_blank');
link.setAttribute('data-track', 'nav');

for (const name of link.getAttributeNames()) {
  console.log(`${name} = ${link.getAttribute(name)}`);
}

href = /kontakt target = _blank data-track = nav

Attribute als Objekt serialisieren

const attrsToObject = (el) =>
  Object.fromEntries(
    el.getAttributeNames().map((name) => [name, el.getAttribute(name)])
  );

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

console.log(attrsToObject(input));

{ type: 'email', name: 'mail', required: '' }

Inline-Eventhandler aus fremdem Markup entfernen

const template = document.createElement('template');
template.innerHTML = '<img src="bild.png" onerror="alert(1)" onload="track()" alt="Logo">';

const sanitize = (root) => {
  for (const el of root.querySelectorAll('*')) {
    el.getAttributeNames()
      .filter((name) => name.toLowerCase().startsWith('on'))
      .forEach((name) => el.removeAttribute(name));
  }
};

sanitize(template.content);
console.log(template.content.firstElementChild.getAttributeNames());

['src', 'alt']

Attribute von einem Element auf ein anderes kopieren

const quelle = document.createElement('button');
quelle.className = 'btn primary';
quelle.setAttribute('aria-label', 'Speichern');

const ziel = document.createElement('button');
quelle.getAttributeNames().forEach((name) => {
  ziel.setAttribute(name, quelle.getAttribute(name));
});

console.log(ziel.outerHTML);

// Wichtig · Fallstricke

Nur Attribute, keine Eigenschaften: Per JavaScript gesetzte DOM-Eigenschaften, die kein Attribut spiegeln (z. B. input.value nach Benutzereingabe), tauchen nicht auf. Umgekehrt erscheint class (nicht className).
Kleinschreibung: In HTML-Dokumenten werden Attributnamen von HTML-Elementen beim Parsen in Kleinbuchstaben umgewandelt. Bei SVG/XML bleibt die Groß-/Kleinschreibung erhalten (z. B. viewBox).
Namensräume: Zurückgegeben wird der qualifizierte Name (z. B. xlink:href). Zwei Attribute können denselben qualifizierten Namen in unterschiedlichen Namensräumen haben – dann enthält das Array Duplikate, und getAttribute() liefert nur das erste.
Statisches Array: Wenn du während der Iteration Attribute entfernst, ist das unproblematisch – anders als bei der lebendigen NamedNodeMap aus attributes.
Sicherheit: Das Entfernen von on*-Attributen ist kein vollständiger XSS-Schutz (javascript:-URLs, srcdoc, style usw.). Für fremdes HTML einen geprüften Sanitizer wie DOMPurify oder die Sanitizer API verwenden.
Kompatibilität: In allen aktuellen Browsern verfügbar (Chrome 61+, Firefox 45+, Safari 10.1+, Edge 18+); kein Support im Internet Explorer – dort auf Array.from(el.attributes, (a) => a.name) ausweichen.

Siehe auch

Element.getAttribute() Element.setAttribute() Element.hasAttribute() Element.removeAttribute() Element.attributes Element.hasAttributes() Element.getAttributeNS() NamedNodeMap