Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
document.body.getElementsByClassName vs document.getElementsByClassName +
(version: 1)
Comparing performance of:
getElementsByClassName vs body.getElementsByClassName
Created:
one year 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:
getElementsByClassName
const classElm = document.getElementsByClassName('aap')[0];
body.getElementsByClassName
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
getElementsByClassName
body.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/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=585537" width="100%" height="500px"></iframe>
getElementsByClassName
8.8M/s
body.getElementsByClassName
7.2M/s
View exact numbers
Test name
Executions per second
✓
getElementsByClassName
8,804,723 Ops/sec
body.getElementsByClassName
7,221,052 Ops/sec
Autogenerated LLM Summary
(model
gpt-4o-mini
, generated one year ago):
The benchmark described in the provided JSON compares two methods for selecting DOM elements in JavaScript, specifically targeting the performance of `document.getElementsByClassName` and `document.body.getElementsByClassName`. It assesses which approach can retrieve elements with a specific class name more efficiently. ### Benchmarks: 1. **`getElementsByClassName`**: - **Code Example**: `const classElm = document.getElementsByClassName('aap')[0];` - **Description**: This function searches for elements with the class name 'aap' across the entire document. - **Execution Speed**: The latest benchmark results show that this approach has a performance of 8,804,723 executions per second. 2. **`body.getElementsByClassName`**: - **Code Example**: `const classElm = document.body.getElementsByClassName('aap')[0];` - **Description**: This function searches for elements with the class name 'aap', but only within the child nodes of the `<body>` element. - **Execution Speed**: The benchmark results indicate a performance of 7,221,052 executions per second for this method. ### Performance Comparison: - **Pros of `document.getElementsByClassName`**: - This method searches the entire document, which may be beneficial if elements are not contained strictly within the body. - Generally, it yields higher performance in this test case scenario. - **Cons of `document.getElementsByClassName`**: - It may incur additional processing time if the DOM is large, as it scans more nodes. - **Pros of `document.body.getElementsByClassName`**: - This method is potentially faster for documents where the relevant elements are guaranteed to be within the `<body>` tag since it limits its search to that part of the DOM. - **Cons of `document.body.getElementsByClassName`**: - If you need to select elements that may reside outside of the body (e.g., in header or footer sections), this approach will miss them. ### Considerations: - **DOM Structure**: The performance can vary depending on the complexity and size of the DOM. For very large pages, using `document.body.getElementsByClassName` might be preferable if it can be assured that all relevant elements are within the body. - **Context Specificity**: If the code is reused across different HTML documents or requires generality, `document.getElementsByClassName` may be more suitable. - **Browser Variability**: Testing was conducted in Chrome, and performance results might differ in other browsers due to differences in their JavaScript engines and DOM implementations. ### Alternatives: - Other methods for selecting elements include `document.querySelector` and `document.querySelectorAll`, which allow for more complex selectors using CSS syntax. These methods are more versatile but may not perform as well as `getElementsByClassName` when dealing strictly with class names. - Another alternative includes using third-party libraries like jQuery, which simplify element selection through a more consistent API but can add overhead to performance due to additional abstraction. In summary, the benchmark highlights the performance differences between two similar DOM querying methods. For performance-critical applications, understanding the context in which these methods are used is essential for choosing the most appropriate one.
Related benchmarks
document.body vs document.querySelector on element
document.body.getElementsByClassName vs document.getElementsByClassName
getElementById vs getElementsByClassName a
getElementById vs getElementsByClassName aasa
document.body vs document.querySelector vs document.getElementsByTagName speed test
Comments
Confirm delete:
Do you really want to delete benchmark?