Compartilhar via

Selecionando objetos com JavaScript

  • Artigo

Novidade no Windows Internet Explorer 8

Este artigo descreve a API de seletores do W3C Link da World Wide Web (a página pode estar em inglês) e como ela permite que você use seletores de CSS (Folhas de estilos em cascata) para selecionar objetos em aplicativos JavaScript.

  • Introdução
  • Limitando o escopo de consultas de seletor
  • Especificando várias regras de seletor
  • Suporte a namespace
  • Tópicos relacionados

Introdução

Quando utilizados com CSS, os seletores fornecem uma maneira conveniente de selecionar grupos de objetos e, no Internet Explorer 8, fazer isso com JavaScript. Este artigo descreve como o navegador oferece suporte à API de seletores do W3C e como a API é usada para selecionar objetos em aplicativos JavaScript.

Observação: a API de seletores do W3C está disponível apenas para documentos que optam pelo modo do Internet Explorer 8; para obter mais informações, consulte Definindo a compatibilidade de documentos.

A API de seletores do W3C fornece dois métodos para usar os seletores a fim de selecionar objetos: querySelector, que seleciona o primeiro objeto que corresponde aos seus critérios; e querySelectorAll, que retorna todos os objetos que correspondem aos seus critérios. Você pode selecionar dentre os objetos de documento ou dentre aqueles que descendem de um objeto contêiner comum.

Limitando o escopo de consultas de seletor

Por padrão, as consultas da API de seletores do W3C incluem todos os objetos de um documento. O exemplo de código a seguir retorna uma lista de elementos DIV que compartilham o mesmo valor de classe.

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

Você pode limitar o escopo de uma consulta de API de seletores do W3C ao objeto filho de um objeto contêiner específico; a consulta retornará apenas os objetos contidos pelo objeto de limitação, e não o próprio objeto de limitação. O exemplo a seguir é semelhante ao anterior, mas ele limita a consulta ao segundo elemento div de cabeçalho.

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

Limitar uma consulta apenas a elementos específicos limita os resultados da consulta. Os critérios da consulta podem se referir a objetos fora do contêiner do elemento de limitação. Considere o exemplo a seguir:

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

Esse exemplo inclui um elemento P que contém dois elementos DIV, cada um com um único elemento SPAN. A execução desse exemplo no Internet Explorer 8 retornará o primeiro elemento SPAN. Como a consulta é limitada ao primeiro elemento DIV, os resultados incluem apenas o primeiro elemento SPAN, embora os critérios refiram-se ao elemento P que contém os dois elementos DIV.

Especificando várias regras de seletor

Para especificar várias regras de seletor em uma consulta de seletor, separe as regra por vírgulas. O exemplo a seguir especifica uma consulta que seleciona elementos div e 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>

Importante: por motivos de segurança, o Internet Explorer 8 ignora o seletor de pseudoclasse :visited nos critérios de consulta do seletor. Se uma consulta de seletor combinar :visitedpseudoselected com outras regras, as outras regras serão processadas normalmente. Por exemplo, se uma consulta de seletor solicitar os pseudosseletores :visited e :link, a consulta ignorará :visited e retornará uma coleção de todos os links, independentemente de eles terem sido visitados.

Suporte a namespace

Como o Internet Explorer 8 não oferece suporte a documentos XHTML formalmente, ele não oferece suporte a recursos de namespace (como o parâmetro NSResolver) da especificação da API de seletores do W3C.

Tópicos relacionados