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. All rights reserved.