Using the javascript querySelector() method to find DOM elements

The document.querySelector javascript method queries a HTML document for DOM elements that match a CSS selector. It is built-in browser support for the selector query features that made javascript libraries like JQuery so popular. It is part of the W3C selectors api spec.

This feature has excellent support in recent versions of all desktop browsers, including IE8+.

The querySelector() method:

  • Makes DOM traversal much easier without having to explicitly mark elements with an id or a class.
  • Uses your existing knowledge of CSS selectors to query DOM elements through javascript.

  • Means the same selectors used for styling can also be used for javascript code.
  • Makes libraries that have their own selector query engines more efficient because the work can be done natively by the browser.

Searching for a single element

The document.querySelector() method searches for the first element that matches a CSS selector. For example, to look for an input button, you could use input[type=button] as the selector:

  1. var button = document.querySelector("input[type=button]");
  2. button.addEventListener("click", function() {
  3.   alert("button was clicked");
  4. })

Complete example.

In situations where more than one element matches the query, querySelector will return the first it finds.

Searching for all elements that match

If you want a list of all elements that match a CSS selector, use document.querySelectorAll() instead:

  1. var boxes = document.querySelectorAll("div.box");
  2. for(var x=0; x<boxes.length; x++)
  3. {
  4.   boxes[x].addEventListener("mouseover", function(e) {
  5.     this.style.background = "pink";
  6.   });
  7. }

Complete example

Searching for elements inside an element

So far we’ve only used querySelector and querySelectorAll to search the whole HTML document by calling it from the document object.

The methods are also available on every HTML element. Calling it from a HTML element will mean only the element’s children will be searched.

For example, it’s possible to look for elements with a class name of .box which are only inside a element with first-line as the id. Any items with the box class that aren’t inside of the first-line element, won’t be returned.

  1. var boxes = document.getElementById("first-line").querySelectorAll(".box");
  2. for(var x=0; x<boxes.length; x++)
  3. {
  4.   boxes[x].style.background = "pink";
  5. }

Complete example

Debugging your selectors

A great thing about using the same query language for CSS and javascript is if your javascript query isn’t working you can just create a CSS rule with the same selector and tweak it until the right elements get selected:

  1. var button = document.querySelector("input[type=button]");  
  2. button.addEventListener("click", function() {
  3.   alert("button was clicked");
  4. })
  1. input[type=button] {
  2.   background: red;
  3. }
Posted on 12 Jul 08 by Helen Emerson (last updated on 06 Apr 13).
Filed under Javascript