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

object.querySelectorAll(v, pel)

Parameters

v [in]

Type: String

The selector string.

pel [out, retval]

Type: IHTMLDOMChildrenCollection

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

Return value

Type: IHTMLDOMChildrenCollection

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

Standards information

Remarks

This method differs from the 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 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 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

a
address
b
big
blockQuote
body
button
caption
center
cite
code
col
colGroup
dd
dfn
dir
div
dl
document
dt
em
fieldSet
form
hn
html
i
img
input type=button
input type=checkbox
input type=email
input type=file
input type=image
input type=number
input type=password
input type=radio
input type=range
input type=reset
input type=search
input type=submit
input type=tel
input type=text
input type=url
isIndex
kbd
label
legend
li
listing
marquee
menu
noBR
ol
p
plainText
pre
s
samp
small
span
strike
strong
sub
sup
table
tBody
td
textArea
tFoot
th
tHead
tr
tt
u
ul
var
xmp
Reference
querySelector
IElementSelector
Other Resources
W3C Selectors API
W3C Selectors

 

 

Show:
© 2014 Microsoft