Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
querySelector vs getElementsByClassName with multiple elements
(version: 0)
Comparing performance of:
querySelector vs getElementsByClassName
Created:
3 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div class="test"></div> <div class="test2"></div> <div class="test3"></div> <div class="test4"></div> <div class="test5"></div> <div class="test6"></div> <div class="test7"></div>
Tests:
querySelector
document.querySelector(".test")
getElementsByClassName
document.getElementsByClassName(".test")
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
querySelector
getElementsByClassName
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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36
Browser/OS:
Chrome 141 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=619460" width="100%" height="500px"></iframe>
getElementsByClassName
17.5M/s
querySelector
13.9M/s
View exact numbers
Test name
Executions per second
✓
getElementsByClassName
17,454,082 Ops/sec
querySelector
13,855,824 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the explanation of the provided benchmark. **What is being tested?** The benchmark measures the performance difference between two JavaScript methods: 1. `document.querySelector()` (also known as "CSS selector" or "query by class") 2. `document.getElementsByClassName()` These methods are used to select elements from a DOM document based on their class name, attribute value, or pseudo-class. **Options being compared** The benchmark compares the performance of both methods when applied to a large number of elements with different class names (`test1`, `test2`, ..., `test7`). **Pros and Cons of each approach:** 1. **querySelector()** * Pros: + More efficient, as it only returns the first matching element. + Less memory-intensive, as it doesn't create a NodeList or HTMLCollection. * Cons: + May be slower for some browsers, especially older ones, due to its more complex parsing algorithm. + Can be less reliable in certain cases (e.g., when using pseudo-classes like `:hover`). 2. **getElementsByClassName()** * Pros: + Generally faster and more reliable than querySelector(), as it's a simpler algorithm. + Can return all matching elements, not just the first one. * Cons: + More memory-intensive, as it creates a NodeList or HTMLCollection with all matching elements. + Returns an array-like object, which can be slower for certain operations. **Library usage** There is no library explicitly mentioned in the benchmark. However, `document` and its methods (`querySelector`, `getElementsByClassName`) are part of the DOM (Document Object Model) API, which is a built-in JavaScript API. **Special JS features or syntax** None mentioned in this specific benchmark. **Other considerations** The benchmark uses a simple HTML document with multiple elements having different class names. The script preparation code and HTML preparation code are minimal, ensuring that only the query methods are being tested. **Alternative approaches** Other options for selecting elements from the DOM include: * `document.querySelectorAll()` (a more efficient alternative to `getElementsByClassName`) * `Element.prototype.matches()` or `Element.prototype.contains()` * Regular expressions (`/element selector/`) Keep in mind that each approach has its strengths and weaknesses, and performance differences may vary depending on specific use cases, browser versions, and other factors.
Related benchmarks
querySelector() vs getElementsByClassName()[0]
getElementsByClassName()[0] vs querySelectorAll
querySelector vs getElementsByClassName [0] with extra
querySelector vs getElementsByClassName My
querySelector vs getElementsByClassName on multiple elements
Comments
Confirm delete:
Do you really want to delete benchmark?