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() returns the first element within the document that matches the specified group of selectors, or null if no matches are found.
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>
 <li class="aclass">CoursesWeb.net</li>
 <li class="aclass">php.net</li>

<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);


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>).
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":
 <li class="sites">CoursesWeb.net</li>
 <li class="sites">MarPlo.net</li>
<div id="idata">
 <span class="note">Web Development Courses</span>
 <span class="note">querySelector and querySelectorAll</span>

<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++) {

// test, shows data stored in arr_cnt
- 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.


- 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>

<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.';
- Demo. Position the mouse cursor over each link.
Shows the URL.

Daily Test with Code Example

Which type of <input> creates a color well control for selecting a color value?
type="text" type="color" type="date"
<input type="color" name="get_color" />
Which CSS method rotates the HTML element at a given degree?
scale() translate() rotate()
#some_id:hover {
  transform: rotate(60deg);
  -ms-transform: rotate(60deg);    /* IE 9 */
  -moz-transform: rotate(60deg);   /* Firefox */
Click on the function that returns the number with the highest value.
pow() min() max()
var maxn = Math.max(8, 4, 88, 56);
alert(maxn);      // 88
Which function prevent the same file from being included more than once in a page?
include() include_once() require()
querySelector and querySelectorAll

Last accessed pages

  1. jQuery ajax() method (2880)
  2. Get the Height and Width of web Page and browser Window (212)
  3. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (7649)
  4. Useful jQuery Plugins (171)
  5. Display UL bullets and OL numbers on the right side (330)

Top accessed pages

  1. PHP-MySQL free course, online tutorials PHP MySQL code (7862)
  2. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (7649)
  3. Get Attribute (ID, Class, Name, Title, Src) with jQuery (7353)
  4. PHP Chat Script (6748)
  5. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (6713)