Tips

About query selectors

JavaScript has many different query selectors, some seemingly interchangeable, for example:

document.head and document.body
document.getElementById, document.getElementsByClassName and document.getElementsByTagName
document.querySelector and document.querySelectorAll

Knowing which to use for optimal performance depends on the situation, but a good rule of thumb is:

to access the head of the document, use document.head over document.getElementsByTagName('head')
to access the body of the document, use document.body over document.getElementsByTagName('body')
to access an element by id use document.getElementById('id') over document.querySelector('#id')
to access one element by class name use document.getElementsByClassName('className')[0] over document.querySelector('.className')
to access multiple elements by class name use document.getElementsByClassName('className') over document.querySelectorAll('.className')
to access one element by tag name use document.getElementsByTagName('tagName')[0] over document.querySelector('tagName')
to access multiple elements by tag name use document.getElementsByTagName('tagName') over document.querySelectorAll('tagName')

In most cases querySelector and querySelectorAll should be used only on selectors more sophisticated than a simple id, class or tag name.