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.


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


  • v [in]
    Type: BSTR

    The selector string.

  • pel [out, retval]
    Type: [IHTMLDOMChildrenCollection](aa752483(v=vs.85).md)

    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