Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Run results for:
form.elements vs getElementsByTagName vs querySelectorAll
Test different ways of getting form elements to see if in certain fringe cases if you can improve performance.
Go to the benchmark
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=610282" width="100%" height="500px"></iframe>
Run details:
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36
Browser:
Chrome 136
Operating system:
Windows
Device Platform:
Desktop
Date tested:
10 months ago
Test name
Executions per second
form.elements
2906848.2 Ops/sec
getElementsByTagName
3737160.0 Ops/sec
querySelectorAll
2252146.8 Ops/sec
getElementsByClassName
3859855.2 Ops/sec
getElementsByName
4259327.0 Ops/sec
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> </div>
Script Preparation code:
var i, imax; var doc = document;
Tests:
form.elements
var formelem = doc.getElementById('testform').elements; for (i = 0, imax = formelem.length; i < imax; i += 1) { var elemvalue = formelem[i].value; }
getElementsByTagName
var formelem = doc.getElementById('testdiv').getElementsByTagName('input'); for (i = 0, imax = formelem.length; i < imax; i += 1) { var elemvalue = formelem[i].value; }
querySelectorAll
var formelem = doc.getElementById('testdiv').querySelectorAll('[data-unique]'); for (i = 0, imax = formelem.length; i < imax; i += 1) { var elemvalue = formelem[i].value; }
getElementsByClassName
var formelem = doc.getElementById('testdiv').getElementsByClassName('unique'); for (i = 0, imax = formelem.length; i < imax; i += 1) { var elemvalue = formelem[i].value; }
getElementsByName
var formelem = doc.getElementsByName('unique'); for (i = 0, imax = formelem.length; i < imax; i += 1) { var elemvalue = formelem[i].value; }