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>

AخA
 
<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;

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

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

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

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
form.elements
getElementsByTagName
querySelectorAll
getElementsByClassName
getElementsByName

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 13 days ago)

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

Browser/OS: Firefox 136 on Windows

View result in a separate tab

Test name	Executions per second
form.elements	3097062.2 Ops/sec
getElementsByTagName	2617286.2 Ops/sec
querySelectorAll	779798.8 Ops/sec
getElementsByClassName	1930128.5 Ops/sec
getElementsByName	2524947.2 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 5 months ago):

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:

Using form.elements (a property of the document object)
Using getElementsByTagName('input')
Using querySelectorAll('[data-unique]')
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:

form.elements:
- Pros: Simple, efficient, and widely supported.
- Cons: May not work well for nested forms or complex form structures.
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.
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.
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

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.
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').

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

Jump to the latest result