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

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36

Browser/OS: Chrome 138 on Windows

View result in a separate tab

Test name	Executions per second
form.elements	267121.1 Ops/sec
getElementsByTagName	318644.4 Ops/sec
querySelectorAll	172142.6 Ops/sec
getElementsByClassName	381583.6 Ops/sec
getElementsByName	414021.2 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is being tested, compared options, their pros and cons, and other considerations.

**What is being tested?**

The benchmark compares four ways to retrieve form elements from an HTML document:

1. Using `form.elements` (a property of the `document` object)
2. Using `getElementsByTagName('input')`
3. Using `querySelectorAll('[data-unique]')`
4. Using `getElementsByClassName('unique')`

**Options comparison**

The four options are compared in terms of performance, specifically the number of executions per second.

* **form.elements**: This option uses the `elements` property of the `document` object to retrieve all form elements.
* **getElementsByTagName('input')**: This option uses the `getElementsByTagName()` method to retrieve all input elements within a specific element (in this case, the `testdiv` element).
* **querySelectorAll('[data-unique]')**: This option uses the `querySelectorAll()` method to retrieve all elements that match the specified CSS selector (`[data-unique]`).
* **getElementsByClassName('unique')**: This option uses the `getElementsByClassName()` method to retrieve all elements with a specific class name (`unique`).

**Pros and cons of each approach**

Here's a brief summary of the pros and cons of each approach:

1. **form.elements**:
	* Pros: Simple, efficient, and widely supported.
	* Cons: May not work well for nested forms or complex form structures.
2. **getElementsByTagName('input')**:
	* Pros: Allows for fine-grained control over element selection.
	* Cons: Can be slower than `form.elements` due to the overhead of method calls.
3. **querySelectorAll('[data-unique]')**:
	* Pros: Flexible and powerful, can match elements using CSS selectors.
	* Cons: May be slower than other options due to the complexity of the selector.
4. **getElementsByClassName('unique')**:
	* Pros: Fast and efficient for matching elements with a specific class name.
	* Cons: May not work well for nested forms or complex form structures.

**Other considerations**

1. **Library usage**: The benchmark uses several libraries, including `querySelectorAll` and `getElementsByClassName`, which are part of the DOM API. These libraries provide a convenient way to select elements using CSS selectors and class names.
2. **Device platform and browser**: The benchmark results are specific to Chrome 129 on Windows Desktop devices. This means that the performance results may vary across different browsers, platforms, and device configurations.

**Benchmark results**

The benchmark results show the number of executions per second for each option:

* **form.elements**: 1481738
* **getElementsByTagName('input')**: 2493123
* **querySelectorAll('[data-unique]')**: 2253717
* **getElementsByClassName('unique')**: 2664755

Based on these results, `getElementsByClassName('unique')` appears to be the fastest option, followed closely by `getElementsByTagName('input')`.

Related benchmarks:

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: 9 years ago by: Registered User

Jump to the latest result

form.elements

getElementsByTagName

querySelectorAll

getElementsByClassName

getElementsByName

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):