diff options
Diffstat (limited to 'files/ja/web/api/domtokenlist/add/index.html')
| -rw-r--r-- | files/ja/web/api/domtokenlist/add/index.html | 80 |
1 files changed, 80 insertions, 0 deletions
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 +--- +<p>{{APIRef("DOM")}}</p> + +<p>{{domxref("DOMTokenList")}} インターフェイスの <code><strong>add()</strong></code> メソッドは、指定された<em>トークン</em>をリストに追加します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">tokenList.add(token1[, token2[, ...]]);</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt>token<em>N</em></dt> + <dd>リストに追加したいトークンを表す {{domxref("DOMString")}} です。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>なし。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>以下の例では、 {{htmlelement("span")}} 要素に設定されたクラスのリストを、 {{domxref("Element.classList")}} を使用して <code>DOMTokenList</code> として受け取ります。それからリストに新しいトークンを追加し、リストを <code><span></code> の {{domxref("Node.textContent")}} に書き込みます。</p> + +<p>最初に HTML です。</p> + +<pre class="brush: html"><span class="a b c"></span></pre> + +<p>そして JavaScript です。</p> + +<pre class="brush: js">var span = document.querySelector("span"); +var classes = span.classList; +classes.add("d"); +span.textContent = classes; +</pre> + +<p>出力結果は以下のようになります。</p> + +<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p> + +<p>同様に、複数のトークンを追加することができます。</p> + +<pre class="brush: js">span.classList.add("d", "e", "f"); +</pre> + +<h2 id="Specifications" name="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> +</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> + +<p>{{Compat("api.DOMTokenList.add")}}</p> |