element.querySelectorAll

  • リビジョンの URL スラッグ: DOM/element.querySelectorAll
  • リビジョンのタイトル: element.querySelectorAll
  • リビジョンの ID: 364883
  • 作成日:
  • 作成者: ethertank
  • 現行リビジョン いいえ
  • コメント

このリビジョンの内容

{{DomRef}}

概要

対象要素の子孫の内、引数に指定した CSS セレクタのグループにマッチする要素群の(ライブなものでない) NodeList を返します。

構文

elementList = baseElement.querySelectorAll(selectors);
  • elementList: element オブジェクトの非ライブなリスト
  • baseElement: 走査の対象とする element オブジェクト
  • selectors: 探索する CSS セレクタ

次の例では、 HTML 文書の body 要素の中に存在する全ての p 要素のリストを取得しています。

var matches = document.body.querySelectorAll('p'); 

次の例では、querySelector メソッドを用いて id が "#test" のノードを変数 elm に代入。そして次に、「最初に取得した elm の子孫でクラス名に "highlight" を持つ div 要素群の、直接の子要素である p 要素群」に該当するノードのリストを変数 matches に代入しています。

var elm = document.querySelector('#test'),
    matches = elm.querySelectorAll('div.highlighted > p'); 

次の例では、data-src 属性を持つ iframe 要素のリストを取得しています。

var matches = el.querySelectorAll('iframe[data-src]'); 

注記

指定したセレクタグループが有効な書式で無かった場合、例外 「 SYNTAX_ERR 」がスローされます。

querySelectorAll() は WebApps API で導入されました。

返される値は NodeList です。故に、これを for..in ループの走査の対象としたり、これに対しビルトインの配列のメソッドを用いようとした場合はエラーが発生します。 NodeList に対し配列のメソッドを用いたい場合は、予め NodeList を配列に変換する必要があるという点に注意して下さい。

ブラウザ実装状況

{{CompatibilityTable}}
機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 1 {{CompatGeckoDesktop("1.9.1")}} 8 10 3.2 (525.3)
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート {{CompatVersionUnknown}} {{CompatGeckoMobile("1.9.1")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatVersionUnknown}}

仕様

  • {{spec("http://www.w3.org/TR/selectors-api/","Selectors API Level 1","rec")}}
  • {{spec("http://www.w3.org/TR/selectors-api2/","Selectors API Level 2","wd")}}
  • {{spec("http://dev.w3.org/2006/webapi/selectors-api2/","Selectors API Level 2","ed")}}

関連情報

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

<div>
  {{DomRef}}</div>
<h2 id="Summary" name="Summary">概要</h2>
<p>対象要素の子孫の内、引数に指定した CSS セレクタのグループにマッチする要素群の(ライブなものでない) <a href="/ja/docs/DOM/NodeList" title="DOM/NodeList"><code>NodeList</code></a> を返します。</p>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="syntaxbox">
<var>elementList</var> = baseElement.querySelectorAll(<var>selectors</var>);
</pre>
<ul>
  <li><code>elementList</code>: <a href="/ja/docs/DOM/element" title="DOM/Element">element</a> オブジェクトの非ライブなリスト</li>
  <li><code>baseElement</code>: 走査の対象とする <a href="/ja/docs/DOM/element" title="DOM/element">element</a> オブジェクト</li>
  <li><code>selectors</code>: 探索する CSS セレクタ</li>
</ul>
<h2 id="Example" name="Example">例</h2>
<p>次の例では、 HTML 文書の body 要素の中に存在する全ての <code>p</code> 要素のリストを取得しています。</p>
<pre class="brush: js">
var matches = document.body.querySelectorAll('p'); 
</pre>
<p>次の例では、<code>querySelector</code> メソッドを用いて id が "#test" のノードを変数 <var>elm</var> に代入。そして次に、「最初に取得した elm の子孫でクラス名に "highlight" を持つ div 要素群の、直接の子要素である p 要素群」に該当するノードのリストを変数 <var>matches</var> に代入しています。</p>
<pre class="brush:js">
var elm = document.querySelector('#test'),
    matches = elm.querySelectorAll('div.highlighted &gt; p'); 
</pre>
<p>次の例では、<code>data-src</code> 属性を持つ <code>iframe</code> 要素のリストを取得しています。</p>
<pre class="brush: js">
var matches = el.querySelectorAll('iframe[data-src]'); 
</pre>
<h2 id="Notes" name="Notes">注記</h2>
<p>指定したセレクタグループが有効な書式で無かった場合、例外 「 <code>SYNTAX_ERR</code> 」がスローされます。</p>
<p><code>querySelectorAll()</code> は WebApps API で導入されました。</p>
<p>返される値は NodeList です。故に、これを <code>for..in</code> ループの走査の対象としたり、これに対しビルトインの配列のメソッドを用いようとした場合はエラーが発生します。 NodeList に対し配列のメソッドを用いたい場合は、予め NodeList を配列に変換する必要があるという点に注意して下さい。</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
<div>
  {{CompatibilityTable}}</div>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>機能</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>基本サポート</td>
        <td>1</td>
        <td>{{CompatGeckoDesktop("1.9.1")}}</td>
        <td>8</td>
        <td>10</td>
        <td>3.2 (525.3)</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>機能</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>基本サポート</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatGeckoMobile("1.9.1")}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="Specification" name="Specification">仕様</h2>
<ul>
  <li>{{spec("http://www.w3.org/TR/selectors-api/","Selectors API Level 1","rec")}}</li>
  <li>{{spec("http://www.w3.org/TR/selectors-api2/","Selectors API Level 2","wd")}}</li>
  <li>{{spec("http://dev.w3.org/2006/webapi/selectors-api2/","Selectors API Level 2","ed")}}</li>
</ul>


<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
  <li>{{DOMMeth("querySelector")}}</li>
  <li><a href="/ja/docs/DOM/Document.querySelectorAll" title="DOM/document.querySelectorAll"><code>document.querySelectorAll</code></a></li>
  <li><a href="/ja/docs/DOM/Document.querySelector" title="DOM/document.querySelector"><code>document.querySelector</code></a></li>
  <li><a href="/ja/docs/Code_snippets/QuerySelector" title="Code_snippets/QuerySelector"><code>querySelector</code> のコードスニペット</a></li>
</ul>
Revert to this revision