Element.hasAttribute() — Methode · JavaScript-Referenz

Signatur

Element.prototype.hasAttribute(name)

Beschreibung

Element.hasAttribute() prüft, ob ein bestimmtes Attribut am Element vorhanden ist. Der Wert des Attributs spielt dabei keine Rolle: Auch ein leeres Attribut wie <input disabled> oder data-x="" gilt als vorhanden.

Die Methode eignet sich besonders für boolesche Attribute (disabled, hidden, required, open) und für Markierungs-Attribute wie data-* oder aria-*, bei denen allein das Vorhandensein zählt. Sie ist klarer und zuverlässiger als getAttribute(name) !== null, weil sie genau diese Absicht ausdrückt.

Bei HTML-Elementen in einem HTML-Dokument wird der Attributname vor dem Vergleich in Kleinbuchstaben umgewandelt, hasAttribute("ID") findet also auch id. Bei SVG- oder XML-Elementen wird dagegen zwischen Groß- und Kleinschreibung unterschieden (z. B. viewBox).

Parameter

Name	Typ	Default	Beschreibung
$name Pflicht	string		Name des gesuchten Attributs, z. B. `"disabled"` oder `"data-id"`. Werte, die keine Strings sind, werden in einen String umgewandelt.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das Element das Attribut besitzt (auch mit leerem Wert), sonst false.

Beispiele

Boolesches Attribut prüfen

// HTML: <button id="send" disabled>Senden</button>
const button = document.querySelector('#send');

console.log(button.hasAttribute('disabled'));
console.log(button.hasAttribute('title'));

true false

Leerer Wert zählt trotzdem als vorhanden

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

console.log(div.hasAttribute('data-active'));   // true
console.log(div.getAttribute('data-active'));   // "" (leerer String)

div.removeAttribute('data-active');
console.log(div.hasAttribute('data-active'));   // false

true "" false

Aufklapp-Menü per aria-expanded umschalten

// HTML: <button class="toggle" aria-controls="menu">Menü</button>
//       <ul id="menu" hidden>...</ul>
document.querySelectorAll('.toggle').forEach((btn) => {
  btn.addEventListener('click', () => {
    const menu = document.getElementById(btn.getAttribute('aria-controls'));
    const isHidden = menu.hasAttribute('hidden');

    // Sichtbarkeit und ARIA-Zustand synchron halten
    menu.toggleAttribute('hidden', !isHidden);
    btn.setAttribute('aria-expanded', String(isHidden));
  });
});

Groß-/Kleinschreibung bei HTML vs. SVG

const input = document.createElement('input');
input.setAttribute('required', '');
console.log(input.hasAttribute('REQUIRED')); // HTML: Name wird kleingeschrieben

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('viewBox', '0 0 100 100');
console.log(svg.hasAttribute('viewBox'));
console.log(svg.hasAttribute('viewbox'));

true true false

// Wichtig · Fallstricke

Attribut und Eigenschaft sind nicht dasselbe: hasAttribute('value') prüft das HTML-Attribut (den Anfangswert), nicht die aktuelle Eigenschaft input.value. Ebenso ändert checkbox.checked = true das Attribut checked nicht.
Der Wert wird nicht ausgewertet: disabled="false" ergibt trotzdem true, denn bei booleschen HTML-Attributen zählt nur, ob sie vorhanden sind.
Für Attribute mit Namensraum (z. B. xlink:href) gibt es hasAttributeNS(namespace, localName).
Um zu prüfen, ob ein Element überhaupt Attribute hat, gibt es Element.hasAttributes() (Plural).
Browser-Kompatibilität: wird von allen gängigen Browsern seit Langem unterstützt, ab Internet Explorer 8.

Siehe auch

Element.getAttribute() Element.setAttribute() Element.removeAttribute() Element.toggleAttribute() Element.hasAttributeNS() Element.hasAttributes() HTMLElement.dataset