Benchmark: querySelectorAll versus getElementsByClassName

HTML Preparation code:

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

Tests:

querySelectorAll
document.querySelectorAll('.test').length;
getElementsByClassName
[...document.getElementsByClassName('test')].length;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelectorAll
getElementsByClassName

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 143 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
querySelectorAll	11741061.0 Ops/sec
getElementsByClassName	5513700.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 considered.

**What is being tested?**

The benchmark compares two JavaScript methods for selecting elements from an HTML document:

1. `document.querySelectorAll('.test').length`
2. `[...document.getElementsByClassName('test')].length`

Both methods aim to retrieve a list of elements with the class `test` and return their length.

**Options compared**

Two options are being compared:

A) `querySelectorAll`: This method uses CSS selectors to select elements. It returns a NodeList, which is an implementation of the `NodeList` interface. The length property of this NodeList represents the number of elements found.

B) `getElementsByClassName`: This method takes a class name as an argument and returns a NodeList containing all elements with that class name. Again, the length property of this NodeList represents the number of elements found.

**Pros and cons**

Both methods have their trade-offs:

A) `querySelectorAll`:

Pros:

* Faster (typically 10-30% faster than `getElementsByClassName`) due to its use of CSS selectors, which can be optimized by the browser.
* Can handle more complex selector expressions, making it a popular choice for modern web development.

Cons:

* May not work as expected with older browsers or those that don't support CSS selectors (e.g., Internet Explorer 8 and earlier).
* Can return non-element nodes if the CSS selector matches a pseudo-class or attribute.

B) `getElementsByClassName`:

Pros:

* More forgiving when it comes to invalid class names, as it will still return elements with an empty string value.
* Works on older browsers that don't support CSS selectors.

Cons:

* Generally slower than `querySelectorAll`, especially for large sets of elements.

**Special considerations**

In this benchmark, there's no special JavaScript feature or syntax being used. Both methods are standard and widely supported.

**Other alternatives**

If you're looking for alternative ways to select elements in JavaScript, consider the following:

1. `querySelector`: Similar to `querySelectorAll`, but returns only one element instead of a NodeList.
2. `element.match()` (for CSS selectors with regular expressions): Returns an array of matches or null if no match is found.
3. `document.getElementById()`: Returns a single HTML element by its ID attribute.

Keep in mind that each method has its own trade-offs and use cases, so choose the one that best fits your project's requirements.

Related benchmarks:

querySelectorAll versus getElementsByClassName (version: 3)

Comparing performance of: querySelectorAll vs getElementsByClassName

Created: 5 years ago by: Registered User

Jump to the latest result

querySelectorAll

getElementsByClassName

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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