MeasureThat.net

Run results for: querySelector vs querySelectorAll vs getElementsByClassName when trying to select by group of similar ID elements

Go to the benchmark
Run details:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36
Chrome 134
Windows
Desktop
22 days ago
Test name Executions per second
querySelector class 17285412.0 Ops/sec
getElementsByClassName 21228334.0 Ops/sec
getElementById 45159868.0 Ops/sec
querySelector with wildcards 10772074.0 Ops/sec
querySelectorAll with wildcards 3558710.5 Ops/sec
HTML Preparation code:
AخA
 
1
<div class="test" id="test-1"></div>
2
<div class="test" id="test-2"></div>
3
<div class="test" id="test-3"></div>
4
<div class="test" id="test-4"></div>
5
<div class="test" id="test-5"></div>
Script Preparation code:
 
/*your preparation JavaScript code goes here
To execute async code during the script preparation, wrap it as function globalMeasureThatScriptPrepareFunction, example:*/
async function globalMeasureThatScriptPrepareFunction() {
    // This function is optional, feel free to remove it.
    // await someThing();
}
Tests:

  • querySelector class

     
    document.querySelector(".test")

  • getElementsByClassName

     
    document.getElementsByClassName(".test")

  • getElementById

     
    document.getElementById("#test-1")

  • querySelector with wildcards

     
    document.querySelector("[id^='test-']");

  • querySelectorAll with wildcards

     
    document.querySelectorAll("[id^='test-']");