Accessing Elements in JavaScript with querySelector and querySelectorAll

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');

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.