Freigeben über

Auswählen von Objekten mit JavaScript

  • Artikel

Neu für Windows Internet Explorer 8

In diesem Artikel wird die W3C Selectors API -URL beschrieben, und Sie erfahren, wie sie es Ihnen ermöglicht, CSS-Selektoren (Cascading Stylesheets) zu verwenden, um Objekte in JavaScript-Anwendungen auszuwählen.

  • Einführung
  • Beschränken des Bereichs von Selektorabfragen
  • Angeben von mehreren Selektorregeln
  • Namespace-Support
  • Verwandte Themen

Einführung

Wenn Selektoren zusammen mit CSS verwendet werden, bieten sie eine zweckmäßige Methode, Objektgruppen auszuwählen, und bei Internet-Explorer 8, kann die Auswahl dann mit JavaScript erfolgen. In diesem Artikel wird beschrieben, wie der Browser W3C Selectors API unterstützt, und wie API verwendet wird, um Objekte in JavaScript-Anwendungen auszuwählen.

Hinweis: W3C Selectors API ist nur für Dokumente verfügbar, für die der Internet Explorer 8-Modus ausgewählt ist; weitere Informationen finden Sie unter Definieren der Dokumentkompatibilität.

W3C Selectors API stellt zwei Methoden zum Auswählen von Objekten mithilfe von Selektoren bereit: querySelector, der das erste Objekt auswählt, das zu den Kriterien passt; und querySelectorAll, der alle Objekte zurückgibt, die zu den Kriterien passen. Sie können unter den Dokumentobjekten oder den Objekten, die von einem allgemeinen Containerobjekt stammen, auswählen.

Beschränken des Bereichs von Selektorabfragen

Standardmäßig enthalten W3C Selectors API-Abfragen alle Objekte in einem Dokument. Im folgenden Codebeispiel wird eine Liste von DIV-Elementen, für die der gleiche Klassenwert freigegeben ist, zurückgegeben.

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

Sie können den Bereich einer W3C Selectors API-Abfrage auf das untergeordnete Objekt eines bestimmten Containerobjekts beschränken. Die Abfrage gibt dann nur im einschränkenden Objekt enthaltene Objekte, nicht aber das einschränkende Objekt selbst, zurück. Das folgende Beispiel ist dem vorhergehenden ähnlich, aber es beschränkt die Abfrage auf das zweite 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>

Die Einschränkung einer Abfrage auf bestimmte Elemente schränkt nur die Ergebnisse der Abfrage ein. Abfragekriterien können auf Objekte außerhalb des Containers für das einschränkende Element verweisen. Betrachten wir folgendes Beispiel:

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

Dieses Beispiel enthält ein P-Element, das zwei DIV-Elemente enthält, die jeweils ein einzelnes SPAN-Element enthalten. Bei Ausführung dieses Beispiels in Internet Explorer 8 wird das erste SPAN-Element zurückgegeben. Da die Abfrage auf das erste DIV-Element beschränkt ist, enthalten die Ergebnisse nur das erste SPAN-Element, obwohl die Kriterien auf das P-Element verweisen, das beide DIV-Elemente enthält.

Angeben von mehreren Selektorregeln

Um mehrere Selektorregeln in einer Selektorabfrage anzugeben, trennen Sie jede Regel mit Kommas. Das folgende Beispiel gibt ein Abfrage an, die DIV- und SPAN-Elemente auswählt.

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

Wichtig  Aus Sicherheitsgründen ignoriert Internet Explorer 8 den Pseudoklassenselektor :visited in Selektorabfragekriterien. Wenn eine Selektorabfrage :visitedpseudoselected mit anderen Regeln kombiniert, werden die anderen Regeln wie üblich verarbeitet. Wenn eine Selektorabfrage z. B. die Pseudoselektoren :visited und :link anfordert, ignoriert die Abfrage :visited und gibt eine Sammlung aller Links zurück, ob sie besucht wurden oder nicht.

Namespace-Support

Da Internet Explorer 8 XHTML-Dokumente nicht formell unterstützt, unterstützt es die Namespacefeatures (z. B. den NSResolver-Parameter) der W3C Selectors API-Spezifikation nicht.

Verwandte Themen