Benchmark: form.elements vs getElementsByTagName vs querySelectorAll

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">&nbsp;</div>
  </div>
  <div class="test2" name="test2">
    <div class="test7" name="test7">&nbsp;</div>
  </div>
  <div class="test3" name="test3">
    <div class="test8" name="test8">&nbsp;</div>
  </div>
  <div class="test4" name="test4">
    <div class="test9" name="test9">&nbsp;</div>
  </div>
  <div class="test5" name="test5">
    <div class="test1" name="test1">&nbsp;</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; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
form.elements
getElementsByTagName
querySelectorAll
getElementsByClassName
getElementsByName

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 2 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:106.0) Gecko/20100101 Firefox/106.0

Browser/OS: Firefox 106 on Windows

View result in a separate tab

Test name	Executions per second
form.elements	1314126.0 Ops/sec
getElementsByTagName	1663796.0 Ops/sec
querySelectorAll	594754.4 Ops/sec
getElementsByClassName	1709052.0 Ops/sec
getElementsByName	1902293.0 Ops/sec

form.elements vs getElementsByTagName vs querySelectorAll (version: 11)

Test different ways of getting form elements to see if in certain fringe cases if you can improve performance.

Comparing performance of: form.elements vs getElementsByTagName vs querySelectorAll vs getElementsByClassName vs getElementsByName

Created: 6 years ago by: Registered User

Jump to the latest result

form.elements

getElementsByTagName

querySelectorAll

getElementsByClassName

getElementsByName

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A