Element.hasAttributes() — Methode · JavaScript-Referenz

Signatur

Element.prototype.hasAttributes()

Beschreibung

Die Methode hasAttributes() prüft, ob an einem Element überhaupt Attribute gesetzt sind. Welche Attribute das sind, spielt dabei keine Rolle. Sie nimmt keine Argumente entgegen und liefert einen booleschen Wert.

Nützlich ist sie beim Bereinigen oder Normalisieren von Markup, etwa um „nackte“ Elemente ohne class, style oder data-* zu finden. Sie hilft auch bei DOM-Vergleichen und in Serialisierern, die für Elemente ohne Attribute einen kürzeren Pfad nutzen.

Für ein ganz bestimmtes Attribut verwendest du Element.hasAttribute(name), also ohne „s“. Brauchst du die einzelnen Attribute, liefert Element.attributes eine NamedNodeMap und Element.getAttributeNames() ein Array der Namen.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das Element mindestens ein Attribut hat (auch ein leeres wie hidden=""), sonst false.

Beispiele

Einfache Prüfung

const a = document.createElement('div');
const b = document.createElement('div');
b.setAttribute('class', 'box');

console.log(a.hasAttributes());
console.log(b.hasAttributes());

false true

Alle Attribute eines Elements entfernen

const stripAttributes = (el) => {
  while (el.hasAttributes()) {
    el.removeAttribute(el.attributes[0].name);
  }
};

const img = document.createElement('img');
img.src = 'logo.png';
img.alt = 'Logo';
img.dataset.id = '42';

stripAttributes(img);
console.log(img.outerHTML);

<img>

Elemente ohne Attribute im Dokument finden

const bare = [...document.body.querySelectorAll('*')]
  .filter((el) => !el.hasAttributes());

console.log(`${bare.length} Elemente ohne Attribute`);
bare.forEach((el) => console.log(el.tagName));

z. B. "3 Elemente ohne Attribute" gefolgt von Tag-Namen wie P, SPAN, LI

Attribute auflisten, falls vorhanden

const describe = (el) =>
  el.hasAttributes()
    ? el.getAttributeNames().map((n) => `${n}="${el.getAttribute(n)}"`).join(' ')
    : '(keine Attribute)';

const link = document.createElement('a');
link.href = '/kontakt';
link.target = '_blank';

console.log(describe(link));
console.log(describe(document.createElement('p')));

href="/kontakt" target="_blank" (keine Attribute)

// Wichtig · Fallstricke

Nicht verwechseln: hasAttributes() nimmt keine Argumente. Übergibst du trotzdem einen Namen wie el.hasAttributes('id'), wird er ignoriert und du bekommst kein Fehlersignal. Für ein bestimmtes Attribut nimmst du hasAttribute('id').
Geprüft werden nur Inhaltsattribute, also Attribute im Markup. DOM-Eigenschaften, die ohne gleichnamiges Attribut gesetzt werden, zählen nicht, zum Beispiel input.value = 'x' oder el.onclick = fn. el.id = 'x' oder el.className = 'y' setzen dagegen ein Attribut und zählen mit.
Auch leere Attribute wie <input disabled> oder class="" zählen. Wurde el.style einmal beschrieben, bleibt ein style-Attribut stehen, selbst wenn es inzwischen leer ist.
Die Methode ist nur für Element definiert. Auf Text- oder Kommentarknoten fehlt sie, dort führt der Aufruf zu einem TypeError. Beim Durchlaufen von childNodes solltest du deshalb vorher node.nodeType === Node.ELEMENT_NODE prüfen.
Kompatibilität: wird von allen modernen Browsern unterstützt und ist in jsdom für Node.js verfügbar. Sehr alte Versionen des Internet Explorer (vor IE 9) hatten die Methode nicht.

Siehe auch

Element.hasAttribute() Element.attributes Element.getAttributeNames() Element.getAttribute() Element.removeAttribute() NamedNodeMap InstallEvent.addRoutes()