From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/api/domtokenlist/index.html | 118 ++++++++++++++++++++++++++++ 1 file changed, 118 insertions(+) create mode 100644 files/zh-cn/web/api/domtokenlist/index.html (limited to 'files/zh-cn/web/api/domtokenlist/index.html') diff --git a/files/zh-cn/web/api/domtokenlist/index.html b/files/zh-cn/web/api/domtokenlist/index.html new file mode 100644 index 0000000000..e67bee5432 --- /dev/null +++ b/files/zh-cn/web/api/domtokenlist/index.html @@ -0,0 +1,118 @@ +--- +title: DOMTokenList +slug: Web/API/DOMTokenList +tags: + - API + - DOM + - DOMTokenList + - Interface + - Renference +translation_of: Web/API/DOMTokenList +--- +

{{APIRef}}{{ gecko_minversion_header("1.9.2") }}

+ +

DOMTokenList 接口表示一组空格分隔的标记（tokens）。如由 {{ domxref("Element.classList") }}、{{domxref("HTMLLinkElement.relList")}}、{{domxref("HTMLAnchorElement.relList")}} 或 {{domxref("HTMLAreaElement.relList")}} 返回的一组值。它和 JavaScript {{jsxref("Array")}} 对象一样，索引从 0 开始。DOMTokenList 总是区分大小写（case-sensitive）。

+ +

属性

+ +
+
{{ domxref("DOMTokenList.length") }} {{ReadOnlyInline}}
+
一个整数，表示存储在该对象里值的个数。
+
{{domxref("DOMTokenList.value")}}
+
该属性以 {{domxref("DOMString")}} 的形式返回 DOMTokenList 列表的值。
+
+ +

方法

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

示例

+ +

在下面这个简单的例子中，我们使用 {{domxref("Element.classList")}} 获取了 {{htmlelement("p")}} 元素的class列表，也就是一个DOMTokenList ，再使用 {{domxref("DOMTokenList.add()")}} 添加了一个class，然后更新 <p> 元素的{{domxref("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 的方法（例如 {{domxref("DOMTokenList.add()")}}）会自动去除多余的空格（{{Glossary("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}"`;
+ +

输出类似这样：

+ +

+ +
+
+
+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName("DOM WHATWG", "#interface-domtokenlist", "DOMTokenList")}}{{Spec2("DOM WHATWG")}}Initial definition
+ +

浏览器兼容性

+ +

{{Compat("api.DOMTokenList")}}

+ +

相关链接

+ + -- cgit v1.2.3-54-g00ecf