Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
querySelectorAll vs getElementsByTagName iteration 22
(version: 0)
Comparing performance of:
querySelectorAll vs getElementsByTagName
Created:
2 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>
Tests:
querySelectorAll
const allDivs = document.querySelectorAll('div');
getElementsByTagName
const allDivs = document.getElementsByTagName('div');
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
querySelectorAll
getElementsByTagName
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Mobile Safari/537.36
Browser/OS:
Chrome Mobile 131 on Android
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=577924" width="100%" height="500px"></iframe>
getElementsByTagName
11.0M/s
querySelectorAll
1.0M/s
View exact numbers
Test name
Executions per second
✓
getElementsByTagName
11,027,968 Ops/sec
querySelectorAll
1,013,934 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the explanation. **What is being tested?** MeasureThat.net tests two ways to retrieve all HTML elements of a specific type (`div` in this case): `getElementsByTagName()` and `querySelectorAll()`. The benchmark compares their performance, specifically the number of executions per second on a desktop device with Windows 10 operating system and Chrome 125 browser. **Options compared:** 1. **getElementsByTagName()**: This method uses the `getElementsByName()` function to retrieve all elements with the specified name (in this case, `div`). It is a legacy method that was widely used in older versions of HTML. 2. **querySelectorAll()**: This method uses CSS selectors to select all elements matching the specified selector (in this case, `div`). It is a more modern and flexible way of selecting elements. **Pros and Cons:** 1. **getElementsByTagName():** * Pros: + Widely supported by older browsers. + Simple to use for simple scenarios. * Cons: + Not as efficient as `querySelectorAll()` and can be slower for larger datasets. + Less flexible, as it only works with the `name` attribute. 2. **querySelectorAll():** * Pros: + More efficient and faster than `getElementsByTagName()`. + More flexible, as it uses CSS selectors to select elements, making it easier to target specific elements. * Cons: + Requires support for CSS selectors, which can be a limitation in older browsers. **Library/Libraries:** There are no libraries explicitly mentioned in the benchmark, but `querySelectorAll()` relies on the W3C Standard (CSS Selectors 2) and is implemented natively by most modern browsers. However, if you're using an older browser that doesn't support CSS selectors, you might need to use a library like jQuery or another polyfill. **Special JS feature/Syntax:** There are no special JavaScript features or syntax mentioned in this benchmark. **Alternatives:** If you want to measure the performance of other methods for retrieving HTML elements, you can try: * `querySelector()` (similar to `querySelectorAll()`, but only matches one element) * `getElementsByClassName()` (retrieves all elements with a specific class name) * `getElementsById()` (retrieves an element by its ID) Keep in mind that the performance of these methods may vary depending on the browser, device, and use case.
Related benchmarks
querySelector() vs getElementsByClassName()[0]
getElementsByClassName()[0] vs querySelectorAll
querySelector vs getElementsByTagName
querySelector vs getElementByTagName
Comments
Confirm delete:
Do you really want to delete benchmark?