Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
querySelect
(version: 0)
Comparing performance of:
querySelector vs querySelectorAll
Created:
2 years ago
by:
Guest
Go to the latest result
Script Preparation code:
document.body.innerHTML = "<html><div>Hello World</div><div>second div</div><div>third div</div></html>";
Tests:
querySelector
document.querySelector("div")
querySelectorAll
document.querySelectorAll("div")
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
querySelector
querySelectorAll
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36
Browser/OS:
Chrome 120 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=507775" width="100%" height="500px"></iframe>
querySelector
5.6M/s
querySelectorAll
2.5M/s
View exact numbers
Test name
Executions per second
✓
querySelector
5,562,342 Ops/sec
querySelectorAll
2,461,399 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided JSON and explain what's being tested. **Benchmark Definition** The benchmark definition is a simple JavaScript expression that tests two different methods of selecting HTML elements: `document.querySelector` and `document.querySelectorAll`. The expressions are: 1. `document.querySelector("div")`: This method returns the first element in the DOM that matches the specified CSS selector (`"div"`). If no matching element is found, it returns `null`. 2. `document.querySelectorAll("div")`: This method returns a NodeList of all elements in the DOM that match the specified CSS selector (`"div"`). **Options Compared** The benchmark compares two options: 1. **Using `querySelector`**: This approach uses the `querySelector` method to select individual elements. It's faster for cases where only one element is expected. 2. **Using `querySelectorAll`**: This approach uses the `querySelectorAll` method to select multiple elements at once. It's slower for large datasets, but can be beneficial when dealing with a specific set of elements. **Pros and Cons** * **Using `querySelector`**: + Pros: Faster execution time, better suited for small datasets. + Cons: May not work as expected if the first element is not found (returns `null`), which can lead to unexpected behavior in subsequent code. * **Using `querySelectorAll`**: + Pros: More efficient when dealing with large datasets, returns a NodeList of all matching elements, and handles cases where no elements are found. + Cons: Slower execution time compared to `querySelector`, may require additional processing if multiple elements need to be accessed. **Library and Purpose** The `document` object is part of the DOM (Document Object Model), which represents the structure of an HTML document. The `querySelector` and `querySelectorAll` methods are built-in browser APIs that provide a convenient way to traverse and manipulate the DOM. **Special JS Features or Syntax** There are no special JavaScript features or syntax used in this benchmark. **Other Alternatives** If you need to select elements using alternative methods, consider: * Using CSS selectors: You can use CSS selectors like `div` or `.class`, which work similarly to `querySelector`. * Using `getElementsByClassName`: This method returns a collection of elements with the specified class name. * Using `getElementsByTagName`: This method returns an array of elements with the specified tag name. Keep in mind that each approach has its own trade-offs and may not always be the best choice for your specific use case.
Related benchmarks
querySelector on HTML tag vs. closest
Comments
Confirm delete:
Do you really want to delete benchmark?