HTML DOMTokenList

DOM令牌列表

DOMTokenList是一组空格分隔的标记。

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

长度属性返回 DOMTokenList 中的令牌数量。

笔记

这个classList 属性HTML 元素的代表一个 DOMTokenList。

DOMTokenList 属性和方法

Name	Description
add()	Adds one or more tokens to the list
contains()	Returns true if the list contains a class
entries()	Returns an Iterator with key/value pairs from the list
forEach()	Executes a callback function for each token in the list
item()	Returns the token at a specified index
keys()	Returns an Iterator with the keys in the list
length	Returns the number of tokens in the list
remove()	Removes one or more tokens from the list
replace()	Replaces a token in the list
supports()	Returns true if a token is one of an attribute's supported tokens
toggle()	Toggles between tokens in the list
value	Returns the token list as a string
values()	Returns an Iterator with the values in the list

示例

将 "myStyle" 类添加到元素：

element.classList.add("myStyle");

亲自试一试 »

从元素中删除 "myStyle" 类：

element.classList.remove("myStyle");

亲自试一试 »

打开和关闭"myStyle"：

element.classList.toggle("myStyle");

亲自试一试 »

下面有更多示例。

不是数组

DOMTokenList 不是数组！

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

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

但是您不能在 DOMTokenList 上使用像 push()、pop() 或 join() 这样的数组方法。

向 an 元素添加多个类：

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

亲自试一试 »

从一个元素中删除多个类：

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

亲自试一试 »

获取元素的类名数量：

let numb = element.classList.length;

亲自试一试 »

获取 "myDIV" 元素的类名称：

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

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

亲自试一试 »

获取元素的第一个类：

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

亲自试一试 »

an 元素是否有 "myStyle" 类？

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

亲自试一试 »

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

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

亲自试一试 »

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

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

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

亲自试一试 »

创建粘性导航栏：

// Get the navbar
const navbar = document.getElementById("navbar");

// Get the offset position of the navbar
const sticky = navbar.offsetTop;

// Add the sticky class to the navbar when you reach its scroll position
// Remove it when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}

亲自试一试 »