Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
getElementById vs querySelector (class vs id)
(version: 1)
Comparing performance of:
getElementById vs querySelector
Created:
one year ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id="t" class="t"></div>
Tests:
getElementById
var el = document.getElementById('t'); var className = el.className;
querySelector
var el = document.querySelector('.t'); var className = el.className;
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
getElementById
querySelector
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (X11; Linux x86_64; rv:139.0) Gecko/20100101 Firefox/139.0
Browser/OS:
Firefox 139 on Linux
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=608740" width="100%" height="500px"></iframe>
getElementById
4.7M/s
querySelector
3.5M/s
View exact numbers
Test name
Executions per second
✓
getElementById
4,748,257 Ops/sec
querySelector
3,526,864 Ops/sec
Autogenerated LLM Summary
(model
gpt-4o-mini
, generated one year ago):
The benchmark defined in the JSON evaluates the performance of two methods for selecting DOM elements in JavaScript: `getElementById` and `querySelector`. ### Options Compared 1. **getElementById**: - **Benchmark Definition**: ```javascript var el = document.getElementById('t'); var className = el.className; ``` - **Test Name**: "getElementById" - **Purpose**: This method selects a single element based on its unique ID. In this case, it retrieves the `<div>` element with the ID "t". 2. **querySelector**: - **Benchmark Definition**: ```javascript var el = document.querySelector('.t'); var className = el.className; ``` - **Test Name**: "querySelector" - **Purpose**: This method selects the first element that matches a specified CSS selector. Here, it retrieves the same `<div>` element by its class name "t". ### Performance Results From the benchmark results, we see: - **getElementById** achieved **17,275,460 executions per second**. - **querySelector** achieved **13,366,061 executions per second**. ### Pros and Cons of Each Approach #### getElementById **Pros**: - **Performance**: Generally faster than `querySelector` since it directly accesses elements by their ID, which is a unique identifier. - **Simplicity**: Clear and straightforward when dealing with elements that have IDs. **Cons**: - Limited to selecting elements by their ID only; cannot handle complex queries. #### querySelector **Pros**: - **Flexibility**: Can select elements using CSS selectors, allowing for complex selections (e.g., selecting by class, attribute, or even nested selections). - **Consistency**: Works similarly to other CSS-based queries, making it easier for developers familiar with CSS to utilize. **Cons**: - **Performance**: Generally slower than `getElementById` for simple selections due to the overhead of parsing selectors and possibly querying multiple elements. - **Potentially less efficient** in larger DOM trees or when used repeatedly in performance-critical situations. ### Libraries and Other Considerations In this benchmark, there are no specific libraries tested; both methods are built-in JavaScript functionalities of the DOM API. ### Alternatives - **getElementsByClassName**: Used to select elements by their class name. It returns a live HTMLCollection of elements, which can be beneficial or detrimental depending on the use case. - **querySelectorAll**: Similar to `querySelector`, but returns a NodeList of all matching elements, not just the first one. This allows for more complex selections but has similar performance concerns. ### Conclusion When choosing between `getElementById` and `querySelector`, developers should consider both performance and use case. If performance is critical and selection by ID is sufficient, `getElementById` is preferable. However, `querySelector` offers greater flexibility, allowing for more complex queries, which can be beneficial in many situations. Understanding these differences helps software engineers make informed decisions in their code.
Related benchmarks
getElementById vs querySelector
querySelector vs. getElementById Performance
getElementById vs querySelector vs getElementsByTagName pt. 2
getElementById vs querySelector, with two elements
Comments
Confirm delete:
Do you really want to delete benchmark?