From c7c51927bb738ddf64481bd637e3ad9f7eb35ca3 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 6 Apr 2021 00:13:25 +0900 Subject: Web/API/DOMTokenList を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 2020/12/18 時点の英語版に同期 --- files/ja/web/api/domtokenlist/index.html | 76 ++++++++++++++------------------ 1 file changed, 34 insertions(+), 42 deletions(-) (limited to 'files/ja') diff --git a/files/ja/web/api/domtokenlist/index.html b/files/ja/web/api/domtokenlist/index.html index 4e033f9a6b..7769fa0444 100644 --- a/files/ja/web/api/domtokenlist/index.html +++ b/files/ja/web/api/domtokenlist/index.html @@ -12,47 +12,47 @@ translation_of: Web/API/DOMTokenList ---
{{APIRef("DOM")}}
-

DOMTokenList インターフェイスは、スペースで区切られたトークンのセットを表します。こうしたセットは {{domxref("Element.classList")}}、 {{domxref("HTMLLinkElement.relList")}}、 {{domxref("HTMLAnchorElement.relList")}}、 {{domxref("HTMLAreaElement.relList")}},、{{domxref("HTMLIframeElement.sandbox")}}、 {{domxref("HTMLOutputElement.htmlFor")}} 等から返されるものです。インデックスは JavaScript の {{jsxref("Array")}} オブジェクトのように 0 から始まります。 DOMTokenList は常に大文字と小文字を区別します。

+

DOMTokenList インターフェイスは、スペースで区切られたトークンのセットを表します。こうしたセットは {{domxref("Element.classList")}}、{{domxref("HTMLLinkElement.relList")}}、{{domxref("HTMLAnchorElement.relList")}}、{{domxref("HTMLAreaElement.relList")}}、{{domxref("HTMLIframeElement.sandbox")}}、{{domxref("HTMLOutputElement.htmlFor")}} 等から返されるものです。インデックスは JavaScript の {{jsxref("Array")}} オブジェクトのように 0 から始まります。 DOMTokenList は常に大文字と小文字を区別します。

-

プロパティ

+

プロパティ

{{domxref("DOMTokenList.length")}} {{ReadOnlyInline}}
integer で、このオブジェクトに格納されているオブジェクトの数を表します。
{{domxref("DOMTokenList.value")}}
-
リストの値を {{domxref("DOMString")}} で表したものです。
+
文字列化プロパティであり、リストの値を {{domxref("DOMString")}} で返します。
-

メソッド

+

メソッド

