Benchmark: querySelector vs getElementsByName vs getElementById vs getElementsByClassName

HTML Preparation code:

<div name='test' id='test' class='test'></div>

Tests:

querySelector
document.querySelector('#test')
getElementsByName
document.getElementsByName('div[name="#test"]')
getElementById
document.getElementById('test')
getElementsByClassName
document.getElementsByClassName(".test")

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

getElementsByName

7.8M/s

getElementsByClassName

7.5M/s

getElementById

6.9M/s

querySelector

3.8M/s

Fastest: getElementsByName (2.0x faster)

View exact numbers

✓ getElementsByName: 7,834,678 ops/sec
• getElementsByClassName: 7,477,382 ops/sec
• getElementById: 6,915,788 ops/sec
• querySelector: 3,842,834 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
querySelector
getElementsByName
getElementById
getElementsByClassName

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/130.0.0.0 Safari/537.36

Browser/OS: Chrome 130 on Windows

View result in a separate tab

getElementsByName

7.8M/s

getElementsByClassName

7.5M/s

getElementById

7.0M/s

querySelector

3.8M/s

View exact numbers

Test name	Executions per second
✓ getElementsByName	7,834,678 Ops/sec
getElementsByClassName	7,518,262 Ops/sec
getElementById	6,968,310 Ops/sec
querySelector	3,842,834 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided benchmark tests the performance of four different methods to select elements from an HTML document in JavaScript:

1. `document.querySelector('#test')`
2. `document.getElementsByName('div[name="#test"]')`
3. `document.getElementById('test')`
4. `document.getElementsByClassName('.test')`

**Library Used**

None of the test cases uses a specific library, but they do use native browser APIs.

**Options Compared**

The benchmark compares the performance of four different methods:

1. **`querySelector`**: Uses the `querySelector` method to select an element by its ID.
2. **`getElementsByName`**: Uses the `getElementsByName` method to select elements by their name attribute.
3. **`getElementById`**: Uses the `getElementById` method to select an element by its ID (similar to `querySelector`, but without the `$=` syntax).
4. **`getElementsByClassName`**: Uses the `getElementsByClassName` method to select elements by their class attribute.

**Pros and Cons of Each Approach**

1. **`querySelector`**:
	* Pros: Efficient, flexible, and widely supported.
	* Cons: May return multiple elements if not used correctly.
2. **`getElementsByName`**:
	* Pros: Simple to use, but may be slower than other methods due to name attribute parsing.
	* Cons: Name attribute parsing can lead to performance issues if the attribute is very large.
3. **`getElementById`**:
	* Pros: Fast and efficient, especially when combined with `querySelector`.
	* Cons: Limited flexibility compared to `querySelector`, as it only selects by ID.
4. **`getElementsByClassName`**:
	* Pros: Flexible, but may be slower than other methods due to class attribute parsing.
	* Cons: Class attribute parsing can lead to performance issues if the attribute is very large.

**Special JS Feature/Syntax**

The `querySelector` method uses a CSS-like syntax to select elements. It was introduced in ECMAScript 5 and has become widely supported across browsers.

**Other Alternatives**

If you want to explore other alternatives, here are a few:

* **`document.evaluate`**: A more powerful and flexible method for selecting elements using XPath expressions.
* **`CSS selectors`**: Some libraries, like jQuery, use CSS selectors to select elements. These can be more efficient than native browser APIs in some cases.

Keep in mind that the performance differences between these methods may vary depending on the specific use case and browser implementation.

**Benchmark Preparation Code**

The `Html Preparation Code` is a simple `<div>` element with an ID, class, and name attribute:
```html
<div name='test' id='test' class='test'></div>
```
This code sets up a basic HTML structure for the benchmark to run on.

querySelector vs getElementsByName vs getElementById vs getElementsByClassName (version: 1)

Comparing performance of: `querySelector vs getElementsByName vs getElementById vs getElementsByClassName`

Created: 5 years ago by: Registered User

Go to the latest result

querySelector

getElementsByName

getElementById

getElementsByClassName

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

querySelector vs getElementsByName vs getElementById vs getElementsByClassName (version: 1)

Comparing performance of: querySelector vs getElementsByName vs getElementById vs getElementsByClassName

Created: 5 years ago by: Registered User

Go to the latest result

querySelector

getElementsByName

getElementById

getElementsByClassName

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 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: `querySelector vs getElementsByName vs getElementById vs getElementsByClassName`