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/ja/web/api/domtokenlist/add/index.html | 80 ++++++++++++++++ files/ja/web/api/domtokenlist/index.html | 116 ++++++++++++++++++++++++ files/ja/web/api/domtokenlist/remove/index.html | 84 +++++++++++++++++ 3 files changed, 280 insertions(+) create mode 100644 files/ja/web/api/domtokenlist/add/index.html create mode 100644 files/ja/web/api/domtokenlist/index.html create mode 100644 files/ja/web/api/domtokenlist/remove/index.html (limited to 'files/ja/web/api/domtokenlist') diff --git a/files/ja/web/api/domtokenlist/add/index.html b/files/ja/web/api/domtokenlist/add/index.html new file mode 100644 index 0000000000..116b1c46c8 --- /dev/null +++ b/files/ja/web/api/domtokenlist/add/index.html @@ -0,0 +1,80 @@ +--- +title: DOMTokenList.add() +slug: Web/API/DOMTokenList/add +tags: + - API + - Add + - DOM + - DOMTokenList + - Reference + - メソッド +translation_of: Web/API/DOMTokenList/add +--- +

{{APIRef("DOM")}}

+ +

{{domxref("DOMTokenList")}} インターフェイスの add() メソッドは、指定されたトークンをリストに追加します。

+ +

構文

+ +
tokenList.add(token1[, token2[, ...]]);
+ +

引数

+ +
+
tokenN
+
リストに追加したいトークンを表す {{domxref("DOMString")}} です。
+
+ +

返値

+ +

なし。

+ +

例

+ +

以下の例では、 {{htmlelement("span")}} 要素に設定されたクラスのリストを、 {{domxref("Element.classList")}} を使用して DOMTokenList として受け取ります。それからリストに新しいトークンを追加し、リストを <span> の {{domxref("Node.textContent")}} に書き込みます。

+ +

最初に HTML です。

+ +
<span class="a b c"></span>
+ +

そして JavaScript です。

+ +
var span = document.querySelector("span");
+var classes = span.classList;
+classes.add("d");
+span.textContent = classes;
+
+ +

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

+ +

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

+ +

同様に、複数のトークンを追加することができます。

+ +
span.classList.add("d", "e", "f");
+
+ +

仕様策定状況

+ + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('DOM WHATWG','#dom-domtokenlist-add','add()')}}{{Spec2('DOM WHATWG')}}初回定義
+ +

ブラウザーの対応

+ + + +

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

diff --git a/files/ja/web/api/domtokenlist/index.html b/files/ja/web/api/domtokenlist/index.html new file mode 100644 index 0000000000..4e033f9a6b --- /dev/null +++ b/files/ja/web/api/domtokenlist/index.html @@ -0,0 +1,116 @@ +--- +title: DOMTokenList +slug: Web/API/DOMTokenList +tags: + - API + - DOM + - DOMTokenList + - Interface + - Reference + - インターフェイス +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 は常に大文字と小文字を区別します。

+ +

プロパティ

+ +
+
{{domxref("DOMTokenList.length")}} {{ReadOnlyInline}}
+
integer で、このオブジェクトに格納されているオブジェクトの数を表します。
+
{{domxref("DOMTokenList.value")}}
+
リストの値を {{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.entries()")}}
+
このオブジェクト内に含まれるすべてのキーと値のペアを反復処理することができる {{jsxref("Iteration_protocols","iterator")}} を返します。
+
{{domxref("DOMTokenList.forEach()")}}
+
DOMTokenList オブジェクトの各要素に対して、指定した関数を実行します。
+
{{domxref("DOMTokenList.keys()")}}
+
このオブジェクト内に含まれるすべてのキーと値のペアのうちキーを反復処理することができる {{jsxref("Iteration_protocols", "iterator")}} を返します。
+
{{domxref("DOMTokenList.values()")}}
+
このオブジェクト内に含まれるすべてのキーと値のペアのうち値を反復処理することができる {{jsxref("Iteration_protocols", "iterator")}} を返します。
+
+ +

例

+ +

以下の簡単な例では、 {{htmlelement("p")}} 要素のクラスのリストを {{domxref("Element.classList")}} を使用して DOMTokenList として受け取り、 {{domxref("DOMTokenList.add()")}} を使用してクラスを1つ追加し、最後に <p> の {{domxref("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 = '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;
+span.classList.add("x");
+span.textContent = 'span classList is "' + classes + '"';
+ +

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

+ +

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

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("DOM WHATWG", "#interface-domtokenlist", "DOMTokenList")}}{{Spec2("DOM WHATWG")}}初回定義
+ +

ブラウザーの対応

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/domtokenlist/remove/index.html b/files/ja/web/api/domtokenlist/remove/index.html new file mode 100644 index 0000000000..f4615ae700 --- /dev/null +++ b/files/ja/web/api/domtokenlist/remove/index.html @@ -0,0 +1,84 @@ +--- +title: DOMTokenList.remove() +slug: Web/API/DOMTokenList/remove +tags: + - API + - DOM + - DOMTokenList + - Reference + - remove + - メソッド +translation_of: Web/API/DOMTokenList/remove +--- +

{{APIRef("DOM")}}

+ +

{{domxref("DOMTokenList")}} インターフェイスの remove() メソッドは、リストから指定されたトークンを削除します。

+ +

構文

+ +
tokenList.remove(token1[, token2[, ...]]);
+ +

引数

+ +
+
tokenN...
+
リストから削除したいトークンを表す {{domxref("DOMString")}} です。リストに文字列がない場合、エラーはスローされず、何も起こりません。
+
+ +

返値

+ +

なし。

+ +

例

+ +

以下の例では、 {{htmlelement("span")}} 要素に設定されたクラスのリストを、 {{domxref("Element.classList")}} を使って DOMTokenList として受け取ります。それからリストからトークンを削除し、 <span> の {{domxref("Node.textContent")}} の中にリストを書き込みます。

+ +

最初に HTML です。

+ +
<span class="a b c"></span>
+ +

そして JavaScript です。

+ +
var span = document.querySelector("span");
+var classes = span.classList;
+classes.remove("c");
+span.textContent = classes;
+
+ +

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

+ +

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

+ +

複数のクラスを一度に削除するには、複数のトークンを提供するだけです。提供する順序は、リスト中に出現する順序と一致している必要はありません。

+ +
let span = document.getElementsByTagName("span")[0],
+  classes = span.classList;
+
+classes.remove("c", "b");
+span.textContent = classes;
+
+ +

仕様策定状況

+ + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('DOM WHATWG','#dom-domtokenlist-remove','remove()')}}{{Spec2('DOM WHATWG')}}初回定義
+ +

ブラウザーの対応

+ + + +

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

-- cgit v1.2.3-54-g00ecf