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
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
getElementsByName
2.4M/s
form.elements
2.1M/s
getElementsByTagName
2.1M/s
getElementsByClassName
2.0M/s
querySelectorAll
1.0M/s
View exact numbers
Test name
Executions per second
✓
getElementsByName
2,361,481 Ops/sec
form.elements
2,149,610 Ops/sec
getElementsByTagName
2,106,109 Ops/sec
getElementsByClassName
2,034,776 Ops/sec
querySelectorAll
1,011,974 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; }