querySelectorAll method

Retrieves all Document Object Model (DOM) element nodes from descendants of the starting element node that match any selector within the supplied selector strings.

Syntax

object.querySelectorAll(v, pel)

Parameters

v [in]

Type: String

The selector string.

pel [out, retval]

Type: IHTMLDOMChildrenCollection

A collection of DOM element nodes. The collection may be empty.

Return value

Type: IHTMLDOMChildrenCollection

A collection of DOM element nodes. The collection may be empty.

Standards information

Selectors API Level 1, Section 6.1

Remarks

This method differs from the querySelector method by returning a collection of DOM element nodes that match the selector string, rather than only the first element found.

Examples

This example shows two div objects that each contain a list whose items are defined with a selector string. The example includes two buttons that use the querySelectorAll method to return items from the list.

Code example: http://samples.msdn.microsoft.com/workshop/samples/css/SelectorsAPI/querySelectorAll.html

HTML


<div id="fruitsalad">
   <span>Fruit Salad</span>
   <ul>
      <li class="fruit">apples</li>
      <li class="fruit">oranges</li>
      <li class="fruit">grapes</li>
      <li class="fruit">melon</li>
   </ul>
</div>
<div id="greensalad">
   <span>Green Salad</span>
   <ul>
      <li class="green">lettuce</li>
      <li class="green">tomato</li>
      <li class="green">onion</li>
      <li class="green">cucumber</li>
   </ul>
</div>

<input onclick="getFruit()" type="button" value="Fruit Salad Ingredients">
<input onclick="getGreen()" type="button" value="Green Salad Ingredients">

<div id="inOut"></div>

Each button calls a function that uses the querySelectorAll method to return list items associated with a specific selector string, either fruit or green.

JavaScript


function getFruit() {
   var fruits = document.getElementById('fruitsalad').querySelectorAll('li.fruit');
   var fruitList = "";
   for (var i = 0; i < fruits.length; i++) {
      fruitList = fruitList + (fruits[i].innerHTML+' ');
   }
   inOut.innerHTML = fruitList;
}
function getGreen() {
   var greens = document.getElementById('greensalad').querySelectorAll('li.green');
   var greenList = "";
   for (var i = 0; i < greens.length; i++) {
      greenList = greenList + (greens[i].innerHTML + ' ');
   }
   inOut.innerHTML = greenList;
}