Benchmark: querySelectorAll vs getElementsByTagName iteration star

HTML Preparation code:

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

Tests:

querySelectorAll
const allDivs = document.querySelectorAll('*'); allDivs.forEach(function (div) {});
getElementsByTagName
const allDivs = document.getElementsByTagName('*'); const arrayAllDivs = Array.from(allDivs); arrayAllDivs.forEach(function (div) {});

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelectorAll
getElementsByTagName

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 128 on Android

View result in a separate tab

Test name	Executions per second
querySelectorAll	312760.7 Ops/sec
getElementsByTagName	264892.7 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Explanation**

The provided benchmark measures the performance difference between two DOM querying methods in JavaScript: `querySelectorAll` and `getElementsByTagName`. Both methods are used to retrieve all elements that match a specific CSS selector.

**Options Compared**

The benchmark compares the following options:

1. **`querySelectorAll`**: This method returns a NodeList, which is an array-like object that allows you to access and manipulate elements by their index or through the `forEach` method.
2. **`getElementsByTagName`**: This method also returns a NodeList, but it's more limited in its capabilities compared to `querySelectorAll`. It only supports getting elements with a specific tag name.

**Pros and Cons**

* **`querySelectorAll`**:
	+ Pros: More flexible and powerful than `getElementsByTagName`, as it allows you to query elements based on any CSS selector (not just tag names).
	+ Cons: May be slower due to the complexity of the CSS selectors, especially if they're complex or involve a large number of elements.
* **`getElementsByTagName`**:
	+ Pros: Faster and more lightweight than `querySelectorAll`, as it's a simpler and more direct method for getting elements by tag name.
	+ Cons: Limited in its capabilities compared to `querySelectorAll`.

**Library and Purpose**

In the benchmark, no specific library is used. However, both methods rely on the Document Object Model (DOM) to interact with HTML documents.

**Special JS Feature or Syntax**

There are no special JavaScript features or syntaxes mentioned in this benchmark.

**Other Considerations**

When choosing between `querySelectorAll` and `getElementsByTagName`, consider the following:

* If you need to query elements based on a specific CSS selector, use `querySelectorAll`.
* If you only need to get elements by tag name, use `getElementsByTagName`.

**Alternatives**

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

* **`querySelector`**: This method returns an element that matches the specified CSS selector. It's similar to `querySelectorAll`, but it returns a single element instead of a NodeList.
* **`getElementsByClassName`**: This method returns a NodeList of elements with the specified class name.
* **`querySelectorAll` variants**: There are also variants like `querySelectorAll` with a specific argument (e.g., `querySelectorAll('*')`) that can be used to query elements in different ways.

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

Related benchmarks:

querySelectorAll vs getElementsByTagName iteration star (version: 0)

Comparing performance of: querySelectorAll vs getElementsByTagName

Created: one year ago by: Guest

Jump to the latest result

querySelectorAll

getElementsByTagName

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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