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.

Internet Explorer 8



HRESULT retVal = object.querySelectorAll(v, pel);


v [in]

Type: BSTR

The selector string.

pel [out, retval]

Type: IHTMLDOMChildrenCollection

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

Return value


If this method succeeds, it returns S_OK. Otherwise, it returns an HRESULT error code.

Standards information


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


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 IDocumentSelector::querySelectorAll method to return items from the list.

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

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

<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 IDocumentSelector::querySelectorAll method to return list items associated with a specific selector string, either fruit or green.

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;

See also

Other Resources
W3C Selectors API
W3C Selectors