Benchmark: getElementById vs querySelector ID vs getElementsByClassName vs querySelectorAll

HTML Preparation code:

<div id="test_element_id" class="test_element_class"></div>

Tests:

getElementById
var el = document.getElementById('test_element_id'); var className = el.className;
querySelector
var el = document.querySelector('#test_element_id'); var className = el.className;
getElementsByClassName
var el = document.getElementsByClassName('test_element_class')[0]; var className = el.className;
querySelectorAll
var el = document.querySelectorAll('.test_element_class')[0]; var className = el.className;
querySelector class
var el = document.querySelector('.test_element_class'); var className = el.className;

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

getElementById

5.3M/s

querySelector class

4.1M/s

getElementsByClassName

4.0M/s

querySelector

2.7M/s

querySelectorAll

1.7M/s

Fastest: getElementById (3.1x faster)

View exact numbers

✓ getElementById: 5,259,570 ops/sec
• querySelector class: 4,140,121 ops/sec
• getElementsByClassName: 3,972,276 ops/sec
• querySelector: 2,710,103 ops/sec
• querySelectorAll: 1,686,008 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
getElementById
querySelector
getElementsByClassName
querySelectorAll
querySelector class

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 131 on Android

View result in a separate tab

getElementById

15.5M/s

querySelector class

11.4M/s

getElementsByClassName

10.9M/s

querySelector

6.9M/s

querySelectorAll

4.0M/s

View exact numbers

Test name	Executions per second
✓ getElementById	15,493,204 Ops/sec
querySelector class	11,350,192 Ops/sec
getElementsByClassName	10,921,998 Ops/sec
querySelector	6,942,204 Ops/sec
querySelectorAll	3,968,553 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring the performance of different DOM selection methods in JavaScript is crucial for optimizing web applications' loading times and responsiveness.

The provided JSON benchmark definition represents a set of tests to compare the performance of four DOM selection methods:

1. `document.getElementById`
2. `document.querySelector` (with an ID selector)
3. `document.getElementsByClassName` (with a class selector)
4. `document.querySelectorAll` (with a class selector)

Let's break down each option and its pros and cons:

**1. `document.getElementById`**

* Purpose: Selects the first element with the specified ID.
* Pros:
	+ Simple to use and understand.
	+ Works well for single elements with unique IDs.
* Cons:
	+ Returns only the first matching element, which can lead to unexpected behavior if there are multiple elements with the same ID.
	+ May not be optimized for performance in modern browsers.

**2. `document.querySelector` (with an ID selector)**

* Purpose: Selects the first element that matches the specified CSS selector.
* Pros:
	+ More flexible than `getElementById`, as it can match multiple elements or use attribute selectors.
	+ Works well for selecting elements based on their class, type, or other attributes.
* Cons:
	+ May not be optimized for performance in modern browsers.

**3. `document.getElementsByClassName`**

* Purpose: Returns a collection of elements that match the specified class name.
* Pros:
	+ Allows multiple matching elements to be selected.
	+ Works well for selecting elements based on their class names.
* Cons:
	+ Returns an array-like object, which can lead to unexpected behavior if not handled correctly.
	+ May not be optimized for performance in modern browsers.

**4. `document.querySelectorAll`**

* Purpose: Returns a collection of elements that match the specified CSS selector.
* Pros:
	+ Similar to `querySelector`, but returns multiple matching elements.
	+ Works well for selecting elements based on their class, type, or other attributes.
* Cons:
	+ May not be optimized for performance in modern browsers.

The provided benchmark results show the performance of each method, with `document.getElementById` being the fastest (3639497.75 executions per second) and `document.querySelectorAll` being the slowest (1124596.5 executions per second).

Other alternatives to consider:

* `document.querySelectorAll`: Similar to `querySelector`, but returns all matching elements instead of a single element.
* Using CSS selectors with modern browsers: Modern browsers have improved their performance for using CSS selectors, making it possible to use methods like `querySelector` and `querySelectorAll` more efficiently.

In summary, the choice of DOM selection method depends on the specific requirements of your application. If you need to select a single element based on its ID, `document.getElementById` is a good choice. For selecting multiple elements or using class selectors, `document.querySelector`, `document.getElementsByClassName`, and `document.querySelectorAll` are more suitable options.

When writing code, it's essential to consider the trade-offs between performance, readability, and maintainability when choosing the optimal DOM selection method for your use case.

getElementById vs querySelector ID vs getElementsByClassName vs querySelectorAll (version: 0)

Comparing performance of: `getElementById vs querySelector vs getElementsByClassName vs querySelectorAll vs querySelector class`

Created: 6 years ago by: Guest

Go to the latest result

getElementById

querySelector

getElementsByClassName

querySelectorAll

querySelector class

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

getElementById vs querySelector ID vs getElementsByClassName vs querySelectorAll (version: 0)

Comparing performance of: getElementById vs querySelector vs getElementsByClassName vs querySelectorAll vs querySelector class

Created: 6 years ago by: Guest

Go to the latest result

getElementById

querySelector

getElementsByClassName

querySelectorAll

querySelector class

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 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: `getElementById vs querySelector vs getElementsByClassName vs querySelectorAll vs querySelector class`