Collapse the table of content
Expand the table of content

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



Community Additions

© 2015 Microsoft