Benchmark: querySelector vs getElementById

HTML Preparation code:

<html>
  <body>
    <div class="foo" id="test2"></div>
    <div class="foo2" id="test"></div>
  </body>
</html>

Tests:

querySelector
document.querySelector(".foo");
getElementsByClassName
document.getElementsByClassName('foo');

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: 8 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.79 Safari/537.36 Edge/14.14393

Browser/OS: Chrome 51 on Windows

View result in a separate tab

Test name	Executions per second
querySelector	145677.2 Ops/sec
getElementsByClassName	3247940.5 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.

**What is tested?**

The benchmark compares two DOM query methods: `querySelector` and `getElementsByClassName`. The test case uses HTML elements with both class attributes (e.g., `.foo`) and IDs (e.g., `test2`, `test`). The goal is to measure the performance of these methods in retrieving elements from the document.

**Options compared**

Two options are compared:

1. **`querySelector`**: This method is a part of the DOM Standard (ECMAScript 5) and allows selecting elements based on their class name, tag name, ID, or attribute values.
2. **`getElementsByClassName`**: This method is also part of the DOM Standard (ECMAScript 4) and retrieves all elements with a specified class name.

**Pros and cons**

* `querySelector`:
	+ Pros: more flexible and powerful, can be used to select multiple elements based on different criteria.
	+ Cons: might have higher overhead due to its flexibility, as it needs to parse the CSS selector string.
* `getElementsByClassName`:
	+ Pros: simpler and faster, as it only retrieves elements with a specific class name.
	+ Cons: less flexible, as it cannot be used to select multiple elements based on different criteria.

**Library**

In this benchmark, none of the libraries are explicitly mentioned. However, the use of `querySelector` suggests that the browser supports ECMAScript 5 and its DOM Standard.

**Special JS feature or syntax**

The test case uses a CSS selector string in the `querySelector` method (e.g., `"document.querySelector(".foo")"`). This is a feature introduced in ECMAScript 5, allowing JavaScript to use CSS-like selectors for DOM querying. The `getElementsByClassName` method also relies on this feature.

**Other alternatives**

If you want to test alternative methods for selecting elements, you could consider the following:

* **`getElementsByTagName`**: Retrieves all elements with a specified tag name (e.g., `"document.getElementsByTagName('div')"`).
* **`querySelectorAll`**: Similar to `querySelector`, but returns an HTMLCollection that contains all matching elements.

Related benchmarks:

querySelector vs getElementById (version: 0)

Test the performance of the default Javascript querySelector vs the getElementById method.

Comparing performance of: querySelector vs getElementsByClassName

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