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() | 返回包含列表中所有值的迭代器 |
示例
给元素添加"myStyle"类:
element.classList.add("myStyle");亲自试一试 »
从元素中移除"myStyle"类:
element.classList.remove("myStyle");亲自试一试 »
开启/关闭"myStyle":
element.classList.toggle("myStyle");亲自试一试 »
以下还有更多示例。
不是数组
DOMTokenList 不是数组!
DOMTokenList 看起来像数组，但它不是。
您可以遍历 DOMTokenList 并使用索引引用其中的 token。
但是您不能对 DOMTokenList 使用数组方法，例如 push()、pop() 或 join()。
获取"myDIV"元素的类名:
<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>I am myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;亲自试一试 »如果元素已具有"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");
}亲自试一试 »创建固定导航栏:
// 获取导航栏
const navbar = document.getElementById("navbar");
// 获取导航栏的偏移位置
const sticky = navbar.offsetTop;
// 当滚动到导航栏的指定位置时，为其添加粘性类
// 当滚动离开指定位置时，移除粘性类
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}亲自试一试 »