Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
document.body.getElementsByClassName vs document.getElementsByClassName
(version: 0)
Comparing performance of:
querySelector vs Direct access
Created:
3 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<!DOCTYPE html> <html lang="ru"> <head> </head> <body> <div class="aap">AAP</div> </body> </html>
Tests:
querySelector
const classElm = document.getElementsByClassName('aap')[0];
Direct access
const classElm = document.body.getElementsByClassName('aap')[0];
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
querySelector
Direct access
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/109.0.0.0 Safari/537.36
Browser/OS:
Chrome 109 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=585535" width="100%" height="500px"></iframe>
querySelector
8.5M/s
Direct access
7.1M/s
View exact numbers
Test name
Executions per second
✓
querySelector
8,498,825 Ops/sec
Direct access
7,138,627 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down what's being tested in the provided JSON and explain the differences between the two test cases. **Overview of the benchmark** The goal of this benchmark is to compare the performance of two approaches for retrieving elements with a specific class using the `document` object: 1. `querySelector`: A method that returns a single element or null, based on a CSS selector. 2. Direct access: Using the `getElementsByClassName` method and indexing into the resulting array. **What is being tested?** The two test cases measure how long it takes to execute each approach. The benchmark is run in a simple HTML page with an `<div>` element containing the class `'aap'`. **Options compared** 1. **querySelector**: Uses a CSS selector to find the first matching element. * Pros: + More efficient and flexible than direct access, as it allows for more complex queries (e.g., selecting elements based on multiple classes). + Can be used with other DOM methods, such as `getElementsByClassName` or `querySelectorAll`. * Cons: + May have slower performance compared to direct access in simple cases. 2. **Direct access**: Uses the `getElementsByClassName` method and indexing into the resulting array. * Pros: + Often faster than `querySelector`, especially for simple class-based selectors. + No additional overhead from CSS selector parsing or parsing errors. * Cons: + Less flexible than `querySelector`, as it only allows retrieving elements by class alone. **Library and purpose** The `getElementsByClassName` method is a native DOM method that returns an array of elements matching the specified class. It's used in both test cases, but with different approaches to retrieval. **Special JavaScript feature or syntax** None mentioned. Both tests use standard JavaScript methods and do not rely on any special features or syntax. **Other alternatives** 1. **Using `document.querySelector` with a CSS selector**: This approach is similar to the first test case but uses `document.querySelector` instead of `const classElm = document.getElementsByClassName('aap')[0];`. 2. **Using `document.getElementById` with an ID attribute**: If you know the exact ID of the element, using `document.getElementById` might be faster than both of these approaches. 3. **Using a library or framework-specific method**: Some libraries (e.g., jQuery) provide optimized methods for retrieving elements based on class names or IDs. Keep in mind that the performance differences between these approaches will vary depending on the specific use case, browser, and version.
Related benchmarks
querySelector() vs getElementsByClassName()[0]
querySelectorAll versus getElementsByClassName
querySelector vs getElementsByClassName My
querySelector vs getElementsByClassName with proper utilization
Comments
Confirm delete:
Do you really want to delete benchmark?