Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
querySelectorAll vs getElementsByTagName iteration with for
(version: 0)
Comparing performance of:
querySelectorAll vs getElementsByTagName
Created:
3 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 = Array.from(document.querySelectorAll('div')); for (const div of allDivs){}
getElementsByTagName
const allDivs = document.getElementsByTagName('div'); for (const div of allDivs){}
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:
9 months ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:145.0) Gecko/20100101 Firefox/145.0
Browser/OS:
Firefox 145 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=619788" width="100%" height="500px"></iframe>
getElementsByTagName
1.9M/s
querySelectorAll
1.0M/s
View exact numbers
Test name
Executions per second
✓
getElementsByTagName
1,866,385 Ops/sec
querySelectorAll
1,006,355 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmarking scenario. **Overview** The goal of this benchmark is to compare the performance of two methods for retrieving all `<div>` elements in an HTML document: `document.querySelectorAll('div')` (querySelectorAll) and `document.getElementsByTagName('div')`. The tests are designed to measure which method executes faster, with a focus on iteration using a `for` loop. **Options Compared** The benchmark compares the following two options: 1. **querySelectorAll**: This method returns an HTMLCollection of elements that match the specified CSS selector. It's a more modern and efficient way to select elements in JavaScript. 2. **getElementsByTagName**: This method returns a collection of all elements with the specified tag name. **Pros and Cons** - **querySelectorAll** - Pros: * More flexible than `getElementsByTagName` since it can use a CSS selector, allowing for more complex selections (e.g., `document.querySelectorAll('div > span')`). * Faster execution performance compared to `getElementsByTagName`, especially for large datasets. - Cons: * Requires the HTMLCollection API, which is being deprecated in favor of the newer DOMStringList and HTMLIterable APIs. * May be slower than `getElementsByTagName` when dealing with very specific or simple selectors (though this difference should be negligible for most use cases). - **getElementsByTagName** - Pros: * Well-supported by older browsers and versions. - Easier to implement complex selections using a loop and checking the element's tag name directly. - Cons: * Less flexible than `querySelectorAll`, requiring manual iteration through the collection or relying on deprecated APIs. **Library/Functionality Used** In both cases, we're relying on native JavaScript methods for DOM manipulation. No external libraries are required. **Special JS Feature/Syntax (if applicable)** None of these benchmark tests rely on special JavaScript features or syntax beyond basic iteration using a `for` loop and support for the HTMLCollection API in older browsers. Modern JavaScript engines generally optimize performance for such fundamental operations. **Other Alternatives** For more complex DOM queries, you might consider using modern JavaScript APIs like: - **QuerySelector**: Offers more advanced selector capabilities compared to `querySelectorAll`. - **DOM Traversal Methods**: Methods like `document.querySelectorAll()` and `document.getElementById()`, in combination with iteration methods (e.g., `forEach`), for selecting elements based on specific criteria or attributes. - **Template Literals** or **String Interpolation**: Useful for constructing complex CSS selectors by dynamically concatenating parts of a selector string. For performance comparisons, you might also explore the use of: - **Benchmarking Libraries**: Tools like Benchmark.js or the new `console.time` API, designed to provide precise timing measurements. - **JavaScript Performance Tools and APIs**: Built-in tools like V8's JavaScript Profiler (for Chrome) or Firefox Developer Tools for profiling performance-intensive scripts. Keep in mind that the effectiveness of these alternatives might depend on your specific use case and environment.
Related benchmarks
querySelector() vs getElementsByClassName()[0]
querySelector vs getElementsByTagName
querySelector vs getElementByTagName
Comments
Confirm delete:
Do you really want to delete benchmark?