Subject: Advanced Internet Technology

Topic: Responsive web design with HTML5 and CSS3

Difficulty: High

Intrroduction

• The querySelector() and querySelectorAll() methods let you enter a CSS selector as a parameter and return the selected elements as DOM elements.
• Part of the W3C Selectors API, the difference between the two methods is merely in the number of possible elements that they return- the very first matched element versus the entire set. Apart from being far more versatile than the staple getElementById() and getElementsByTagName() methods, these two methods also benefit from some incredible lookup speed, as they take advantage of the same engine the browser uses to identify elements to style when parsing the CSS of a page.

The querySelector() method

The querySelector() method exists both on as a Document and as an Element object. This lets you query either the entire document tree, or just a specific chunk of it looking for that elusive element of yours. It accepts any CSS selector as its parameter (ie: "#mydiv img") and returns either the first matched element (if multiple exists), or null if none. For example:

  document.querySelector('#myheader') //returns the element with ID="myheader"
  document.querySelector('p.description') //returns the P with class="description" element

• Take a look at the last example above- you can enter multiple CSS selectors, each seperated by a comma (","). The comma acts like the logical OR statement here, which causes querySelector() to return the first element within the document tree that matches one of the CSS selectors entered.

The querySelectorAll() method

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

  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.
• The querySelectorAll() method behaves just like its more humble cousin above with the exception it returns not just a singular element that matches a CSS selector, but all of them as a staticNodeList.

• A staticNodeList is a static collection of elements that are not affected by any subsequent changes occurring on the document tree, such as the removal of one those elements. It supports a "length" property for you to step through each of the elements similar to in an Array. With that said:

  document.querySelectorAll('.mygroup') //returns all elements with class="mygroup"
  document.querySelectorAll('option[selected="selected"]') //returns the default selected option within each SELECT menu
  document.querySelectorAll('#mytable tr>td:nth-of-type(1)') //returns the first cell within each table row of "mytable"