Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
.getElementsByClassName() vs. .querySelectorAll()
(version: 0)
Show the performance impact of a live node list (.getElementsByClassName()) vs. a static node list (.querySelectorAll()).
Comparing performance of:
.getElementsByClassName() vs .querySelectorAll()
Created:
4 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div class="foo">test</div> <div class="bar">test</div> <div class="foo">test</div> <div class="bar">test</div> <div class="foo">test</div> <div class="bar">test</div> <div class="foo">test</div> <div class="bar">test</div> <div class="foo">test</div> <div class="bar">test</div>
Tests:
.getElementsByClassName()
Array.from(document.getElementsByClassName("foo")).forEach(item => {if(item.textContent === "test"){console.log("match")}});
.querySelectorAll()
document.querySelectorAll("foo").forEach(item => {if(item.textContent === "test"){console.log("match")}});
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
.getElementsByClassName()
.querySelectorAll()
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
8 months ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:140.0) Gecko/20100101 Firefox/140.0
Browser/OS:
Firefox 140 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=621089" width="100%" height="500px"></iframe>
.querySelectorAll()
2.3M/s
.getElementsByClassName()
53K/s
View exact numbers
Test name
Executions per second
✓
.querySelectorAll()
2,327,489 Ops/sec
.getElementsByClassName()
52,802 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the benchmark. The provided JSON represents a JavaScript microbenchmark test case on MeasureThat.net, titled ".getElementsByClassName() vs. .querySelectorAll()". This test compares the performance of two different approaches to retrieve elements from an HTML document: 1. **`getElementsByClassName()`**: This method returns a live HTMLCollection, which is an array-like object containing all elements that match the specified class name. 2. **`querySelectorAll()`**: This method also returns a NodeList (a static collection of nodes), which contains all elements that match the specified CSS selector. **Comparison:** The test case uses two individual scripts: 1. `Array.from(document.getElementsByClassName("foo")).forEach(...)`: This script uses `getElementsByClassName()` to retrieve an array of elements with class "foo" and then iterates through it using `forEach()`. 2. `document.querySelectorAll("foo").forEach(...)`: This script uses `querySelectorAll()` to retrieve a NodeList of elements that match the CSS selector "foo" and then iterates through it using `forEach()`. **Options compared:** The two options being compared are: * **Live node list (getElementsByClassName())**: The method returns a live collection of elements, which can lead to performance issues if not handled correctly. * **Static node list (querySelectorAll())**: The method returns a static collection of nodes, which is generally more efficient and reliable. **Pros and Cons:** * **`getElementsByClassName()`**: + Pros: - Can be useful when working with dynamic or changing class names. + Cons: - Returns a live collection, which can lead to unnecessary re-retrievals of the same elements on subsequent iterations. - May cause performance issues if not handled correctly (e.g., when iterating over the result set). * **`querySelectorAll()`**: + Pros: - Returns a static collection, which is generally more efficient and reliable. - Can be used with CSS selectors to retrieve multiple elements at once. **Library/Functionality:** In this test case, no external library or functionality is used. The `Array.from()` method is used to convert the HTMLCollection returned by `getElementsByClassName()` to an array-like object. **Special JS feature/Syntax:** The `forEach()` method is a standard JavaScript feature that iterates over an array-like object or an iterable. **Other alternatives:** If you were to optimize this benchmark, you could also consider using: * **`Element.matches()`**: A more modern way to check if an element matches a CSS selector. * **`Array.prototype.forEach.call()`**: An alternative way to iterate over the result set returned by `getElementsByClassName()`. * **Caching or memoization**: If the benchmark is run multiple times, caching or memoization could help reduce the overhead of repeated retrievals. Keep in mind that these alternatives may not provide a significant performance boost unless you're working with very large datasets or performance-critical code.
Related benchmarks
querySelector() vs getElementsByClassName()[0]
getElementsByClassName()[0] vs querySelectorAll
querySelector vs getElementsByClassName with proper utilization
Comments
Confirm delete:
Do you really want to delete benchmark?