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="https://coursesweb.net/javascript/" title="JavaScript Course">JavaScript Course</a></li>
 <li><a href="https://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.

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which meta tag provides a short description of the page?
<meta content="..."> <meta description="..."> <meta http-equiv="...">
<meta name="description" content="70-160 characters that describes the content of the page" />
Which CSS property is used to stop the wrapping effect of the "float"?
clear text-align position
#some_id {
  clear: both;
}
Click on the method which gets an array with all the elements in the document that have a specified tag name.
getElementsByName() getElementById() getElementsByTagName()
var divs = document.getElementsByTagName("div");
var nr_divs = divs.length;
alert(nr_divs);
Indicate the PHP function which returns the number of elements in array.
is_[) count() strlen()
$arr =[7, 8, "abc", 10);
$nri = count($arr);
echo $nri;        // 4
querySelector and querySelectorAll

Last accessed pages

  1. Script Users Register, Login, Online (16197)
  2. Register and show online users and visitors (22732)
  3. Select in MySQL, Output results in HTML Table (3767)
  4. Creating objects in ActionScript (7091)
  5. HTML object and param (8589)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (373)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (302)
  3. Register and show online users and visitors (274)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (266)
  5. Insert, Select and Update NULL value in MySQL (172)