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

Click on the tag that creates an ordered list
<ul> <tr> <ol>
Which selector represents the ID of an element in CSS
.name #name name
#id {
  color: #0110fb;
What statement creates an object in JavaScript?
{} [] new Date()
var obj = {"site": "CoursesWeb.net", "pr": 5};
Indicate the instruction used to evaluate if a condiition is True or False
else if() switch()
$var = 8;
if($var == 8) echo $var;
querySelector and querySelectorAll

Last accessed pages

  1. PHP Anonymous functions - Closures (359)
  2. OOP - Classes and objects - Create Class (438)
  3. CSS cursor property - Custom Cursors (1000)
  4. Star shapes with CSS (1081)
  5. Get the value of the selected /checked checkboxes in a form (6366)

Top accessed pages

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