HTML DOMTokenList 参考手册

DOMTokenList

DOMTokenList 是一组空格分隔的令牌。

可以通过索引访问 DOMTokenList（从 0 开始）。

length 属性返回 DOMTokenList 中的令牌数。

注释：HTML 元素的 classList 属性表示 DOMTokenList。

DOMTokenList 属性和方法

名称 描述
add() 将一个或多个令牌添加到列表中。
contains() 如果列表包含类，则返回 true。
entries() 返回一个带有键/值对的迭代器。
forEach() Führt eine Callback-Funktion für jedes Token in der Liste aus.
item() Gibt das Token an der angegebenen Indexposition zurück.
keys() Gibt einen Iterator zurück, der die Schlüssel in der Liste enthält.
length Gibt die Anzahl der Tokens in der Liste zurück.
remove() Entfernt ein oder mehrere Token aus der Liste.
replace() Ersetzt ein Token in der Liste.
supports() Gibt true zurück, wenn das Token eines der unterstützten Attribut-Token ist.
toggle() Schalten Sie zwischen den Token in der Liste um.
value Geben Sie die Tokenliste als String zurück.
values() Geben Sie einen Iterator zurück, der die Werte der Liste enthält.

Beispiel

Beispiel 1

Fügen Sie die Klasse "myStyle" dem Element hinzu:

Die Klasse "myStyle" dem Element hinzufügen:

Selbst ausprobieren

Beispiel 2

Die Klasse "myStyle" vom Element entfernen:

element.classList.remove("myStyle");

Selbst ausprobieren

Beispiel 3

Öffnen und Schließen von "myStyle":

element.classList.toggle("myStyle");

Selbst ausprobieren

Unten auf der Seite finden Sie mehr Beispiele.

Kein Array

DOMTokenList ist kein Array!

DOMTokenList sieht möglicherweise wie ein Array aus, ist aber nicht wirklich eines.

Sie können DOMTokenList durchlaufen und ihre Token mit Indizes referenzieren.

Sie können jedoch keine Array-Methode auf DOMTokenList verwenden, wie push(), pop() oder join().

Beispiel

Beispiel 1

Mehrere Klassen dem Element hinzufügen:

element.classList.add("myStyle", "anotherClass", "thirdClass");

Selbst ausprobieren

Beispiel 2

Mehrere Klassen vom Element entfernen:

element.classList.remove("myStyle", "anotherClass", "thirdClass");

Selbst ausprobieren

Beispiel 3

Die Anzahl der Klassen des Elements abrufen:

let numb = element.classList.length;

Selbst ausprobieren

Beispiel 4

Die Klassenname des Elements "myDIV" abrufen:

<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>I am myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;

Selbst ausprobieren

Beispiel 5

Erhalten Sie die erste Klasse des Elements:

let className = element.classList.item(0);

Selbst ausprobieren

Beispiel 6

Haben das Element die "myStyle"-Klasse?

let x = element.classList.contains("myStyle");

Selbst ausprobieren

Beispiel 7

Entfernen Sie "anotherClass", wenn das Element die "myStyle"-Klasse hat:

if (element.classList.contains("mystyle")) {
  element.classList.remove("anotherClass");
}

Selbst ausprobieren

Beispiel 8

Schalten Sie zwischen Klassen, um einen Dropdown-Button zu erstellen:

document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

Selbst ausprobieren

Beispiel 9

Erstellen Sie eine festsitzende Navigationsleiste:

// Bekommen Sie die Navigationsleiste
const navbar = document.getElementById("navbar");
// Bekommen Sie den Verschiebeposition der Navigationsleiste
const sticky = navbar.offsetTop;
// Fügen Sie die sticky-Klasse zur Navigationsleiste hinzu, wenn Sie die Rollenposition erreichen
// Entfernen Sie es, wenn Sie die Rollenposition verlassen
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

Selbst ausprobieren