DOMTokenList

DOMTokenList 接口表示一组空格分隔的标记(tokens)。如由 Element.classListHTMLLinkElement.relList (en-US)HTMLAnchorElement.relList (en-US)HTMLAreaElement.relList (en-US) 返回的一组值。它和 JavaScript Array 对象一样,索引从 0 开始。DOMTokenList 总是区分大小写(case-sensitive)。

属性

DOMTokenList.length 只读
一个整数,表示存储在该对象里值的个数。
DOMTokenList.value (en-US)
该属性以 DOMString 的形式返回 DOMTokenList 列表的值。

方法

DOMTokenList.item(index)
根据传入的索引值返回一个值,如果索引值大于等于符号列表的长度(length),则返回 undefinednull,在 Gecko 7.0 之前的版本中返回 null
DOMTokenList.contains(token)
如果 DOMTokenList 列表中包括相应的字符串 token,则返回 true,否则返回 false
DOMTokenList.add(token1[, token2[, ...tokenN]])
添加一个或多个标记(token)到 DOMTokenList 列表中。
DOMTokenList.remove(token1[, token2[, ...tokenN]])
DOMTokenList 列表中移除一个或多个标记(token)。
DOMTokenList.replace(oldTokennewToken)
使用 newToken 替换 token 。
DOMTokenList.supports(token) (en-US)
如果传入的 token 是相关属性(attribute)支持的标记,则返回 true 。
DOMTokenList.toggle(token [, force])
从 DOMTokenList 字符串中移除标记字串(token),并返回 false。如果传入的字串(token)不存在,则将其添加进去,并返回 true 。force 是一个可选的布尔值,如果传入 true ,且传入的 token 不存在,则将其添加进去并返回 true ,若传入的 token 存在,则直接返回 true ;反之,如果传入 false ,则移除存在的 token ,并返回 false ,如 token 不存在则直接返回 false 。
DOMTokenList.entries() (en-US)
返回一个迭代器(iterator) ,以遍历这个对象中的所有键值对。
DOMTokenList.forEach(callback [, thisArg]) (en-US)
为每个 DOMTokenList 中的元素都调用一次传入的 callback 函数 。
DOMTokenList.keys()
返回一个迭代器(iterator)以遍历这个对象中所有键值对的键。
DOMTokenList.values() (en-US)
返回一个迭代器(iterator)以遍历这个对象中所有键值对的值。

示例

在下面这个简单的例子中,我们使用 Element.classList 获取了 <p> 元素的class列表,也就是一个DOMTokenList ,再使用 DOMTokenList.add() 添加了一个class,然后更新 <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())会自动去除多余的空格(Whitespace (en-US))和列表中的重复项目。例如:

<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
DOMTokenList
Living Standard Initial definition

浏览器兼容性

BCD tables only load in the browser

相关链接