Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
form.elements vs querySelector for Submit button
(version: 1)
Comparing performance of:
form elements iteration vs querySelector
Created:
10 months ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<form id="testform"> <input value="test" /> <input value="testing" /> </form> <div id="testdiv"> <input class="unique" name="unique" data-unique="1" value="test" /> <input class="unique" name="unique" data-unique="1" value="testing" /> <!-- added following divs to try and knock getElementsByClassName and getElementsByName out of the running--> <div class="test1" name="test1"> <div class="test6" name="test6"> </div> </div> <div class="test2" name="test2"> <div class="test7" name="test7"> </div> </div> <div class="test3" name="test3"> <div class="test8" name="test8"> </div> </div> <div class="test4" name="test4"> <div class="test9" name="test9"> </div> </div> <div class="test5" name="test5"> <div class="test1" name="test1"> </div> </div> <button type="submit">Submit</button> </div>
Tests:
form elements iteration
const elements = document.getElementById('testform').elements; for (const element of elements) { if (element.type === 'submit') {break;} }
querySelector
const submit_button = document.getElementById('testform').querySelector([type="submit"]);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
form elements iteration
querySelector
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
10 months ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36
Browser/OS:
Chrome 137 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
form elements iteration
2748630.5 Ops/sec
querySelector
3012550.8 Ops/sec
Related benchmarks:
form.elements vs getElementsByTagName vs querySelectorAll
Test performance of different ways of get just one particular DOM element
getElementById vs querySelector vs getElementsByClassName
getElementById and getElementsByClassName [0] vs querySelector
querySelectorAll vs getElementsByName vs getElementsByClassName
querySelector vs querySelectorAll vs getElementsByClassName vs querySelector (ID) vs getElementByID
querySelector vs querySelectorAll vs getElementsByClassName vs querySelector (ID) vs getElementsByID 20x
getElementById vs querySelector, with ten elements
getElementById vs querySelector in large DOM
Comments
Confirm delete:
Do you really want to delete benchmark?