add, removeを更新

2021/02/20 時点の英語版に同期

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>