DOMTokenList - 表示一组空格分隔的标记

DOMTokenList 接口表示一组空格分隔的标记。这样的集合由 Element.classList，HTMLLinkElement.relList，HTMLAnchorElement.relList，HTMLAreaElement.relList，HTMLIframeElement.sandbox 或 HTMLOutputElement.htmlFor 返回。与 JavaScript Array对象一样，它以 0 开头索引。 DOMTokenList 始终区分大小写。

属性

DOMTokenList.length 只读

是一个 integer，表示存储在对象中的对象数。

DOMTokenList.value

以 DOMString 表示的列表的值。

方法

DOMTokenList.item()

通过索引返回列表中的项目（如果数字大于或等于列表的长度，则返回 undefined）。

DOMTokenList.contains()

如果列表包含给定的标记，则返回 true，否则返回 false。

DOMTokenList.add()

将给定的标记添加到列表中。

DOMTokenList.remove()

从列表中删除指定的标记。

DOMTokenList.replace()

用新标记替换现有标记。

DOMTokenList.supports()

如果给定的标记位于关联属性的支持标记中，则返回 true。

DOMTokenList.toggle()

从列表中删除给定的标记并返回 false。如果标记不存在则添加，函数返回 true。

DOMTokenList.entries()

返回 iterator，允许您遍历该对象中包含的所有键/值对。

DOMTokenList.forEach()

每个 DOMTokenList 元素执行一次提供的函数。

DOMTokenList.keys()

返回 iterator，允许您遍历该对象中包含的键/值对的所有键。

DOMTokenList.values()

返回 iterator，允许您遍历该对象中包含的键/值对的所有值。

实例

在下面的简单实例中，我们通过 Element.classList 将 <p> 元素上的类列表获取为一个 DOMTokenList 对象，使用 DOMTokenList.add() 添加一个类 ，然后将 <p> 的 Node.textContent 更新为等于 DOMTokenList 。

首先，HTML：

<p class="a b c"></p>

现在是 JavaScript：

var para = document.querySelector("p");
var classes = para.classList;
para.classList.add("d");
para.textContent = '段落的 classList 是 "' + classes + '"';

输出如下：

<p class="a b c"></p>
<script>
var para = document.querySelector("p");
var classes = para.classList;
para.classList.add("d");
para.textContent = '段落的 classList 是 "' + classes + '"';
</script>

尝试一下 »

移除空格并删除重复项

修改 DOMTokenList 的方法（例如 DOMTokenList.add()）会自动修剪任何多余的空格并从列表中删除重复的值。例如：

<span class="    d   d e f"></span>

var span = document.querySelector("span");
var classes = span.classList;
span.classList.add("x");
span.textContent = 'span 的 classList 是 "' + classes + '"';

输出如下：

<span class="    d   d e f"></span>
<script>
var span = document.querySelector("span");
var classes = span.classList;
span.classList.add("x");
span.textContent = 'span 的 classList 是 "' + classes + '"';
</script>

尝试一下 »

规范

规范	状态	备注
DOM DOMTokenList 的定义	现行的标准	初始定义

桌面浏览器兼容性

移动浏览器兼容性

1. IE 只移除空格 - 它不会删除重复项。

相关链接

• DOMSettableTokenList (继承 DOMTokenList 的对象，可以设置 .value 属性)