HTML DOMTokenList 参考手册

DOMTokenList

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

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

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

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

DOMTokenList 属性和方法

名称 描述
add() 将一个或多个令牌添加到列表中。
contains() 如果列表包含类，则返回 true。
entries() 从列表中返回带有键/值对的迭代器。
forEach() 为列表中的每个令牌执行回调函数。
item() 返回指定索引处的令牌。
keys() 返回包含列表中键的迭代器。
length 返回列表中的令牌数。
remove() 从列表中删除一个或多个令牌。
replace() 替换列表中的令牌。
supports() 如果令牌是属性支持的令牌之一，则返回 true。
toggle() 在列表中的令牌之间切换。
value 以字符串形式返回令牌列表。
values() 返回带有列表中值的迭代器。

实例

例子 1

将 "myStyle" 类添加到元素：

element.classList.add("myStyle");

亲自试一试

例子 2

从元素中删除 "myStyle" 类：

element.classList.remove("myStyle");

亲自试一试

例子 3

打开并关闭 "myStyle"：

element.classList.toggle("myStyle");

亲自试一试

页面下方提供更多实例。

不是数组

DOMTokenList 不是数组！

DOMTokenList 可能看起来像数组，但事实并非如此。

您可以遍历 DOMTokenList 并使用索引引用其令牌。

但是您不能在 DOMTokenList 上使用 Array 方法，如 push()、pop() 或 join()。

实例

例子 1

向元素添加多个类：

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

亲自试一试

例子 2

从元素中删除多个类：

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

亲自试一试

例子 3

获取元素的类名数量：

let numb = element.classList.length;

亲自试一试

例子 4

获取 "myDIV" 元素的类名：

<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>I am myDIV.</p>
</div>

const list = document.getElementById("myDIV").classList;

亲自试一试

例子 5

获取元素的第一个类：

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

亲自试一试

例子 6

元素是否有 "myStyle" 类？

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

亲自试一试

例子 7

如果元素有 "myStyle" 类，则删除 "anotherClass"：

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

亲自试一试

例子 8

在类之间切换，以创建下拉按钮：

document.getElementById("myBtn").onclick = function() {myFunction()};

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

亲自试一试

例子 9

创建粘性导航栏：

// 获取导航栏
const navbar = document.getElementById("navbar");

// 获取导航栏的偏移位置
const sticky = navbar.offsetTop;

// 当您到达其滚动位置时，将 sticky 类添加到导航栏
// 离开滚动位置时将其删除
function myFunction() {
  if (window.pageYOffset  >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

亲自试一试