Partager via

Sélection d'objets avec JavaScript

  • Article

Nouveautés de Windows Internet Explorer 8

Cette article décrit l'API des sélecteurs W3C Lien World Wide Web et indique comment utiliser des sélecteurs de feuilles de style en cascade (CSS) pour sélectionner des objets dans les applications JavaScript.

  • Introduction
  • Limitation de la portée des requêtes du sélecteur
  • Spécification de plusieurs règles de sélecteur
  • Prise en charge des espaces de noms
  • Voir aussi

Introduction

Lorsqu'ils sont utilisés avec des feuilles de style en cascade (CSS), les sélecteurs permettent de sélectionner facilement des groupes d'objets. Dans Internet Explorer 8, cette sélection peut être effectuée à l'aide de JavaScript. Cet article décrit les modalités de prise en charge de l'API des sélecteurs W3C dans le navigateur. Il indique également comment utiliser cette API pour sélectionner des objets dans les applications JavaScript.

Remarque : l'API de sélecteurs W3C est disponible uniquement pour les documents compatibles avec le mode Internet Explorer 8. Pour plus d'informations, consultez Définition de la compatibilité des documents (page éventuellement en anglais).

L'API des sélecteurs W3C offre deux méthodes de sélection des objets : querySelector, qui sélectionne le premier objet correspondant à vos critères, et querySelectorAll, qui retourne tous les objets qui correspondent à ces critères. La sélection peut porter sur des objets document ou sur les objets descendant d'un objet conteneur commun.

Limitation de la portée des requêtes du sélecteur

Par défaut, les requêtes de l'API de sélecteurs W3C incluent tous les objets d'un document. L'exemple de code suivant retourne une liste d'éléments DIV qui partagent la même valeur 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>

Vous pouvez limiter l'étendue d'une requête de l'API de sélecteurs W3C à l'objet enfant d'un objet conteneur spécifique. Dans ce cas, la requête retournera uniquement les objets contenus dans cet objet, sans inclure l'objet conteneur lui-même. L'exemple suivant est semblable au précédant, mais il limite la requête au second élément div de l'en-tête.

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

La limitation d'une requête à certains éléments spécifiques s'applique uniquement aux résultats. Les critères de la requête peuvent faire référence à des objets situés à l'extérieur du conteneur de l'élément limitant. Examinons l’exemple suivant :

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

Cet exemple inclut un élément P qui contient deux éléments DIV. Chacun de ces derniers contient à son tour un élément SPAN unique. S'il est exécuté dans Internet Explorer 8, ce code retourne le premier élément SPAN. La requête étant limitée au premier élément DIV, les résultats incluent uniquement le premier élément SPAN, et ce même si les critères font référence à l'élément P qui contient les deux éléments DIV.

Spécification de plusieurs règles de sélecteur

Chaque requête du sélecteur peut contenir plusieurs règles. Dans ce cas, séparez chaque règle de la suivante par une virgule. L'exemple suivant présente une requête qui sélectionne des éléments div et 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>

Important Pour des raisons de sécurité, Internet Explorer 8 ne tient pas compte du sélecteur de pseudo-classe :visited s'il figure dans les critères d'une requête du sélecteur. Si une requête du sélecteur combine le sélecteur de pseudo-classe :visited avec d'autres règles, les autres règles sont traitées selon la procédure habituelle. Par exemple, si une requête porte à la fois sur les pseudo-sélecteurs :visited et :link, elle ne tient pas compte de :visited et retourne tous les liens, qu'ils aient ou non été visités.

Prise en charge des espaces de noms

Étant donné qu'Internet Explorer 8 ne prend pas officiellement en charge les documents XHTML, les fonctionnalités d'espaces de noms (paramètres NSResolver, par exemple) incluses dans la spécification de l'API de sélecteurs W3C ne sont pas non plus prises en charge.

Voir aussi