Home / The DOM / Using querySelector and querySelectorAll

Using querySelector and querySelectorAll

The DOM

March 2, 2022 0

Last updated: September 27, 2022.

Sometimes, document.getElementById, document.getElementsByClassName and document.getElementsByTag name just don’t cut it.

For example, wanting to:

Select the first element in a document by class attribute
Selecting element by class or tag name nested in another element only
Selecting all elements of multiple tag types (e.g. all paragraphs and span elements)

To be sure, there is usually a workaround using the standard selection methods.

However, in these situations in can often be easier to use the querySelector and querySelectorAll methods.

querySelector and querySelectorAll

The difference between these two is that querySelector returns a single element matching its selection criteria. querySelectorAll, on the other hand, returns all elements matching the search criteria in an iterable list.

Selection criteria are specified using the highly developed and powerful CSS selector syntax. This allows for highly nuanced selection without the need to combine standard methods and/or traverse the DOM.

Learn about querySelector and querySelectorAll in this post through making five nuanced DOM selections that would require some level of workaround using document.getElementById, document.getElementsByClassName and document.getElementsByTag alone.

Five ways to use querySelector and querySelectorAll

#1: Using the wildcard operator (*) to select all DOM elements

You can easily select all DOM elements by combining querySelectorAll with the wildcard operator:

document.querySelectorAll('*');

#2: Select first matching element by tag or class name

document.getElementsByClassName and document.getElementsByTag will select all elements that match their criteria. This can be replicated by combining querySelectorAll and selecting by tag or class.

This can easily be adapted to only select the first element that would be selected by querySelectorAll by applying the querySelector method instead:

document.querySelector('p'); // Selects first paragraph element in document
document.querySelector('.item'); // Selects first element of class item

#3: Mix and match id, class and tag element selection

querySelectorAll can be used to select multiple elements by a mix of id, class name and tag name:

document.querySelectorAll('#content, .item, p'); 
// Selects element with id content, all elements with class name item, and all paragraph elements

#4: Reaching nested elements

Elements nested within other elements can be selected using element > element or element element syntax.

/* Get all paragraph elements whose parent element class list contains 'container' */
document.querySelectorAll('.container > p'); 

/* Get all paragraph elements that are nested within an element of class 'container' */
document.querySelectorAll('.container p');

With ordinary selection methods, this would be impossible without traversing the DOM, likely resulting in more convoluted syntax.

#5: Select by HTML5 attribute and value

Because it accepts CSS syntax, querySelector and querySelectorAll can select elements by their attribute and attribute value:

/* Get all elements that contain the attribute target */
document.querySelectorAll('[target]');

/* Get all elements that contain the attribute target and are set to value '_blank' */
document.querySelectorAll('[target=_blank]');

Summary

When coming across the need for complex selection when programming, querySelector and querySelectorAll meet this demand by enabling complex element selection in a single line. And the best thing: if you already know CSS, then you are already ready to go since both methods use CSS selection syntax!