JavaScript でオブジェクトを選択する

[アーティクル]
01/29/2010

Windows Internet Explorer 8 の新機能

この記事では、W3C セレクター API World Wide Web リンクと、カスケードスタイルシート (CSS) セレクターを使用して JavaScript アプリケーション内のオブジェクトを選択する方法について説明します。

概要
セレクタークエリの範囲を制限する
複数のセレクタールールを指定する
名前空間サポート
関連トピック

概要

セレクターを CSS と共に使用すると、オブジェクトグループを簡単に選択できます。また、Internet Explorer 8 以降では JavaScript でオブジェクトグループを簡単に選択できます。この記事では、ブラウザーが W3C セレクター API をどのようにサポートするか、およびその API を使用して JavaScript アプリケーション内のオブジェクトを選択する方法について説明します。

メモ : W3C セレクター API は Internet Explorer 8 モードを選択する必要のあるドキュメントでのみ使用可能です。詳細については、「ドキュメント互換性の定義」 (英語の可能性あり) を参照してください。

W3C セレクター API では、セレクターを使用してオブジェクトを選択する 2 つの方法が提供されます。 1 つは、条件に一致する 1 番目のオブジェクトを選択する querySelector で、もう 1 つは、条件に一致するすべてのオブジェクトを返す querySelectorAll です。ドキュメントオブジェクト、または共通のコンテナーオブジェクトから伝わるドキュメントオブジェクトを選択できます。

セレクタークエリの範囲を制限する

既定では、W3C セレクター API のクエリには、ドキュメント内のすべてのオブジェクトが含まれます。次のコード例では、同じクラス値を共有する DIV 要素の一覧が返されます。

<html>
<head>
  <!-- Set document compatibility mode to IE8Mode. -->
  <meta http-equiv="X-UA-Compatible" content="IE=8">
</head>

<body>

<script language="Javascript">
function doit()
{
  var oAllPs = document.querySelectorAll("div.detail");
  var sFound = ( oAllPs == null ) ?
     "No matches found" : allPs.length;
  alert( "Results: " + sFound );
}
</script>

<button onclick="doit();">Simple Selector Example</button>

<ul>
  <li><div class="header" name="first">Alpha</div></li>
  <ol>
    <li><div class="detail">One</div></li>
    <li><div class="detail">Two</div></li>
    <li><div class="detail">Three</div></li>
  </ol>
  <li><div class="header" name="second">Beta</div></li>
  <ol>
    <li><div class="detail">Four</div></li>
    <li><div class="detail">Five</div></li>
    <li><div class="detail">Six</div></li>
  </ol>
  <li><div class="header" name="third" >Gamma</div></li>
  <ol>
    <li><div class="detail">Seven</div></li>
    <li><div class="detail">Eight</div></li>
    <li><div class="detail">Nine</div></li>
  </ol>
</ul>

</body>
</html>

W3C セレクター API のクエリの範囲を、特定のコンテナーオブジェクトの子オブジェクトに制限できます。この場合、クエリでは、制限オブジェクトに含まれるオブジェクトのみが返されます。制限オブジェクト自体は返されません。次の例は前の例と似ていますが、クエリは 2 番目のヘッダーの DIV 要素に制限されます。

<html>
<head>
  <!-- Set document compatibility mode to IE8Mode. -->
  <meta http-equiv="X-UA-Compatible" content="IE=8">
</head>

<body>

<script language="Javascript">
function doit()
{
  var oLimit = document.querySelector("#second");
  var oAllPs = oLimit.querySelectorAll("div");
  var sFound = ( oAllPs == null ) ?
     "No matches found" : oAllPs.length;
  alert( "Results: " + sFound );
}
</script>

<button onclick="doit();">Simple Selector Example</button>

