DOMTokenList.contains() — Methode · JavaScript-Referenz

Signatur

DOMTokenList.prototype.contains(token)

Beschreibung

Die Methode contains() der Schnittstelle DOMTokenList prüft, ob ein bestimmtes Token in der Liste vorkommt. Am häufigsten nutzt man sie über element.classList.contains('klasse'), um festzustellen, ob ein Element eine CSS-Klasse trägt. Sie funktioniert aber genauso bei anderen Token-Listen wie element.relList (bei <a>, <link>, <form>), iframe.sandbox oder output.htmlFor.

Im Vergleich zu älteren Lösungen, etwa element.className.split(' ').includes(...) oder regulären Ausdrücken, ist contains() lesbarer, schneller und robuster: Mehrfache Leerzeichen, Tabulatoren oder Zeilenumbrüche im class-Attribut spielen keine Rolle, weil die Liste bereits in einzelne Tokens aufgeteilt ist.

Der Vergleich ist exakt und case-sensitiv: 'Active' und 'active' sind verschiedene Tokens, und Teilstrings werden nicht gefunden ('btn' passt nicht auf 'btn-primary'). Typische Einsatzfälle sind Zustandsabfragen in Event-Handlern (z. B. „ist das Menü offen?“), Event-Delegation und bedingte Logik vor dem Hinzufügen oder Entfernen von Klassen.

Parameter

Name	Typ	Default	Beschreibung
$token Pflicht	string		Das gesuchte Token, z. B. ein Klassenname. Andere Werte werden in einen String umgewandelt (`null` wird zu `'null'`). Groß-/Kleinschreibung wird beachtet.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das Token in der Liste vorkommt, sonst false.

Beispiele

Prüfen, ob ein Element eine Klasse hat

const box = document.createElement('div');
box.className = 'card  card--highlight\tvisible';

console.log(box.classList.contains('card'));            // exakter Treffer
console.log(box.classList.contains('visible'));         // Tabulator ist kein Problem
console.log(box.classList.contains('Card'));            // case-sensitiv
console.log(box.classList.contains('card--'));          // kein Teilstring-Treffer

true true false false

Menü per Klick öffnen und schließen

const nav = document.querySelector('.main-nav');
const toggle = document.querySelector('.nav-toggle');

toggle.addEventListener('click', () => {
  const isOpen = nav.classList.contains('is-open');
  nav.classList.toggle('is-open', !isOpen);
  toggle.setAttribute('aria-expanded', String(!isOpen));
  console.log(isOpen ? 'Menü geschlossen' : 'Menü geöffnet');
});

Menü geöffnet (beim ersten Klick)

Event-Delegation mit Klassenprüfung

const list = document.querySelector('#todo-list');

list.addEventListener('click', (event) => {
  const target = event.target;
  if (!(target instanceof Element)) return;

  if (target.classList.contains('delete-btn')) {
    target.closest('li')?.remove();
  } else if (target.classList.contains('done-btn')) {
    target.closest('li')?.classList.add('done');
  }
});

Andere Token-Listen: relList und sandbox

const link = document.createElement('a');
link.href = 'https://example.com';
link.rel = 'noopener noreferrer';
console.log(link.relList.contains('noopener'));

const frame = document.createElement('iframe');
frame.setAttribute('sandbox', 'allow-scripts');
console.log(frame.sandbox.contains('allow-same-origin'));

true false

// Wichtig · Fallstricke

Nur ein Token: contains() nimmt genau ein Token entgegen. Weitere Argumente werden ignoriert. Um mehrere Klassen zu prüfen, z. B. ['a', 'b'].every(c => el.classList.contains(c)) verwenden – oder el.matches('.a.b').
Keine Leerzeichen: Anders als add() oder remove() wirft contains() bei Tokens mit Leerzeichen oder bei leerem String keinen Fehler, sondern gibt einfach false zurück. contains('a b') ist also immer false.
Nicht verwechseln mit Node.prototype.contains(), das prüft, ob ein Knoten Nachfahre eines anderen ist.
Typumwandlung: Nicht-String-Werte werden in Strings umgewandelt; contains(undefined) sucht nach dem Token 'undefined'.
SVG: In sehr alten Browsern (IE, alter Edge) fehlte classList auf SVG-Elementen. In allen aktuellen Browsern wird die Methode vollständig unterstützt.
Bei event.target sicherstellen, dass es ein Element ist (Textknoten haben kein classList).

Siehe auch

DOMTokenList Element.classList DOMTokenList.add() DOMTokenList.remove() DOMTokenList.toggle() DOMTokenList.replace() Element.matches() Node.contains()