EN
Este conteúdo não está disponível em seu idioma, mas aqui está a versão em inglês.

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

object.querySelectorAll(v, pel)

Parameters

v [in]

Type: String

The selector string.

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
blockQuote
body
button
caption
cite
code
col
colGroup
dd
dfn
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
kbd
label
legend
li
menu
ol
p
pre
s
samp
small
span
strong
sub
sup
table
tBody
td
textArea
tFoot
th
tHead
tr
u
ul
var
Reference
querySelector
IElementSelector
Other Resources
W3C Selectors API
W3C Selectors

 

 

Mostrar:
© 2014 Microsoft. Todos os direitos reservados.