DOMTokenList
DOMTokenList
接口表示一组用空格分隔的标记。 这种集合由 Element.classList
或 HTMLLinkElement.relList
以及许多其他方法返回。
DOMTokenList
从 0
开始索引,与 JavaScript Array
对象类似。 DOMTokenList
始终区分大小写。
实例属性
DOMTokenList.length
只读-
表示对象中存储的对象数量的
整数
。 DOMTokenList.value
-
一个 字符串化器 属性,返回列表的值作为字符串。
实例方法
DOMTokenList.item()
-
通过其索引返回列表中的项目,如果索引大于或等于列表的
length
,则返回null
。 DOMTokenList.contains()
-
如果列表包含给定的标记,则返回
true
,否则返回false
。 DOMTokenList.add()
-
将指定的标记添加到列表中。
DOMTokenList.remove()
-
从列表中删除指定的标记。
DOMTokenList.replace()
-
用另一个标记替换标记。
DOMTokenList.supports()
-
如果给定的标记在关联属性的支持的标记中,则返回
true
。 DOMTokenList.toggle()
-
如果标记存在,则将其从列表中删除,如果不存在,则将其添加到列表中。 返回一个布尔值,指示操作后标记是否在列表中。
DOMTokenList.entries()
-
返回一个 迭代器,允许您遍历此对象中包含的所有键值对。
DOMTokenList.forEach()
-
对每个
DOMTokenList
元素执行一次提供的回调函数。 DOMTokenList.keys()
-
返回一个 迭代器,允许您遍历此对象中包含的键值对的所有键。
DOMTokenList.values()
-
返回一个 迭代器,允许您遍历此对象中包含的键值对的所有值。
示例
在以下简单的示例中,我们使用 Element.classList
从 <p>
元素中检索设置的类列表作为 DOMTokenList
,使用 DOMTokenList.add()
添加一个类,然后更新 <p>
的 Node.textContent
以使其等于 DOMTokenList
。
首先,HTML
<p class="a b c"></p>
现在是 JavaScript
let para = document.querySelector("p");
let classes = para.classList;
para.classList.add("d");
para.textContent = `paragraph classList is "${classes}"`;
输出看起来像这样
修剪空白字符和删除重复项
修改 DOMTokenList
的方法(例如 DOMTokenList.add()
)会自动修剪任何多余的 空白字符 并从列表中删除重复的值。 例如
<span class=" d d e f"></span>
let span = document.querySelector("span");
let classes = span.classList;
span.classList.add("x");
span.textContent = `span classList is "${classes}"`;
输出看起来像这样
规范
规范 |
---|
DOM 标准 # interface-domtokenlist |
浏览器兼容性
BCD 表格仅在启用 JavaScript 的浏览器中加载。