Benchmark: querySelector vs getElementsByTagName

HTML Preparation code:

<div></div>

Tests:

querySelector
document.querySelector("div")
getElementsByTagName
document.getElementsByTagName("div")

Historical Performance Data aggregated from 15 community runs

Desktop Results:

Chrome 8 runs

getElementsByTagName

27.7M/s

querySelector

13.2M/s

Fastest: getElementsByTagName (2.1x faster)

View exact numbers

✓ getElementsByTagName: 27,737,306 ops/sec
• querySelector: 13,241,538 ops/sec

Firefox 7 runs

getElementsByTagName

10.9M/s

querySelector

5.6M/s

Fastest: getElementsByTagName (1.9x faster)

View exact numbers

✓ getElementsByTagName: 10,903,561 ops/sec
• querySelector: 5,610,828 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelector
getElementsByTagName

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 138 on Windows

View result in a separate tab

getElementsByTagName

28.3M/s

querySelector

11.5M/s

View exact numbers

Test name	Executions per second
✓ getElementsByTagName	28,310,722 Ops/sec
querySelector	11,515,023 Ops/sec

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

LLMs can make mistakes. Check important info.

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

**Benchmark Overview**

The benchmark compares two approaches to select an HTML element: `document.querySelector()` and `document.getElementsByTagName()`. The goal is to determine which method is faster.

**Comparison Options**

There are only two options compared:

1. **`document.querySelector()`**: This method uses a CSS selector to locate the desired element. It's generally considered more efficient than using `getElementsByTagName()` because it allows for more precise selection and reduces the number of elements that need to be checked.
2. **`document.getElementsByTagName()`**: This method returns a live HTMLCollection object containing all elements with the specified tag name. It's a more traditional approach to selecting elements but can be slower due to the overhead of checking each element in the collection.

**Pros and Cons**

* `document.querySelector()`:
	+ Pros: More efficient, precise selection, reduces number of checks.
	+ Cons: Can be slower for very large collections or if the CSS selector is complex.
* `document.getElementsByTagName()`:
	+ Pros: Traditional approach, works well for small to medium-sized collections.
	+ Cons: Can be slower due to checking each element in the collection.

**Library and Purpose**

There is no specific library used in this benchmark. However, it's worth noting that `querySelector` and `getElementsByTagName` are both part of the DOM (Document Object Model) API, which is a set of APIs for manipulating and interacting with HTML documents.

**Special JS Feature or Syntax**

There is no special JavaScript feature or syntax being tested in this benchmark. The focus is solely on comparing two different methods for selecting elements.

**Other Alternatives**

If you're looking for alternative approaches to selecting elements, here are a few options:

1. **`document.querySelectorAll()`**: This method returns an HTMLCollection object containing all matching elements. It's similar to `querySelector`, but it can match multiple elements if the CSS selector includes the `$` symbol.
2. **`CSSOM` APIs**: The CSSOM (CSS Object Model) API provides a set of methods for manipulating and interacting with CSS rules and stylesheets. Some examples include `CSSRule.getRules()`, `CSSStyleRule.style`, and `CSSStyleSheet.addRule()`.
3. **`QuerySelector` libraries**: There are several third-party libraries available that provide more advanced query selector capabilities, such as jQuery or Sizzle.

Keep in mind that these alternatives may have their own trade-offs and performance characteristics, so it's essential to evaluate them based on your specific use case and requirements.

querySelector vs getElementsByTagName (version: 0)

Comparing performance of: `querySelector vs getElementsByTagName`

Created: 4 years ago by: Registered User

Go to the latest result

querySelector

getElementsByTagName

Historical Performance Data aggregated from 15 community runs

Desktop Results:

Chrome 8 runs

Firefox 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

querySelector vs getElementsByTagName (version: 0)

Comparing performance of: querySelector vs getElementsByTagName

Created: 4 years ago by: Registered User

Go to the latest result

querySelector

getElementsByTagName

Historical Performance Data aggregated from 15 community runs

Desktop Results:

Chrome 8 runs

Firefox 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `querySelector vs getElementsByTagName`