-
{{domxref("DOMTokenList.item()")}}
-
リスト内の項目をインデックス指定で返します (数値がリストの長さ以上であれば、 undefined を返します)。
-
{{domxref("DOMTokenList.contains()")}}
-
指定されたトークンがリストに含まれていれば true を返し、そうでなければ falseを返します。
-
{{domxref("DOMTokenList.add()")}}
-
指定されたトークンをリストに追加します。
-
{{domxref("DOMTokenList.remove()")}}
-
指定されたトークンをリストから削除します。
-
{{domxref("DOMTokenList.replace()")}}
-
既存のトークンを新しいトークンで置き換えます。
-
{{domxref("DOMTokenList.supports()")}}
-
指定されたトークンが、関連付けられた属性で対応しているトークンであれば true を返します。
-
{{domxref("DOMTokenList.toggle()")}}
-
指定されたトークンをリストから削除して false を返します。指定されたトークンが存在しなければ、リストに追加して true を返します。
+
{{domxref("DOMTokenList.item()", "DOMTokenList.item(index)")}}
+
そのリスト内で index の位置の項目を返します。 index がそのリストの length 以上であれば undefined を返します。
+
{{domxref("DOMTokenList.contains()", "DOMTokenList.contains(token)")}}
+
指定された token がリストに含まれていれば true を返し、そうでなければ falseを返します。
+
{{domxref("DOMTokenList.add()", "DOMTokenList.add(token1[, token2[, ...tokenN]])")}}
+
指定された token をリストに追加します。
+
{{domxref("DOMTokenList.remove()", "DOMTokenList.remove(token1[, token2[, ...tokenN]])")}}
+
指定された token をリストから削除します。
+
{{domxref("DOMTokenList.replace()", "DOMTokenList.replace(oldToken, newToken)")}}
+
既存の token を newToken で置き換えます。
+
{{domxref("DOMTokenList.supports()", "DOMTokenList.supports(token)")}}
+
指定された token が、関連付けられた属性で対応しているトークンであれば true を返します。
+
{{domxref("DOMTokenList.toggle()", "DOMTokenList.toggle(token [, force])")}}
+
もし token が存在すればリストから削除し、存在しなければ token をリストに追加します。操作後にリスト内に token が存在するかどうかを boolean で返します。
{{domxref("DOMTokenList.entries()")}}
-
このオブジェクト内に含まれるすべてのキーと値のペアを反復処理することができる {{jsxref("Iteration_protocols","iterator")}} を返します。
-
{{domxref("DOMTokenList.forEach()")}}
-
DOMTokenList オブジェクトの各要素に対して、指定した関数を実行します。
+
このオブジェクト内に含まれるすべてのキーと値のペアを反復処理することができる{{jsxref("Iteration_protocols", "反復子", "", 1)}}を返します。
+
{{domxref("DOMTokenList.forEach()", "DOMTokenList.forEach(callback [, thisArg])")}}
+
DOMTokenList オブジェクトの各要素に対して 1 回ずつ、指定した callback 関数を実行します。
{{domxref("DOMTokenList.keys()")}}
-
このオブジェクト内に含まれるすべてのキーと値のペアのうちキーを反復処理することができる {{jsxref("Iteration_protocols", "iterator")}} を返します。
+
このオブジェクト内に含まれるすべてのキーと値のペアのうちキーを反復処理することができる{{jsxref("Iteration_protocols", "反復子", "", 1)}}を返します。
{{domxref("DOMTokenList.values()")}}
-
このオブジェクト内に含まれるすべてのキーと値のペアのうち値を反復処理することができる {{jsxref("Iteration_protocols", "iterator")}} を返します。
+
このオブジェクト内に含まれるすべてのキーと値のペアのうち値を反復処理することができる{{jsxref("Iteration_protocols", "反復子", "", 1)}}を返します。
-

例

+

例

-

以下の簡単な例では、 {{htmlelement("p")}} 要素のクラスのリストを {{domxref("Element.classList")}} を使用して DOMTokenList として受け取り、 {{domxref("DOMTokenList.add()")}} を使用してクラスを1つ追加し、最後に <p> の {{domxref("Node.textContent")}} が DOMTokenList と等しくなるように更新します。

+

以下の簡単な例では、 {{htmlelement("p")}} 要素のクラスのリストを {{domxref("Element.classList")}} を使用して DOMTokenList として受け取り、 {{domxref("DOMTokenList.add()")}} を使用してクラスを 1 つ追加し、最後に <p> の {{domxref("Node.textContent")}} が DOMTokenList と等しくなるように更新します。

まず、 HTML は以下のとおりです。

@@ -60,31 +60,31 @@ translation_of: Web/API/DOMTokenList

そして JavaScript です。

-
var para = document.querySelector("p");
-var classes = para.classList;
+
let para = document.querySelector("p");
+let classes = para.classList;
 para.classList.add("d");
-para.textContent = 'paragraph classList is "' + classes + '"';

+para.textContent = `paragraph classList is "${classes}"`;

出力結果はこのようになります。

{{ EmbedLiveSample('Examples', '100%', 60) }}

-

ホワイトスペースのトリミングと重複の削除

+

ホワイトスペースのトリミングと重複の削除

DOMTokenList を編集するメソッド ({{domxref("DOMTokenList.add()")}} など) は、自動的にそのリストから余分な{{Glossary("Whitespace", "ホワイトスペース")}}をトリミングし、重複した値を削除します。例えば次のようになります。

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

+span.textContent = `span classList is "${classes}"`;

出力結果はこのようになります。

{{ EmbedLiveSample('Trimming_of_whitespace_and_removal_of_duplicates', '100%', 60) }}

-

仕様書

+

仕様書

@@ -103,14 +103,6 @@ span.textContent = 'span classList is "' + classes + '"';
-

ブラウザーの対応

- - +

ブラウザーの互換性

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

- -

関連情報

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