Benchmark: JS getElementsByClassName vs querySelectorAll

HTML Preparation code:

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

Tests:

getElementsByClassName
document.getElementsByClassName('test');
querySelectorAll
document.querySelectorAll('.test');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getElementsByClassName
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/101.0.4951.54 Safari/537.36

Browser/OS: Chrome 101 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
getElementsByClassName	2696336.8 Ops/sec
querySelectorAll	1226101.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**What is being tested?**

The test compares two approaches to select elements in an HTML document:

1. `document.getElementsByClassName('test')`
2. `document.querySelectorAll('.test')`

Both methods are used to retrieve a list of elements with a specific class attribute, in this case, `'test'`.

**Options compared:**

There are two options being compared:

* **Method 1:** `getElementsByClassName`
	+ This method returns an array-like object containing all elements that have the specified class name.
	+ The elements are cached by the browser to improve performance on subsequent requests with the same class name.
* **Method 2:** `querySelectorAll`
	+ This method returns a NodeList of all elements that match the specified CSS selector (in this case, `.test`).
	+ Unlike `getElementsByClassName`, `querySelectorAll` does not cache the results.

**Pros and Cons:**

* **getElementsByClassName**
	+ Pros:
		- Works in older browsers that don't support `querySelectorAll`.
		- Can be more efficient for simple class-based selectors.
	+ Cons:
		- Returns an array-like object, which can be slower to iterate over than a NodeList.
		- Does not cache results if called multiple times with the same class name.
* **querySelectorAll**
	+ Pros:
		- Returns a NodeList, which is faster to iterate over than an array-like object.
		- Caches results for repeated calls with the same CSS selector.
	+ Cons:
		- Works only in modern browsers that support CSS selectors.
		- May be slower for complex class-based selectors.

**Library usage:**

Neither `getElementsByClassName` nor `querySelectorAll` uses a specific library. However, if we look at the HTML preparation code, `<div class="test"></div>`, it's using a CSS class attribute to specify the selector. This is a built-in feature of HTML and CSS, not a library.

**Special JS features or syntax:**

There are no special JavaScript features or syntax being tested in this benchmark. Both methods use standard DOM APIs.

**Other alternatives:**

For more complex scenarios, other methods may be used:

* **`document.querySelector()`**: This method is similar to `querySelectorAll`, but it only returns the first element that matches the selector.
* **`document.querySelectorAll('*')`**: This method returns a NodeList of all elements in the document, regardless of class name or CSS selector.

In summary, this benchmark compares two common DOM methods for selecting elements based on their class attribute: `getElementsByClassName` and `querySelectorAll`. The results can help developers understand the performance differences between these approaches in different browsers.

Related benchmarks:

JS getElementsByClassName vs querySelectorAll (version: 0)

Comparing performance of: getElementsByClassName vs querySelectorAll

Created: 2 years ago by: Guest

Jump to the latest result

getElementsByClassName

querySelectorAll

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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