Selecting Objects with JavaScript

This article describes the W3C Selectors API World Wide Web link and how it enables you to use Cascading Style Sheets (CSS) selectors to select objects in JavaScript applications.

Introduction
Limiting the Scope of Selector Queries
Specifying Multiple Selector Rules
Namespace Support
Related Topics

Introduction

When used with CSS, selectors provide a convenient way to select groups of objects, and,as ofInternet Explorer 8, to do thiswithJavaScript. This article describes how the browser supportsW3C Selectors API and how the API is used to select objects in JavaScript applications.

Note: W3C Selectors API is only available to documents that opt into Internet Explorer 8 Mode; for more information, see Defining Document Compatibility.

W3C Selectors API provides two methods for using selectors to select objects:querySelector, which selects the first object that matches your criteria; and querySelectorAll, which returns all objects that match your criteria. You can select among the document objects or those that descend from a common container object.

Limiting the Scope of Selector Queries

By default, W3C Selectors API queries include all objects in a document. The following code example returns a list of DIV elements that share the same class value.

<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>

You can limit the scope of a W3C Selectors API query to the child object of a specific container object;the query will only return objects contained by the limiting object, not the limiting object itself. The following example is similar to the preceding one, but it limits the query to the second header div element.

<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>

Limitinga query to specific elementsonly limits the query's results. Query criteria can refer to objects outside the containerof the limiting element. Consider the following example:

<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>

This sample includes a P element that contains two DIV elements, each containing a single SPAN element. Running this sample in Internet Explorer 8 will return the first SPAN element. Because the query is limited to the first DIV element, the results include only the first SPAN element, even though the criteria refer to the P element containing both DIV elements.

Specifying Multiple Selector Rules

To specify multiple selector rules in a selector query, separate each rule with commas. The following example specifies a query that selectsdiv and span elements.

<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>

Important For security reasons, Internet Explorer 8 ignores the :visited pseudo class selector in selector query criteria. If a selector query combines the :visitedpseudoselected with other rules, the other rules are processed as usual. For example, if a selector query requests the :visited and :link pseudo selectors, the query ignores :visited and returns a collection of all links, whether or not they have been visited.

Namespace Support

Because Internet Explorer 8 does not formally support XHTML documents, it does not support the namespace features (such as the NSResolver parameter) of the W3C Selectors API specification.

Introduction

Limiting the Scope of Selector Queries

Specifying Multiple Selector Rules

Namespace Support

Related Topics