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=503260" width="100%" height="500px"></iframe>
Run details:
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:122.0) Gecko/20100101 Firefox/122.0
Browser:
Firefox 122
Operating system:
Windows
Device Platform:
Desktop
Date tested:
2 years ago
Test name
Executions per second
form.elements
2149610.0 Ops/sec
getElementsByTagName
2106109.2 Ops/sec
querySelectorAll
1011973.5 Ops/sec
getElementsByClassName
2034776.2 Ops/sec
getElementsByName
2361481.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; }