Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
querySelectorAll vs. getElementsByClassName with forEach
(version: 0)
Comparing performance of:
querySelectorAll vs getElementsByClassName
Created:
7 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div class="test"></div>
Tests:
querySelectorAll
document.querySelectorAll(".test").forEach(x=>x.style.color='red')
getElementsByClassName
Array.from(document.getElementsByClassName(".test")).forEach(x=>x.style.color='red')
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:
one year ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:135.0) Gecko/20100101 Firefox/135.0
Browser/OS:
Firefox 135 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=584275" width="100%" height="500px"></iframe>
getElementsByClassName
6.8M/s
querySelectorAll
1.3M/s
View exact numbers
Test name
Executions per second
✓
getElementsByClassName
6,789,869 Ops/sec
querySelectorAll
1,308,928 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark and explain what is being tested. **Benchmark Overview** The MeasureThat.net benchmark compares two approaches for executing code on HTML elements: `querySelectorAll` and `getElementsByClassName`. Both methods are used to select multiple elements, but they differ in their syntax and behavior. **What is being tested?** In this specific benchmark, we have two test cases: 1. **querySelectorAll**: The first test case uses the `querySelectorAll` method to select all HTML elements with the class "test" and then executes a callback function on each element. 2. **getElementsByClassName**: The second test case uses the `getElementsByClassName` method to select all HTML elements with the class "test" and then executes a callback function on each element. **Options compared** The benchmark compares two options: 1. **querySelectorAll** * Syntax: `document.querySelectorAll('selector')` * Behavior: Returns a NodeList (a live HTML collection of elements) that represents the selected elements. 2. **getElementsByClassName** * Syntax: `document.getElementsByClassName('class')` * Behavior: Returns an HTMLCollection (a static collection of elements) that represents the selected elements. **Pros and Cons** Here are some pros and cons for each approach: **querySelectorAll** Pros: * More flexible syntax, allowing you to specify multiple selectors. * Returns a live NodeList, which can be iterated over using traditional for loops or modern methods like `forEach`. Cons: * May be slower than `getElementsByClassName` due to the extra processing required to parse the selector. * Can lead to performance issues if not used carefully (e.g., when dealing with very large collections). **getElementsByClassName** Pros: * Faster than `querySelectorAll`, especially for small collections, since it only needs to access the element's class list. * More straightforward syntax and behavior. Cons: * Less flexible syntax, as you can only specify a single class name. * Returns an HTMLCollection, which can be slower and less convenient to work with than a NodeList. **Other considerations** In modern JavaScript, `querySelectorAll` is generally preferred over `getElementsByClassName` due to its flexibility and performance. However, `getElementsByClassName` is still useful in certain situations, such as when working with older browsers that don't support `querySelectorAll`. **Library/Library purpose** None mentioned in the provided benchmark. **Special JS feature/syntax** None mentioned in the provided benchmark. Now, let's take a look at some alternative approaches: * **Element.prototype.matches**: Introduced in ECMAScript 2017 (ES2017), this method is similar to `querySelectorAll` but returns a boolean result instead of a NodeList. * **CSS selectors with `:has()`**: Another approach for selecting elements using CSS selectors, which can be faster and more flexible than `querySelectorAll`. * **DOM queries libraries like jQuery or React Query**: These libraries often provide optimized and efficient ways to query the DOM, but may introduce additional dependencies and learning curves. Keep in mind that this benchmark is focused on comparing two specific approaches within JavaScript, rather than exploring alternative methods or libraries.
Related benchmarks
querySelector() vs getElementsByClassName()[0]
getElementsByClassName()[0] vs querySelectorAll
[Fixed] querySelectorAll vs. getElementsByClassName
querySelector vs getElementsByClassName My
querySelector vs getElementsByClassName with proper utilization
Comments
Confirm delete:
Do you really want to delete benchmark?