使用 JavaScript 选择对象

  • 项目

Windows Internet Explorer 8 的新增功能

本文将介绍 W3C 选择器 API 万维网链接 以及如何通过它使用级联样式表 (CSS) 选择器在 JavaScript 应用程序中选择对象。

  • 简介
  • 限制选择器查询的范围
  • 指定多个选择器规则
  • 命名空间支持
  • 相关主题

简介

通过结合使用选择器与 CSS，可以很方便地选择对象组；而从 Internet Explorer 8 开始，还可以使用 JavaScript 来执行此操作。 本文将介绍浏览器如何支持 W3C 选择器 API，以及如何使用 API 在 JavaScript 应用程序中选择对象。

注意： W3C 选择器 API 仅适用于选择使用 Internet Explorer 8 模式的文档；有关更多信息，请参见定义文档兼容性（可能为英文网页）。

W3C 选择器 API 提供两种使用选择器来选择对象的方法： 用于选择满足条件的第一个对象的 querySelector 以及用于返回满足条件的所有对象的 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 查询的范围限制为某个特定容器对象的子对象；查询将仅返回限制对象所包含的对象，而不返回限制对象本身。 下面的示例与前一个示例类似，但它将查询限制为第二个 header 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>

此示例包含一个 P 元素，此元素包含两个 DIV 元素，每个 DIV 元素又包含一个 SPAN 元素。 在 Internet Explorer 8 中运行此示例将返回第一个 SPAN 元素。 由于将查询限制为第一个 DIV 元素，因此，即使条件引用的是包含两个 DIV 元素的 P 元素，查询结果也仅包括第一个 SPAN 元素。

指定多个选择器规则

若要在一个选择器查询中指定多个选择器规则，请用逗号分隔每个规则。 下面的示例指定一个选择 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 伪类选择器。 如果选择器查询将 :visitedpseudoselected 与其他规则组合在一起，则其他规则将照常处理。 例如，如果一个选择器查询请求 :visited 和 :link 伪选择器，则该查询将忽略 :visited 并返回所有链接的集合，而不管是否已访问这些链接。

命名空间支持

由于 Internet Explorer 8 未正式支持 XHTML 文档，因此它不支持 W3C 选择器 API 规范的命名空间功能（例如 NSResolver 参数）。

相关主题