mozilla

Revision 237627 of セレクタを使用した DOM 要素の指定

  • リビジョンの URL スラグ: DOM/Locating_DOM_elements_using_selectors
  • リビジョンのタイトル: セレクタを使用した DOM 要素の指定
  • リビジョンの ID: 237627
  • 作成日:
  • 作成者: RobinEgg
  • 現行リビジョン いいえ
  • コメント 1 words added, 1 words removed
タグ: 

このリビジョンの内容

{{ gecko_minversion_header("1.9.1") }}

セレクタ API により提供されるメソッドを用いることで、セレクタのセットにマッチする要素ノードを簡単に、かつ手早く DOM から抽出することができます。これは過去に使われていたテクニックに比べ随分高速な処理が行われるため、例えば JavaScript コードのループ内部で要素を特定する場合などに威力を発揮します。

NodeSelector インターフェース

この仕様追加に伴い、 Document, DocumentFragment, Element インターフェースを承継している全てのオブジェクトに対し、新たに二種類のメソッドが追加されます:

querySelector
ノード木中から最初にマッチした要素ノードを返します。マッチする要素がなかった場合は null が返されます。
querySelectorAll
ノード木中からマッチした全ての要素ノードを含む NodeList を返します。マッチする要素がなかった場合は空の NodeList が返されます。
注意: querySelectorAll() が返す NodeList は最新のものではありません(訳注: is not live; ノードに対するスクリプト上での操作が反映されていないものが返る、という意味だと思われる)。これは他の DOM クエリメソッドが最新のノードリストを返すのとは対照的であり、注意が必要です。

querySelector()querySelectorAll() メソッドについての文書や、 Code snippets for querySelector には例となるコードやより詳しい解説が記されています。

セレクタ

セレクタ API のメソッドには、カンマで区切られた一つ以上の抽出対象の要素を指定します。例えば、文書中で CSS のクラスが warning または note に指定されている全ての段落要素(p)を抽出するには、次のようにします:

var special = document.querySelectorAll("p.warning, p.note");

もちろん、 ID による指定も可能です。例えば:

var el = document.querySelector("#main, #basic, #exclamation");

上記のコードが実行されると、 el には ID が main, basic, exclamation である要素のうち、最初の要素だけが格納されます。

例で示したように、 querySelector() querySelectorAll() メソッドではどの CSS セレクタでも用いることができます。

参考文献

 

このリビジョンのソースコード

<p>{{ gecko_minversion_header("1.9.1") }}</p>
<p>セレクタ API により提供されるメソッドを用いることで、セレクタのセットにマッチする<a class="internal" href="/ja/DOM/element" title="Ja/DOM/element">要素</a>ノードを簡単に、かつ手早く DOM から抽出することができます。これは過去に使われていたテクニックに比べ随分高速な処理が行われるため、例えば JavaScript コードのループ内部で要素を特定する場合などに威力を発揮します。</p>
<h2>NodeSelector インターフェース</h2>
<p>この仕様追加に伴い、 <a class="internal" href="/ja/DOM/document" title="Ja/DOM/document"><code>Document</code></a>, <a class="internal" href="/Ja/DOM/DocumentFragment" title="Ja/DOM/DocumentFragment"><code>DocumentFragment</code></a>, <a class="internal" href="/ja/DOM/element" title="Ja/DOM/element"><code>Element</code></a> インターフェースを承継している全てのオブジェクトに対し、新たに二種類のメソッドが追加されます:</p>
<dl> <dt><code>querySelector</code></dt> <dd>ノード木中から最初にマッチした要素ノードを返します。マッチする要素がなかった場合は <code>null</code> が返されます。</dd> <dt><code>querySelectorAll</code></dt> <dd>ノード木中からマッチした全ての要素ノードを含む <a class="internal" href="/Ja/DOM/NodeList" title="Ja/DOM/NodeList"><code>NodeList</code></a> を返します。マッチする要素がなかった場合は空の <code>NodeList</code> が返されます。</dd>
</dl>
<div class="note"><strong>注意:</strong> <code><a class="internal" href="/Ja/DOM/Element.querySelectorAll" title="Ja/DOM/Element.querySelectorAll">querySelectorAll()</a></code> が返す <code><a class="internal" href="/Ja/DOM/NodeList" title="Ja/DOM/NodeList">NodeList</a></code> は最新のものではありません(訳注: is not live; ノードに対するスクリプト上での操作が反映されていないものが返る、という意味だと思われる)。これは他の DOM クエリメソッドが最新のノードリストを返すのとは対照的であり、注意が必要です。</div>
<p><a class="internal" href="/Ja/DOM/Element.querySelector" title="Ja/DOM/Element.querySelector"><code>querySelector()</code></a> や <a class="internal" href="/Ja/DOM/Element.querySelectorAll" title="Ja/DOM/Element.querySelectorAll"><code>querySelectorAll()</code></a> メソッドについての文書や、 <a class="internal" href="/Ja/Code_snippets/QuerySelector" title="Ja/Code snippets/QuerySelector">Code snippets for querySelector</a> には例となるコードやより詳しい解説が記されています。</p>
<h2>セレクタ</h2>
<p>セレクタ API のメソッドには、カンマで区切られた一つ以上の抽出対象の要素を指定します。例えば、文書中で CSS のクラスが <code>warning</code> または <code>note</code> に指定されている全ての段落要素(<code>p</code>)を抽出するには、次のようにします:</p>
<pre class="brush: js">var special = document.querySelectorAll("p.warning, p.note");
</pre>
<p>もちろん、 ID による指定も可能です。例えば:</p>
<pre class="brush: js">var el = document.querySelector("#main, #basic, #exclamation");
</pre>
<p>上記のコードが実行されると、 <code>el</code> には ID が <code>main</code>, <code>basic</code>, <code>exclamation</code> である要素のうち、最初の要素だけが格納されます。</p>
<p>例で示したように、 <code>querySelector()</code> <span style="font-family: monospace;">や </span><code>querySelectorAll() </code>メソッドではどの CSS セレクタでも用いることができます。</p>
<h2>参考文献</h2>
<ul> <li><a class="external" href="http://www.w3.org/TR/selectors-api/" title="http://www.w3.org/TR/selectors-api/">Selectors API</a></li> <li><a class="internal" href="/Ja/DOM/Element.querySelector" title="Ja/DOM/Element.querySelector"><code>element.querySelector</code></a></li> <li><a class="internal" href="/Ja/DOM/Element.querySelectorAll" title="Ja/DOM/Element.querySelectorAll"><code>element.querySelectorAll</code></a></li> <li><a class="internal" href="/Ja/DOM/Document.querySelector" title="Ja/DOM/Document.querySelector"><code>document.querySelector</code></a></li> <li><a class="internal" href="/Ja/DOM/Document.querySelectorAll" title="Ja/DOM/Document.querySelectorAll"><code>document.querySelectorAll</code></a></li> <li><a class="internal" href="/Ja/Code_snippets/QuerySelector" title="Ja/Code snippets/QuerySelector">Code snippets for querySelector</a></li>
</ul>
<p> </p>
このリビジョンへ戻す