DOMTokenList
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
DOMTokenList
接口表示一组空格分隔的标记(tokens)。如由 Element.classList
、HTMLLinkElement.relList
、HTMLAnchorElement.relList
或 HTMLAreaElement.relList
返回的一组值。它和 JavaScript Array
对象一样,索引从 0 开始。DOMTokenList
总是区分大小写(case-sensitive)。
属性
DOMTokenList.length
只读-
一个整数,表示存储在该对象里值的个数。
DOMTokenList.value
-
该属性以
DOMString
的形式返回DOMTokenList
列表的值。
方法
DOMTokenList.item(index)
-
根据传入的索引值返回一个值,如果索引值大于等于符号列表的长度(
length
),则返回undefined
或null
,在 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(oldToken, newToken)
-
使用
newToken
替换token
_ 。_ DOMTokenList.supports(token)
-
如果传入的
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()
-
返回一个迭代器(
iterator
),以遍历这个对象中的所有键值对。 DOMTokenList.forEach(callback [, thisArg])
-
为每个
DOMTokenList
中的元素都调用一次传入的callback
函数。 DOMTokenList.keys()
-
返回一个迭代器(
iterator
)以遍历这个对象中所有键值对的键。 DOMTokenList.values()
-
返回一个迭代器(
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)和列表中的重复项目。例如:
<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}"`;
输出类似这样:
规范
Specification |
---|
DOM Standard # interface-domtokenlist |
浏览器兼容性
BCD tables only load in the browser
参见
DOMSettableTokenList
(object that extends DOMTokenList with settable .value property)- Firefox bug 501257 - Implement HTML 5's HTMLElement.classList property