querySelector and querySelectorAll

querySelector() and querySelectorAll() are two JavaScript functions very useful when working with HTML elements and JavaScript.
With these functions you can get in JavaScript the HTML elements according to a group of CSS selectors ("id", "class").
They are supported by: Mozilla Firefox 3.5+, Google Chrome, Internet Explorer 8+, Opera 10+, Safari 3.2+.

querySelector()

querySelector() returns the first element within the document that matches the specified group of selectors, or null if no matches are found.
Syntax:
var elm = document.querySelector('selectors');
- "selectors" is a string containing one or more CSS selectors separated by commas.
- elm is an element object.

Example, the code below displays an Alert window with the content of the HTML tag with id="someid", and the content of the first LI with class="aclass".
<div id="someid">Have a Good life.</div>
<ul>
 <li class="aclass">CoursesWeb.net</li>
 <li>MarPlo.net</li>
 <li class="aclass">php.net</li>
</ul>

<script type="text/javascript">
var someid_cnt = document.querySelector('#someid').innerHTML;
var aclass1_cnt = document.querySelector('li.aclass').innerHTML;

alert(someid_cnt +'\n'+ aclass1_cnt);
</script>

querySelectorAll()

querySelectorAll() returns a list of the elements that match the specified group of selectors. The object returned is a NodeList.
If the "selectors" string contains a CSS pseudo-element, the returned elementList will be empty (WebKit browsers have a bug: when the selectors string contains a CSS pseudo-element, the returned elementList contains the <html>).
Syntax:
var elementList = document.querySelectorAll('selectors');
- "selectors" is a string containing one or more CSS selectors separated by commas.
- elementList is a NodeList of element objects.

Example, creates an Array with the content of LI tags with class="sites", and the tags with class="note" within element with id="idata":
<ul>
 <li class="sites">CoursesWeb.net</li>
 <li class="sites">MarPlo.net</li>
 <li>php.net</li>
</ul>
<div id="idata">
 <span class="note">Web Development Courses</span>
 <span class="note">querySelector and querySelectorAll</span>
</div>

<script type="text/javascript">
// gets all the LI tags with class="sites", and the tags with class="note" in element with id="idata"
var elm_list = document.querySelectorAll('li.sites, #idata .note');
var nr_elm = elm_list.length;         // number of elements in elm_list

var arr_cnt = [];       // array to contain data from elm_list

// traverse the elm_list object, and add in arr_cnt the content of each element
for(var i=0; i<nr_elm; i++) {
  arr_cnt.push(elm_list[i].innerHTML);
}

// test, shows data stored in arr_cnt
alert(arr_cnt);
</script>
- Click the button "Test" to see the result.

The difference between querySelector() and querySelectorAll() is that querySelector() returns a single object with the first HTML element that matches the "selectors", but querySelectorAll() returns a list of objects with all the HTML elements that match the "selectors".


• To limit the search to descendants of an element only, you can call the selectors API on the specific element of interest.
elementObject.querySelector('selectors')

elementObject.querySelectorAll('selectors')

- Here's another example with querySelectorAll(), the selection is made on other element, not on "document". When the mouse cursor is over a selected <a>, the URL address is added into a specified DIV.
<div id="seeurl">Shows the URL.</div>
<ul id="sites">
 <li><a href="http://coursesweb.net/javascript/" title="JavaScript Course">JavaScript Course</a></li>
 <li><a href="http://www.marplo.net/" title="Courses, Games, Anime">Courses, Games, Anime</a></li>
</ul>

<script type="text/javascript">
// gets A tags in LI added in element with id="idata"
var elm_list = document.getElementById('sites').querySelectorAll('li a');
var nr_elm = elm_list.length;         // number of elements in elm_list

// traverse the elm_list object
for(var i=0; i<nr_elm; i++) {
  // register onmouseover event to add in #seeurl the "href" of each selected <a>
  elm_list[i].onmouseover = function() {
    document.getElementById('seeurl').innerHTML = this.href;
  }

  // register onmouseout event to add in #seeurl a default text
  elm_list[i].onmouseout = function() {
    document.getElementById('seeurl').innerHTML = 'Shows the URL.';
  }
}
</script>
- Demo. Position the mouse cursor over each link.
Shows the URL.