Benchmark: getElementById vs querySelectorAll vs getElementsByClassName vs getElementsByName

HTML Preparation code:

<div id="testdiv">
  <div id="unique" class="unique" name="unique" data-unique="1">test</div>
</div>

Script Preparation code:

var i, imax;
var doc = document;

Tests:

getElementById
var test = doc.getElementById('testdiv').childNodes[0].innerHTML;
getElementsByTagName
var formelem = doc.getElementById('testdiv').getElementsByTagName('div')[0].innerHTML;
querySelectorAll
var test = doc.getElementById('testdiv').querySelectorAll('.unique')[0].innerHTML;
getElementsByClassName
var test = doc.getElementById('testdiv').getElementsByClassName('unique')[0].innerHTML;
getElementsByName
var test = doc.getElementsByName('unique')[0].innerHTML;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getElementById
getElementsByTagName
querySelectorAll
getElementsByClassName
getElementsByName

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 5 years ago)

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

Browser/OS: Chrome 75 on Windows

View result in a separate tab

Test name	Executions per second
getElementById	3305692.2 Ops/sec
getElementsByTagName	957095.8 Ops/sec
querySelectorAll	464221.5 Ops/sec
getElementsByClassName	946421.6 Ops/sec
getElementsByName	1016895.4 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmarking test created on MeasureThat.net. The test compares the performance of different DOM element retrieval methods: `getElementById`, `querySelectorAll`, `getElementsByClassName`, and `getElementsByName`.

**Test Cases**

There are four individual test cases:

1. `getElementById`: Retrieves an element by its ID using `doc.getElementById('testdiv').childNodes[0].innerHTML`.
2. `getElementsByTagName`: Retrieves a collection of elements by their tag name using `doc.getElementById('testdiv').getElementsByTagName('div')[0].innerHTML`.
3. `querySelectorAll`: Retrieves all elements that match a CSS selector using `doc.getElementById('testdiv').querySelectorAll('.unique')[0].innerHTML`.
4. `getElementsByClassName`: Retrieves an element by its class name using `doc.getElementById('testdiv').getElementsByClassName('unique')[0].innerHTML`.
5. `getElementsByName`: Retrieves an element by its attribute name using `doc.getElementsByName('unique')[0].innerHTML`.

**Library and Syntax**

The test uses the following JavaScript libraries and syntax:

* DOM methods: `getElementById`, `querySelectorAll`, `getElementsByClassName`, and `getElementsByName` are native JavaScript methods for interacting with the Document Object Model (DOM).
* HTML parsing: The test creates an HTML document using the `document` object and assigns it to a variable.

**Options Compared**

The test compares the performance of different DOM element retrieval methods:

1. `getElementById`: Retrieves an element by its unique ID.
2. `querySelectorAll`: Uses a CSS selector to retrieve all elements that match a specific pattern.
3. `getElementsByClassName`: Retrieves an element by its class name.
4. `getElementsByName`: Retrieves an element by its attribute name.

**Pros and Cons**

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

1. **getElementById**:
	* Pros: Fast, efficient, and reliable for unique IDs.
	* Cons: May not work if the ID is duplicated or if the DOM has changed.
2. **querySelectorAll**:
	* Pros: Flexible, can handle multiple elements with a single selector.
	* Cons: Can be slower than `getElementById` due to the overhead of CSS parsing.
3. **getElementsByClassName**:
	* Pros: Handles class names, but may not work if there are duplicate classes or if the DOM has changed.
	* Cons: Can be slower than `getElementById`.
4. **getElementsByName**:
	* Pros: Fast and efficient for attribute-based retrieval.
	* Cons: May not work if the attribute name is duplicated or if the DOM has changed.

**Device Platform and Browser**

The benchmark was run on a Windows 10 desktop with Google Chrome 75 browser, executing at approximately 3.3 million executions per second.

**Alternatives**

For similar benchmarking purposes, you can use other online tools:

1. **Benchmark.js**: A lightweight JavaScript benchmarking library for Node.js.
2. **JsPerf**: A popular online tool for comparing the performance of different JavaScript code snippets.
3. **Browser Benchmarking Tools**: Many browser vendors provide built-in benchmarking tools, such as Google Chrome's `chrome://benchmarks/` page.

Note that these alternatives may have different test cases and focus areas than MeasureThat.net.

Related benchmarks:

getElementById vs querySelectorAll vs getElementsByClassName vs getElementsByName (version: 0)

Test performance of different ways of get just one particular DOM element

Comparing performance of: getElementById vs getElementsByTagName vs querySelectorAll vs getElementsByClassName vs getElementsByName

Created: 5 years ago by: Guest

Jump to the latest result

getElementById

getElementsByTagName

querySelectorAll

getElementsByClassName

getElementsByName

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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