Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
document.querySelectorAll vs document.body.querySelectorAll
(version: 0)
Comparing performance of:
querySelectorAll vs getElementsByClassName
Created:
8 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div class="test"></div>
Tests:
querySelectorAll
document.querySelectorAll(".test")
getElementsByClassName
document.body.querySelectorAll(".test")
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
querySelectorAll
getElementsByClassName
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
9 months ago
)
User agent:
Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/28.0 Chrome/130.0.0.0 Mobile Safari/537.36
Browser/OS:
Chrome Mobile 130 on Android
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=619072" width="100%" height="500px"></iframe>
getElementsByClassName
4.4M/s
querySelectorAll
4.2M/s
View exact numbers
Test name
Executions per second
✓
getElementsByClassName
4,372,536 Ops/sec
querySelectorAll
4,209,719 Ops/sec
Autogenerated LLM Summary
(model
gemma2:9b
, generated one year ago):
This benchmark compares two ways to select HTML elements: `document.querySelectorAll` and `document.body.querySelectorAll`. **Options Compared:** * **`document.querySelectorAll(".test")`**: This selects all elements with the class "test" anywhere within the entire HTML document. It's a more general approach. * **`document.body.querySelectorAll(".test")`**: This selects all elements with the class "test" specifically within the `<body>` element of the HTML document. It's more specific to the body content. **Pros and Cons:** * **`querySelectorAll`**: * **Pro**: More flexible, can select elements anywhere in the document. * **Con**: Potentially slower if you only need elements within a specific section (like the `<body>`). It has to search the entire document tree. * **`getElementsByClassName`**: * **Pro**: Faster when selecting elements limited to the `<body>`, as it avoids unnecessary searching outside of that scope. * **Con**: Less flexible, only works within the specified element (in this case, `document.body`). **Other Considerations:** * **Specificity:** If your use case is very specific to the `<body>` content, `getElementsByClassName` might be a better choice for performance. However, if you need to select elements across various parts of your document, `querySelectorAll` provides more flexibility. * **Document Structure:** Consider how your HTML is structured. If elements with the "test" class are consistently within the `<body>`, then using `getElementsByClassName` would be a logical choice. **Alternatives:** * **CSS Selectors:** You could use CSS selectors within JavaScript to target specific elements, achieving similar results to both methods. * **Element IDs:** If you have unique identifiers for the elements you need, using `document.getElementById` is generally the most efficient approach. Let me know if you have any more questions!
Related benchmarks
getElementsByClassName()[0] vs querySelectorAll
Comments
Confirm delete:
Do you really want to delete benchmark?