Export (0) Print
Expand All

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

 

Syntax


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

Parameters

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

Type: HRESULT

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

Standards information

Remarks

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.

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

Reference
IDocumentSelector::querySelector
IElementSelector
Other Resources
W3C Selectors API
W3C Selectors

 

 

Community Additions

ADD
Show:
© 2014 Microsoft