Benchmark: querySelector vs querySelectorAll vs getElementsByClassName vs querySelector (ID) vs getElementsByID

HTML Preparation code:

<div class="test" id="test"></div>

Tests:

querySelector
document.querySelector(".test")
querySelectorAll
document.querySelectorAll(".test")
getElementsByClassName
document.getElementsByClassName(".test")
querySelector (ID)
document.querySelector("#test")
getElementsByID
document.getElementById("test")

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelector
querySelectorAll
getElementsByClassName
querySelector (ID)
getElementsByID

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_7 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) FxiOS/150.2 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 18 on iOS 18.7

View result in a separate tab

Test name	Executions per second
querySelector	6915583.5 Ops/sec
querySelectorAll	12300235.0 Ops/sec
getElementsByClassName	27848156.0 Ops/sec
querySelector (ID)	5418522.0 Ops/sec
getElementsByID	43578904.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down what is being tested in this benchmark.

The test cases are designed to compare the performance of different methods for selecting elements from an HTML document:

1. `document.querySelector('.test')`: This method selects the first element with the class `test` that matches the specified selector. It returns a single element.
2. `document.querySelectorAll('.test')`: This method selects all elements with the class `test` that match the specified selector. It returns an HTMLCollection of multiple elements.
3. `document.getElementsByClassName('test')`: This method selects all elements with the class `test`. Note that this method does not consider the `id` attribute, unlike `querySelector`.
4. `document.querySelector('#test')`: This method selects the first element with the ID `test` that matches the specified selector.
5. `document.getElementById('test')`: This method selects the element with the ID `test`. Unlike `getElementsByClassName`, it only returns a single element.

Now, let's discuss the pros and cons of each approach:

* **querySelector** (and **querySelectorAll**) are generally faster and more efficient because they use the browser's DOM query engine. They also support more advanced selectors, such as attribute-based selectors and pseudo-classes.
* **getElementsByClassName** is slower than `querySelector` because it has to iterate over all elements with the specified class. However, it can be useful when you need to select multiple elements based on their class.
* **getElementsByID** is slower than `querySelector` because it has to iterate over all elements with the specified ID. It's mainly used for compatibility reasons or when you need to select an element by its ID only.

It's worth noting that the performance difference between these methods can be significant, especially when dealing with large datasets.

As for libraries, none are explicitly mentioned in this benchmark.

The test cases do not use any special JavaScript features or syntax. However, it's always a good idea to consider factors like code organization, maintainability, and scalability when writing benchmarks.

Other alternatives to these methods include:

* Using `document.querySelectorAll('*')` to select all elements on the page, but this can be slower because it returns an HTMLCollection of all elements.
* Using a library like jQuery or vanilla JavaScript's `Array.prototype.filter()` method to implement your own selector functionality.

Related benchmarks:

querySelector vs querySelectorAll vs getElementsByClassName vs querySelector (ID) vs getElementsByID (version: 0)

Comparing performance of: querySelector vs querySelectorAll vs getElementsByClassName vs querySelector (ID) vs getElementsByID

Created: 7 years ago by: Guest

Jump to the latest result

querySelector

querySelectorAll

getElementsByClassName

querySelector (ID)

getElementsByID

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):