Benchmark: getElementsByClassName VS querySelectorAll (simple comparison)

HTML Preparation code:

<div class="example container"></div>
<div class="example container"></div>
<div class="example container"></div>
<div class="example container"></div>
<div class="example container"></div>
<div class="example container"></div>
<div class="example container"></div>
<div class="example container"></div>
<div class="example container"></div>
<div class="example container"></div>

Tests:

The method getElementsByClassName()
document.getElementById("example container");
The method querySelectorAll()
document.querySelectorAll(".example.container");

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
The method getElementsByClassName()
The method querySelectorAll()

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.2 Safari/605.1.15

Browser/OS: Safari 26 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
The method getElementsByClassName()	68163384.0 Ops/sec
The method querySelectorAll()	3318920.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 the provided benchmark and explain what's being tested, compared, and their pros and cons.

**What is being tested?**

Two methods are being compared:

1. `document.getElementById("example container");`
2. `document.querySelectorAll(".example.container");`

The test case aims to measure the performance difference between these two methods when used in a simple scenario with multiple elements having the same class name ("example container").

**Options compared:**

The two options being compared are:

A) Using `document.getElementById()` with a string argument (in this case, `"example container"`).

B) Using `document.querySelectorAll()` with a CSS selector argument (in this case, `".example.container"`).

**Pros and Cons of each approach:**

1. **`document.getElementById()`**
	* Pros:
		+ Faster and more accurate when the element is guaranteed to exist.
		+ Easy to use for simple cases.
	* Cons:
		+ Can be slower when dealing with multiple elements or a large number of DOM elements.
		+ May not work as expected if the element has multiple matching IDs (e.g., `div id="example container" class="container"`).
2. **`document.querySelectorAll()`**
	* Pros:
		+ Faster and more efficient when dealing with multiple elements or a large number of DOM elements.
		+ Allows for more flexible searching using CSS selectors.
	* Cons:
		+ May be slower than `document.getElementById()` in simple cases where only one element is expected to match the selector.
		+ Can return an array of all matching elements, which might not be desirable if only one element is needed.

**Library usage:**

In this benchmark, none of the libraries are explicitly mentioned. However, it's worth noting that `document.getElementById()` and `document.querySelectorAll()` rely on the Document Object Model (DOM) API, which is a built-in part of JavaScript.

**Special JS feature or syntax:**

None of the test cases use any special JavaScript features or syntax. The focus is solely on comparing the performance of two DOM manipulation methods.

**Other alternatives:**

If you need to compare other DOM manipulation methods or alternative approaches, here are some common ones:

1. Using `document.querySelector()` instead of `document.getElementById()`.
2. Comparing `getElementsByClassName()` with `querySelectorAll()` for elements without IDs.
3. Testing the performance of using `querySelectorAll()` with a more complex CSS selector.
4. Measuring the performance of using `Element.prototype.matches()` (or `Element.prototype.contains()`) instead of `querySelectorAll()`.

Keep in mind that each alternative has its own set of pros and cons, which are similar to those mentioned for `document.getElementById()` and `document.querySelectorAll()`.

Related benchmarks:

getElementsByClassName VS querySelectorAll (simple comparison) (version: 0)

A simple comparison of performance between these two methods. (Medium, @benlmsc)

Comparing performance of: The method getElementsByClassName() vs The method querySelectorAll()

Created: 4 years ago by: Registered User

Jump to the latest result

The method getElementsByClassName()

The method querySelectorAll()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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