Table of Contents

URL: https://www.progressiverobot.com/js-queryselector-queryselectorall/

It used to be not so trivial to access elements in pure JavaScript using the DOM. This to two new methods, <^>querySelector<^> & <^>querySelectorAll<^>, that are now supported in all modern browsers, this task is now much easier.

querySelector

queryselector illustration for: querySelector

<^>querySelector<^> returns the first element that match the provided CSS query. Use it on the full document:

				
					
let myElem = document.querySelector('#myElem');

Or use it on an element to get an element within the element:

				
					
let elem = document.querySelector('p');

let myElem = elem.querySelector('#myElem');

querySelectorAll

<^>querySelector<^> returns all the elements that match the provided selector:

				
					
let elems = document.querySelectorAll('p');

And here you can do the same and narrow your selection. Let's select <^>span<^> elements that are in the first <^>p<^> element:

				
					
let firstP = document.querySelector('p');

let spanElems = firstP.querySelectorAll('span');

You can find more data on support for the query selector feature across the major browsers from caniuse.com.