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; }

Historical Performance Data aggregated from 24 community runs

Desktop Results:

Chrome 18 runs

getElementsByName

1.9M/s

getElementsByClassName

1.8M/s

getElementsByTagName

1.7M/s

form.elements

1.5M/s

querySelectorAll

1.0M/s

Fastest: getElementsByName (1.9x faster)

View exact numbers

✓ getElementsByName: 1,891,105 ops/sec
• getElementsByClassName: 1,785,288 ops/sec
• getElementsByTagName: 1,697,883 ops/sec
• form.elements: 1,461,506 ops/sec
• querySelectorAll: 1,010,422 ops/sec

Firefox 6 runs

form.elements

3.1M/s

getElementsByName

2.9M/s

getElementsByTagName

2.8M/s

getElementsByClassName

2.4M/s

querySelectorAll

1.2M/s

Fastest: form.elements (2.6x faster)

View exact numbers

✓ form.elements: 3,107,649 ops/sec
• getElementsByName: 2,906,694 ops/sec
• getElementsByTagName: 2,760,958 ops/sec
• getElementsByClassName: 2,410,348 ops/sec
• querySelectorAll: 1,200,640 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: one year 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

getElementsByName

414K/s

getElementsByClassName

382K/s

getElementsByTagName

319K/s

form.elements

267K/s

querySelectorAll

172K/s

View exact numbers

Test name	Executions per second
✓ getElementsByName	414,021 Ops/sec
getElementsByClassName	381,584 Ops/sec
getElementsByTagName	318,644 Ops/sec
form.elements	267,121 Ops/sec
querySelectorAll	172,143 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')`.

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

Go to the latest result

form.elements

getElementsByTagName

querySelectorAll

getElementsByClassName

getElementsByName

Historical Performance Data aggregated from 24 community runs

Desktop Results:

Chrome 18 runs

Firefox 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

Go to the latest result

form.elements

getElementsByTagName

querySelectorAll

getElementsByClassName

getElementsByName

Historical Performance Data aggregated from 24 community runs

Desktop Results:

Chrome 18 runs

Firefox 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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