aboutsummaryrefslogtreecommitdiff
path: root/files/ja/web
diff options
context:
space:
mode:
Diffstat (limited to 'files/ja/web')
-rw-r--r--files/ja/web/api/domtokenlist/add/index.html66
-rw-r--r--files/ja/web/api/domtokenlist/remove/index.html85
2 files changed, 76 insertions, 75 deletions
diff --git a/files/ja/web/api/domtokenlist/add/index.html b/files/ja/web/api/domtokenlist/add/index.html
index 116b1c46c8..d235077f5d 100644
--- a/files/ja/web/api/domtokenlist/add/index.html
+++ b/files/ja/web/api/domtokenlist/add/index.html
@@ -2,36 +2,38 @@
title: DOMTokenList.add()
slug: Web/API/DOMTokenList/add
tags:
- - API
- - Add
- - DOM
- - DOMTokenList
- - Reference
- - メソッド
+- API
+- Add
+- DOM
+- DOMTokenList
+- Method
+- Reference
+- メソッド
translation_of: Web/API/DOMTokenList/add
---
<p>{{APIRef("DOM")}}</p>
<p>{{domxref("DOMTokenList")}} インターフェイスの <code><strong>add()</strong></code> メソッドは、指定された<em>トークン</em>をリストに追加します。</p>
-<h2 id="Syntax" name="Syntax">構文</h2>
+<h2 id="Syntax">構文</h2>
-<pre class="syntaxbox">tokenList.add(token1[, token2[, ...]]);</pre>
+<pre
+ class="brush: js"><var>tokenList</var>.add(<var>token1</var>[, <var>token2</var>[, ...<var>tokenN</var>]]);</pre>
<h3 id="Parameters" name="Parameters">引数</h3>
<dl>
- <dt>token<em>N</em></dt>
- <dd>リストに追加したいトークンを表す {{domxref("DOMString")}} です。</dd>
+ <dt><code><var>token<em>N</em></var></code></dt>
+ <dd><code><var>tokenList</var></code> に追加したいトークンを表す {{domxref("DOMString")}} です。</dd>
</dl>
-<h3 id="Return_value" name="Return_value">返値</h3>
+<h3 id="Return_value">返値</h3>
<p>なし。</p>
-<h2 id="Examples" name="Examples">例</h2>
+<h2 id="Examples">例</h2>
-<p>以下の例では、 {{htmlelement("span")}} 要素に設定されたクラスのリストを、 {{domxref("Element.classList")}} を使用して <code>DOMTokenList</code> として受け取ります。それからリストに新しいトークンを追加し、リストを <code>&lt;span&gt;</code> の {{domxref("Node.textContent")}} に書き込みます。</p>
+<p>以下の例では、 {{htmlelement("span")}} 要素に設定されたクラスのリストを <code>DOMTokenList</code> として受け取るのに {{domxref("Element.classList")}} を使用しています。それからリストに新しいトークンを追加し、リストを <code>&lt;span&gt;</code> の {{domxref("Node.textContent")}} に書き込みます。</p>
<p>最初に HTML です。</p>
@@ -39,8 +41,8 @@ translation_of: Web/API/DOMTokenList/add
<p>そして JavaScript です。</p>
-<pre class="brush: js">var span = document.querySelector("span");
-var classes = span.classList;
+<pre class="brush: js">let span = document.querySelector("span");
+let classes = span.classList;
classes.add("d");
span.textContent = classes;
</pre>
@@ -54,27 +56,25 @@ span.textContent = classes;
<pre class="brush: js">span.classList.add("d", "e", "f");
</pre>
-<h2 id="Specifications" name="Specifications">仕様策定状況</h2>
+<h2 id="Specifications">仕様書</h2>
<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">仕様書</th>
- <th scope="col">策定状況</th>
- <th scope="col">コメント</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-add','add()')}}</td>
- <td>{{Spec2('DOM WHATWG')}}</td>
- <td>初回定義</td>
- </tr>
- </tbody>
+ <thead>
+ <tr>
+ <th scope="col">仕様書</th>
+ <th scope="col">状態</th>
+ <th scope="col">備考</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-add','add()')}}</td>
+ <td>{{Spec2('DOM WHATWG')}}</td>
+ <td>初回定義</td>
+ </tr>
+ </tbody>
</table>
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
-
-<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat("api.DOMTokenList.add")}}</p>
diff --git a/files/ja/web/api/domtokenlist/remove/index.html b/files/ja/web/api/domtokenlist/remove/index.html
index f4615ae700..5a5113de04 100644
--- a/files/ja/web/api/domtokenlist/remove/index.html
+++ b/files/ja/web/api/domtokenlist/remove/index.html
@@ -2,83 +2,84 @@
title: DOMTokenList.remove()
slug: Web/API/DOMTokenList/remove
tags:
- - API
- - DOM
- - DOMTokenList
- - Reference
- - remove
- - メソッド
+- API
+- DOM
+- DOMTokenList
+- Method
+- Reference
+- remove
+- メソッド
translation_of: Web/API/DOMTokenList/remove
---
<p>{{APIRef("DOM")}}</p>
<p>{{domxref("DOMTokenList")}} インターフェイスの <code><strong>remove()</strong></code> メソッドは、リストから指定された<em>トークン</em>を削除します。</p>
-<h2 id="Syntax" name="Syntax">構文</h2>
+<h2 id="Syntax">構文</h2>
-<pre class="syntaxbox">tokenList.remove(token1[, token2[, ...]]);</pre>
+<pre
+ class="brush: js"><var>tokenList</var>.remove(<var>token1</var>[, <var>token2</var>[, ...<var>tokenN</var>]]);</pre>
-<h3 id="Parameters" name="Parameters">引数</h3>
+<h3 id="Parameters">引数</h3>
<dl>
- <dt>token<em>N</em>...</dt>
- <dd>リストから削除したいトークンを表す {{domxref("DOMString")}} です。リストに文字列がない場合、エラーはスローされず、何も起こりません。</dd>
+ <dt><code><var>token<em>N</em></var></code></dt>
+ <dd>リストから削除したいトークンを表す {{domxref("DOMString")}} です。リストに文字列がない場合、エラーはスローされず、何も起こりません。</dd>
</dl>
-<h3 id="Return_value" name="Return_value">返値</h3>
+<h3 id="Return_value">返値</h3>
<p>なし。</p>
-<h2 id="Examples" name="Examples">例</h2>
+<h2 id="Examples">例</h2>
<p>以下の例では、 {{htmlelement("span")}} 要素に設定されたクラスのリストを、 {{domxref("Element.classList")}} を使って <code>DOMTokenList</code> として受け取ります。それからリストからトークンを削除し、 <code>&lt;span&gt;</code> の {{domxref("Node.textContent")}} の中にリストを書き込みます。</p>
<p>最初に HTML です。</p>
-<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+<pre class="brush: html">&lt;div id="ab" class="a b c"&gt;&lt;/div&gt;
+&lt;div id="a" class="a b c"&gt;&lt;/div&gt;</pre>
<p>そして JavaScript です。</p>
-<pre class="brush: js">var span = document.querySelector("span");
-var classes = span.classList;
+<pre class="brush: js">let span = document.getElementById("ab");
+let classes = span.classList;
classes.remove("c");
span.textContent = classes;
</pre>
-<p>出力結果は以下のようになります。</p>
+<p>複数のクラスを一度に削除するために、複数のトークンを渡すことができます。渡す順序は、リスト中に出現する順序と一致している必要はありません。</p>
-<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+<pre class="brush: js">let span2 = document.getElementById("a")
+let classes2 = span2.classList;
-<p>複数のクラスを一度に削除するには、複数のトークンを提供するだけです。提供する順序は、リスト中に出現する順序と一致している必要はありません。</p>
+classes2.remove("c", "b");
+span2.textContent = classes2;
+</pre>
-<pre class="brush: js">let span = document.getElementsByTagName("span")[0],
- classes = span.classList;
+<p>出力結果は以下のようになります。</p>
-classes.remove("c", "b");
-span.textContent = classes;
-</pre>
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
-<h2 id="Specifications" name="Specifications">仕様策定状況</h2>
+<h2 id="Specifications">仕様書</h2>
<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">仕様書</th>
- <th scope="col">策定状況</th>
- <th scope="col">コメント</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-remove','remove()')}}</td>
- <td>{{Spec2('DOM WHATWG')}}</td>
- <td>初回定義</td>
- </tr>
- </tbody>
+ <thead>
+ <tr>
+ <th scope="col">仕様書</th>
+ <th scope="col">状態</th>
+ <th scope="col">備考</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-remove','remove()')}}</td>
+ <td>{{Spec2('DOM WHATWG')}}</td>
+ <td>初回定義</td>
+ </tr>
+ </tbody>
</table>
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
-
-<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat("api.DOMTokenList.remove")}}</p>
generated by cgit v1.2.3-54-g00ecf (git 2.39.0) at 2025-11-04 05:37:36 +0000