Run results for: querySelector VS querySelectorAll VS getElementsByClassName VS getElementsByID

Try to get the order of magnitude of the difference in a simple case.

Go to the benchmark
Run details:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:123.0) Gecko/20100101 Firefox/123.0
Firefox 123
Mac OS X 10.15
Desktop
2 years ago
Benchmark.js
getElementsByID
5.7M/s
getElementsByClassName
5.6M/s
querySelector (className)
3.0M/s
querySelector (elemID)
2.9M/s
querySelectorAll (className)
1.3M/s
querySelectorAll (elemID)
1.1M/s
View exact numbers
Test name Executions per second
✓ getElementsByID 5,713,954 Ops/sec
getElementsByClassName 5,571,702 Ops/sec
querySelector (className) 2,981,195 Ops/sec
querySelector (elemID) 2,881,980 Ops/sec
querySelectorAll (className) 1,301,309 Ops/sec
querySelectorAll (elemID) 1,094,597 Ops/sec
HTML Preparation code:
Tests: