javascript selectors

• querySelector() returns the first DOM element that matches the specified group of selectors; IE 8+
• querySelectorAll() returns a list (array) of the elements that match the specified group of selectors; IE 8+

js:

var i, matches, match;

matches = document.querySelectorAll('div.note, div.info');
for (i = 0; i < matches.length; i++) {
    matches[i].innerHTML = 'UPDATED with querySelectorAll';
}

match = document.querySelector('div.alert'); // updates only first item
match.innerHTML = 'UPDATED with querySelector';

html:

<div class="note">note text</div>
<div class="alert">alert text</div>
<div class="info">info text</div>
<div class="note">note text</div>
<div class="alert">alert text</div>
<div class="alert">alert text</div>
<div class="note">note text</div>
<div class="info">info text</div>

• Can I use querySelector/querySelectorAll? - yes