Skip to content

The Selectors API: querySelector and querySelectorAll

Access DOM elements using querySelector and querySelectorAll. They accept any CSS selector, so you are no longer limited by selecting elements by `id`

<!-- TOC -->

<!-- /TOC -->

Introduction

jQuery and other DOM libraries got a huge popularity boost in the past, among with the other features they provided, thanks to an easy way to select elements on a page.

Traditionally browsers provided just a single way to select a DOM element - by its id attribute, with getElementById(), a method offered by the document object.

The Selectors API

Since 2013 the Selectors API, the DOM allows you to use two more useful methods:

  • document.querySelector()
  • document.querySelectorAll()

They can be safely used, as caniuse.com tells us, and they are even fully supported on IE9 in addition to all the other modern browsers, so there is no reason to avoid them, unless you need to support IE8 (which has partial support) and below.

They accept any CSS selector, so you are no longer limited by selecting elements by id.

  • document.querySelector() returns a single element, the first found
  • document.querySelectorAll() returns all the elements, wrapped in a NodeList object.

These are all valid selectors:

  • document.querySelector('#test')
  • document.querySelector('.my-class')
  • document.querySelector('#test .my-class')
  • document.querySelector('a:hover')

Basic jQuery to DOM API examples

Here below is a translation of the popular jQuery API into native DOM API calls.

Select by [object Object]

$('#test')
document.querySelector('#test')

We use querySelector since an id is unique in the page

Select by [object Object]

$('.test')
document.querySelectorAll('.test')

Select by tag name

$('div')
document.querySelectorAll('div')

More advanced jQuery to DOM API examples

Select multiple items

$('div, span')
document.querySelectorAll('div, span')

Select by HTML attribute value

$('[data-example="test"]')
document.querySelectorAll('[data-example="test"]')

Select by CSS pseudo class

$(':nth-child(4n)')
document.querySelectorAll(':nth-child(4n)')

Select the descendants of an element

For example all li elements under #test:

$('#test li')
document.querySelectorAll('#test li')
→ Download my free JavaScript Handbook!

THE VALLEY OF CODE

THE WEB DEVELOPER's MANUAL

You might be interested in those things I do:

  • Learn to code in THE VALLEY OF CODE, your your web development manual
  • Find a ton of Web Development projects to learn modern tech stacks in practice in THE VALLEY OF CODE PRO
  • I wrote 16 books for beginner software developers, DOWNLOAD THEM NOW
  • Every year I organize a hands-on cohort course coding BOOTCAMP to teach you how to build a complex, modern Web Application in practice (next edition February-March-April-May 2024)
  • Learn how to start a solopreneur business on the Internet with SOLO LAB (next edition in 2024)
  • Find me on X

Related posts that talk about browser: