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 (Android 15; Mobile; rv:136.0) Gecko/136.0 Firefox/136.0
Firefox Mobile 136
Android
Mobile
15 days ago
Test name Executions per second
querySelector class 3746736.8 Ops/sec
getElementsByClassName 5951979.5 Ops/sec
getElementById 6026779.0 Ops/sec
querySelector with wildcards 3368481.0 Ops/sec
querySelectorAll with wildcards 1247716.4 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-']");