Benchmark: querySelectorAll vs getElementsByClassName Test

HTML Preparation code:

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

Tests:

querySelector
document.querySelectorAll(".test")
getElementsByClassName
document.getElementsByClassName(".test")

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelector
getElementsByClassName

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36

Browser/OS: Chrome 89 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
querySelector	1183636.2 Ops/sec
getElementsByClassName	3980943.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**What is tested?**

The provided JSON represents a benchmark test that compares two methods for selecting elements in HTML documents:

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

These methods are used to retrieve all elements with a specific class attribute.

**Options compared**

The two options being compared are:

* `querySelectorAll` (also known as `querySelectorAll()`): returns a live HTMLCollection of all matching elements.
* `getElementsByClassName` (also known as `getElementsByClassName(string)`): returns a live HTMLCollection of all elements with the specified class name.

**Pros and Cons**

* **`document.querySelectorAll(".test")`:**
	+ Pros:
		- More flexible, as it can select multiple classes using spaces-separated class names.
		- Less DOM queries, which can improve performance.
	+ Cons:
		- May not be supported in older browsers or Internet Explorer.
		- Returns a live collection of elements, which can cause issues if the elements are modified dynamically.
* **`document.getElementsByClassName(".test")`:**
	+ Pros:
		- Wide browser support, including older versions of Internet Explorer and Safari.
		- Can be used to get a specific element by its index in the collection.
	+ Cons:
		- Less flexible than `querySelectorAll`, as it only supports single class names.
		- Performs multiple DOM queries, which can slow down performance.

**Library usage**

None of the test cases use any external libraries. The code is self-contained and uses only the built-in JavaScript DOM API.

**Special JS feature or syntax**

There are no special JavaScript features or syntax used in this benchmark.

**Benchmark preparation code**

The provided HTML preparation code creates a simple HTML document with multiple elements having the class "test". This allows the test cases to accurately measure the performance of each method.

**Alternative approaches**

Other alternatives for selecting elements include:

* `document.querySelector(".test")`: similar to `querySelectorAll`, but returns only the first matching element.
* `document.querySelectorAll("div.test")`: selects elements with a specific tag name and class.
* `Element.prototype.matches()`: a newer API introduced in ECMAScript 2017 (ES2017), which provides more powerful selectors.

These alternative approaches may offer different performance characteristics, depending on the use case and browser support.

Related benchmarks:

querySelectorAll vs getElementsByClassName Test (version: 0)

Comparing performance of: querySelector vs getElementsByClassName

Created: 3 years ago by: Guest

Jump to the latest result

querySelector

getElementsByClassName

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):