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
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
- Selectors API Level 1, Section 6.1
Remarks
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.
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 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> <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 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
- Reference
- IElementSelector::querySelector
- IElementSelector
- Other Resources
- W3C Selectors API
- W3C Selectors
