maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
docbrown/docs/frontend/tips.md
rhymes f9506affb5
Use faster JS selection methods (#11409) 
* Add JS tips section to frontend documentation

* Replace document.getElementsByTagName('body') with document.body

* Replace querySelectorAll with faster selecting methods where appropriate

* Replace querySelector with faster selecting methods where appropriate

* Fix typo

* Fix forEach and getElementsByClassName

* Change querySelector* to faster methods in erb files

* Change querySelector* to faster methods in ruby files

* Fix runkit tag

* Various fixes

* Update app/assets/javascripts/initializers/initializeEllipsisMenu.js

Co-authored-by: Ridhwana <Ridhwana.Khan16@gmail.com>

* Update app/assets/javascripts/utilities/slideSidebar.js

Co-authored-by: Ridhwana <Ridhwana.Khan16@gmail.com>

* Commenting out flaky spec

Co-authored-by: Ridhwana <Ridhwana.Khan16@gmail.com>
2020-11-16 17:35:50 +01:00

1.8 KiB
Raw Blame History

title
Tips

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.

Resources