Benchmark: getElementById vs querySelector 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;
querySelector
var test = doc.getElementById('testdiv').querySelector('.unique').innerHTML;
getElementsByClassName
var test = doc.getElementById('testdiv').getElementsByClassName('unique')[0].innerHTML;
getElementsByName
var test = doc.getElementsByName('unique')[0].innerHTML;

Historical Performance Data aggregated from 62 community runs

Desktop Results:

Chrome 37 runs

getElementById

9.8M/s

getElementsByName

5.1M/s

querySelector

5.0M/s

getElementsByTagName

4.7M/s

getElementsByClassName

4.3M/s

Fastest: getElementById (2.3x faster)

View exact numbers

✓ getElementById: 9,788,081 ops/sec
• getElementsByName: 5,121,433 ops/sec
• querySelector: 4,963,149 ops/sec
• getElementsByTagName: 4,673,762 ops/sec
• getElementsByClassName: 4,253,307 ops/sec

Firefox 25 runs

getElementById

15.8M/s

querySelector

12.8M/s

getElementsByName

12.1M/s

getElementsByTagName

9.4M/s

getElementsByClassName

8.8M/s

Fastest: getElementById (1.8x faster)

View exact numbers

✓ getElementById: 15,807,880 ops/sec
• querySelector: 12,762,922 ops/sec
• getElementsByName: 12,103,658 ops/sec
• getElementsByTagName: 9,403,122 ops/sec
• getElementsByClassName: 8,751,911 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
getElementsByTagName
querySelector
getElementsByClassName
getElementsByName

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 145 on Windows

View result in a separate tab

getElementById

24.9M/s

getElementsByTagName

7.2M/s

getElementsByName

5.8M/s

querySelector

5.0M/s

getElementsByClassName

4.3M/s

View exact numbers

Test name	Executions per second
✓ getElementById	24,949,354 Ops/sec
getElementsByTagName	7,169,284 Ops/sec
getElementsByName	5,777,920 Ops/sec
querySelector	4,963,149 Ops/sec
getElementsByClassName	4,253,307 Ops/sec

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

LLMs can make mistakes. Check important info.

**What is being tested?**

MeasureThat.net is testing the performance of different methods to retrieve a single DOM element in JavaScript. The benchmark compares the execution speed of four methods:

1. `getElementById`
2. `querySelector`
3. `getElementsByClassName`
4. `getElementsByName`

Each method is used to access an element with a specific id, class, or name.

**Options compared:**

The benchmark directly compares the performance of these four methods.

**Pros and Cons of each approach:**

1. **`getElementById`**:
	* Pros: Simple, widely supported, and easy to use.
	* Cons: Can be slow if the element is not found (false positive), which can lead to unnecessary iterations.
2. **`querySelector`**:
	* Pros: More flexible than `getElementById`, allows for more complex selectors.
	* Cons: May be slower due to its more complex parsing mechanism.
3. **`getElementsByClassName`**:
	* Pros: Can retrieve multiple elements with the same class, reducing the number of iterations.
	* Cons: Returns a NodeList (live DOM elements), which can lead to performance issues if not handled correctly.
4. **`getElementsByName`**:
	* Pros: Allows for searching by name attribute, which might be useful in certain scenarios.
	* Cons: Typically slower and less supported than the other methods.

**Libraries and their purposes:**

1. `querySelector`: This is a CSS selector API that allows you to select elements based on various criteria (e.g., id, class, attributes). It's part of the W3C DOM specification.
2. `getElementsByClassName`: This method returns a NodeList containing all elements with the specified class name.

**Special JS features or syntax:**

1. `querySelector` and `getElementsByClassName` use CSS selectors, which are a powerful feature in JavaScript for selecting elements.
2. The `getElementsByName` method uses the `name` attribute to search for elements, which might not be as common as other attributes like `id` or `class`.

**Other alternatives:**

1. **`document.getElementById` with a fallback**: In some cases, using `document.getElementById` and then checking if the result is null can provide better performance than directly using `getElementsByClassName`.
2. **Using libraries like jQuery**: If you need to perform complex DOM manipulations or selections, consider using a library like jQuery, which provides an optimized implementation of CSS selectors.
3. **Using vanilla JavaScript alternatives**: Depending on your specific use case, you might be able to optimize performance by using alternative methods like `document.querySelectorAll` (for all elements matching the selector) or `Array.prototype.filter` and `Element.prototype.matches` (for complex selections).

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

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

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

Created: 9 years ago by: Registered User

Go to the latest result

getElementById

getElementsByTagName

querySelector

getElementsByClassName

getElementsByName

Historical Performance Data aggregated from 62 community runs

Desktop Results:

Chrome 37 runs

Firefox 25 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 vs getElementsByClassName vs getElementsByName (version: 1)

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

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

Created: 9 years ago by: Registered User

Go to the latest result

getElementById

getElementsByTagName

querySelector

getElementsByClassName

getElementsByName

Historical Performance Data aggregated from 62 community runs

Desktop Results:

Chrome 37 runs

Firefox 25 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 getElementsByTagName vs querySelector vs getElementsByClassName vs getElementsByName`