<ul>
  <li><div class="header" id="first">Alpha</div></li>
  <ol>
    <li><div class="detail">One</div></li>
    <li><div class="detail">Two</div></li>
    <li><div class="detail">Three</div></li>
  </ol>
  <li><div class="header" id="second">Beta</div></li>
  <ol>
    <li><div class="detail">Four</div></li>
    <li><div class="detail">Five</div></li>
    <li><div class="detail">Six</div></li>
  </ol>
  <li><div class="header" id="third" >Gamma</div></li>
  <ol>
    <li><div class="detail">Seven</div></li>
    <li><div class="detail">Eight</div></li>
    <li><div class="detail">Nine</div></li>
  </ol>
</ul>

</body>
</html>

クエリを特定の要素のみに制限すると、クエリの結果が制限されます。クエリ条件では、制限要素のコンテナー外部にあるオブジェクトを参照できます。以下の例について考えてみましょう。

<html>
<head>
   <meta http-quiv="X-UA-Compatible" content="IE=8">
   <title>Limit Example 1</title>
<head>
<body>

  <p>
    <div name="div1"><span name="span1">Found</span></div>
    <div name="div2"><span name="span2">Not found</span></div>
  </p>

  <script>
  function Sample()
  {
     var oDiv = document.getElementByName( "div1" );
     var oSpan = oDiv.querySelector( "p span" );
     var sResult = ( oSpan == null ) ?
       "No match found; check your query" : "The query returned " + oSpan.name;
     alert( sResult );
  }
  </script>
  <button onclick="Sample();">Run Test</button>
</body>
</html>

このサンプルには、2 つの DIV 要素を含む P 要素が含まれています。各 DIV 要素には 1 つの SPAN 要素が含まれています。このサンプルを Internet Explorer 8 で実行すると、1 番目の SPAN 要素が返されます。クエリが 1 番目の DIV 要素に制限されているため、結果には 1 番目の SPAN 要素のみが含まれます。両方の DIV 要素を含む P 要素が条件で参照されていても関係ありません。

複数のセレクタールールを指定する

セレクタークエリに複数のセレクタールールを指定するには、各ルールをコンマで区切ります。次の例では、DIV 要素と SPAN 要素を選択するクエリを指定します。

<html>
<head>
  <!-- Set document compatibility mode to IE8Mode. -->
  <meta http-equiv="X-UA-Compatible" content="IE=8">
</head>

<body>

<script language="Javascript">
function doit()
{
  var oAllPs = document.querySelectorAll("div, span");
  var sFound = ( oAllPs == null ) ?
     "No matches found" : oAllPs.length;
  alert( "Results: " + sFound );
}
</script>

<button onclick="doit();">Simple Selector Example</button>

<ul>
  <li><span class="header" id="first">Alpha</span></li>
  <ol>
    <li><div class="detail">One</div></li>
    <li><div class="detail">Two</div></li>
    <li><div class="detail">Three</div></li>
  </ol>
  <li><span class="header" id="second">Beta</span></li>
  <ol>
    <li><div class="detail">Four</div></li>
    <li><div class="detail">Five</div></li>
    <li><div class="detail">Six</div></li>
  </ol>
  <li><span class="header" id="third" >Gamma</span></li>
  <ol>
    <li><div class="detail">Seven</div></li>
    <li><div class="detail">Eight</div></li>
    <li><div class="detail">Nine</div></li>
  </ol>
</ul>

</body>
</html>

重要: セキュリティ上の理由から、Internet Explorer 8 では、セレクタークエリ条件内の :visited 擬似クラスセレクターは無視されます。セレクタークエリで、選択した :visited 擬似とその他のルールが組み合わされている場合、その他のルールは通常どおりに処理されます。たとえば、:visited 擬似セレクターと :link 擬似セレクターを要求するセレクタークエリでは、:visited 擬似セレクターが無視され、すべてのリンクのコレクションが返されます。それらのリンクが訪問されたかどうかは関係ありません。

名前空間サポート

Internet Explorer 8 では XHTML ドキュメントが正式にサポートされないため、W3C セレクター API 仕様の名前空間機能 (NSResolver パラメーターなど) はサポートされません。

JavaScript でオブジェクトを選択する

概要

セレクター クエリの範囲を制限する

複数のセレクター ルールを指定する

名前空間サポート

関連トピック

その他のリソース

セレクタークエリの範囲を制限する

複数のセレクタールールを指定する