Compartir a través de

Seleccionar objetos con JavaScript

  • Artículo

Novedad para Windows Internet Explorer 8

En este artículo se describe la API de selectores de W3C vínculo de World Wide Web y el uso que permite hacer de los seleccionadores de hojas de estilos en cascada (CSS) para seleccionar los objetos en las aplicaciones de JavaScript.

  • Introducción
  • Limitar el ámbito de las consultas del seleccionador
  • Especificar varias reglas del seleccionador
  • Compatibilidad con espacios de nombres
  • Temas relacionados

Introducción

Cuando se utilizan con CSS, los selectores proporcionan una manera cómoda de seleccionar grupos de objetos y, a partir de Internet Explorer 8, de hacerlo con JavaScript. En este artículo se describe la compatibilidad del explorador con la API de selectores de W3C y el uso de esta última para seleccionar objetos en aplicaciones JavaScript.

Nota: la API de selectores de W3C está disponible únicamente para los documentos que utilizan el modo de Internet Explorer 8; para obtener más información, vea Definir la compatibilidad con documentos.

La API de selectores de W3C proporciona dos métodos que permiten utilizar selectores para seleccionar objetos: querySelector, que selecciona el primer objeto que coincide con los criterios especificados; y querySelectorAll, que devuelve todos los objetos que coinciden con los criterios. Se pueden seleccionar los objetos de documento o aquellos que son descendientes de un objeto contenedor común.

Limitar el ámbito de las consultas del seleccionador

De forma predeterminada, la API de selectores de W3C incluye todos los objetos de un documento. En el ejemplo del código siguiente se devuelve una lista de elementos DIV que comparten el mismo valor de clase.

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

Se puede limitar el ámbito de una consulta de la API de selectores de W3C al objeto secundario de un objeto contenedor concreto; la consulta devolverá únicamente los objetos contenidos en el objeto limitador, no el objeto limitador en sí. El ejemplo siguiente es similar al anterior, pero limita la consulta al segundo elemento div de encabezado.

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

Al limitar una consulta únicamente a elementos concretos, se limitan sus resultados. Los criterios de la consulta pueden hacer referencia a objetos que se encuentren fuera del contenedor del elemento limitador. Fíjese en el ejemplo siguiente:

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

En este ejemplo, se incluye un elemento P que contiene dos elementos DIV, cada uno de los cuales contiene un elemento SPAN único. Al ejecutar este ejemplo en Internet Explorer 8, se devolverá el primer elemento SPAN. Dado que la consulta se limita al primer elemento DIV, los resultados incluyen únicamente el primer elemento SPAN, aunque los criterios hacen referencia al elemento P que contiene ambos elementos DIV.

Especificar varias reglas del seleccionador

Para especificar varias reglas de selector en una consulta de selector, deben ir separadas por comas. En el ejemplo siguiente se especifica una consulta que selecciona elementos div y 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 razones de seguridad, Internet Explorer 8 omite el selector de pseudoclase :visited en los criterios de búsqueda de seleccionador. Si una consulta de seleccionador combina el pseudoselector :visited con otras reglas, las demás reglas se procesan normalmente. Por ejemplo, si una consulta de seleccionador solicita los pseudoselectores :visited y :link, la consulta omite :visited y devuelve una colección de todos los vínculos, con independencia de si se han visitado o no.

Compatibilidad con espacios de nombres

Dado que Internet Explorer 8 no admite formalmente documentos XHTML, tampoco admite las características de espacios de nombres (tales como el parámetro NSResolver) de la especificación de la API de selectores de W3C.

Temas relacionados