Benchmark: JS getElementById vs querySelector vs getElementsByClassName

HTML Preparation code:

<div id="testDiv" class="test-div"></div>

Tests:

getElementById
document.getElementById('testDiv');
querySelector (ID)
document.querySelector('#testDiv');
querySelector (CLASSNAME)
document.querySelector('.test-div');
getElementsByClassName
document.getElementsByClassName('test-div')[0]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getElementById
querySelector (ID)
querySelector (CLASSNAME)
getElementsByClassName

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.54 Safari/537.36

Browser/OS: Chrome 101 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
getElementById	3692020.0 Ops/sec
querySelector (ID)	2101664.8 Ops/sec
querySelector (CLASSNAME)	3119377.8 Ops/sec
getElementsByClassName	2581611.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this benchmark and explore the different approaches.

**Benchmark Definition**

The website `MeasureThat.net` provides a JSON representation of a benchmark, which includes:

* `Name`: The name of the benchmark (in this case, "JS getElementById vs querySelector vs getElementsByClassName").
* `Description`: A brief description of what's being tested.
* `Script Preparation Code`: An empty string, indicating that no script needs to be run before running the tests. In this case, we can infer that some setup code might have been executed behind the scenes (we'll discuss why in a moment).
* `Html Preparation Code`: A snippet of HTML that's used to test the different DOM queries.

**Individual Test Cases**

We're presented with four individual test cases:

1. `document.getElementById('testDiv')`: Tests finding an element by its ID.
2. `document.querySelector('#testDiv')`: Tests finding an element by its ID using `querySelector`.
3. `document.querySelector('.test-div')`: Tests finding an element by its class name.
4. `document.getElementsByClassName('test-div')[0]`: Tests finding elements by their class name and returns the first one.

**Library Used**

In this benchmark, no specific library is used beyond what's included in the browser (e.g., DOM APIs).

**Options Compared**

We're comparing four different approaches to find an element:

* `document.getElementById('testDiv')`: A traditional, method-based approach.
* `document.querySelector('#testDiv')`: An attribute-based approach that searches for an ID by its value.
* `document.querySelector('.test-div')`: Another attribute-based approach, this time using a class name.
* `document.getElementsByClassName('test-div')[0]`: A collection-based approach that returns all elements with the specified class name and returns the first one.

**Pros and Cons of Each Approach**

Here's a brief summary:

* **Method-based (`document.getElementById`)**: Pros: Efficient for IDs, well-supported. Cons: May be slower than attribute-based approaches due to method call overhead.
* **Attribute-based (`document.querySelector` with ID or class name)**: Pros: More efficient than method-based methods, good performance. Cons: May not work if the element doesn't have an ID (ID-based), may return multiple elements for a single class name.
* **Collection-based (`document.getElementsByClassName`)**: Pros: Returns all matching elements, can be useful in certain situations. Cons: May be slower due to iteration overhead, returns multiple elements instead of just one.

**Special JS Features**

None mentioned explicitly, but note that `querySelector` and `getElementsByClassName` use CSS selectors under the hood. These allow for more expressive querying (e.g., `div > span`) beyond simple ID or class name matching.

**Other Considerations**

The benchmark uses multiple executions per second to estimate performance, which is a good practice for measuring execution times.

**Alternatives**

Some alternative approaches you might use in a different context:

* Use `document.querySelector` with the `:has` pseudo-class to find an element that contains another element.
* Utilize `requestAnimationFrame` or Web Workers for parallelization and better performance.
* Consider using libraries like jQuery, which provide an abstraction layer over DOM queries.

In summary, this benchmark tests four different approaches to finding elements in a DOM. While each has its trade-offs, attribute-based methods (using `querySelector`) tend to be more efficient than traditional method-based methods (like `getElementById`).

Related benchmarks:

JS getElementById vs querySelector vs getElementsByClassName (version: 0)

Speed of getElementById vs querySelector vs getElementsByClassName

Comparing performance of: getElementById vs querySelector (ID) vs querySelector (CLASSNAME) vs getElementsByClassName

Created: 2 years ago by: Guest

Jump to the latest result

getElementById

querySelector (ID)

querySelector (CLASSNAME)

getElementsByClassName

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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