Benchmark: document.querySelector vs document.body.querySelector vs getElementsByClassName

HTML Preparation code:

<div class="testElement"></div>

Tests:

querySelector
var el = document.querySelector('.testElement');
querySelector.body
var el = document.body.querySelector('.testElement');
getElementsByClassName
var el = document.getElementsByClassName('testElement');
getElementsByClassName BODY
var el = document.body.getElementsByClassName('testElement');

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

getElementsByClassName

11.2M/s

querySelector.body

9.6M/s

getElementsByClassName BODY

9.5M/s

querySelector

9.3M/s

Fastest: getElementsByClassName (1.2x faster)

View exact numbers

✓ getElementsByClassName: 11,188,714 ops/sec
• querySelector.body: 9,628,817 ops/sec
• getElementsByClassName BODY: 9,457,921 ops/sec
• querySelector: 9,303,471 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
querySelector.body
getElementsByClassName
getElementsByClassName BODY

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/135.0.0.0 Safari/537.36 Edg/135.0.0.0

Browser/OS: Chrome 135 on Windows

View result in a separate tab

getElementsByClassName

18.5M/s

querySelector.body

15.3M/s

getElementsByClassName BODY

14.6M/s

querySelector

13.6M/s

View exact numbers

Test name	Executions per second
✓ getElementsByClassName	18,459,414 Ops/sec
querySelector.body	15,292,803 Ops/sec
getElementsByClassName BODY	14,552,429 Ops/sec
querySelector	13,568,767 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark is designed to compare the performance of three different methods for selecting elements in an HTML document:

1. `document.querySelector`
2. `document.body.querySelector`
3. `getElementsByClassName`

These methods are used to retrieve elements that match a specific CSS selector.

**Options Compared**

The following options are compared:

* `querySelector`: This method is used to select an element by its class, id, or tag name.
* `querySelector.body`: This variant of the `querySelector` method is used to select an element from the document body, effectively ignoring elements that may be contained within other HTML elements.
* `getElementsByClassName`: This method returns a live HTMLCollection (an array-like object) containing all elements with the specified class.

**Pros and Cons**

Here are some pros and cons of each option:

* `querySelector`:
	+ Pros: Fast and efficient, can be used to select elements by multiple criteria.
	+ Cons: May not work as expected if the selector is ambiguous or incorrect.
* `querySelector.body`:
	+ Pros: Forces the method to only search within the document body, which can improve performance for large documents.
	+ Cons: May lead to unnecessary searches and slower execution times if elements are contained within other HTML elements.
* `getElementsByClassName`:
	+ Pros: Allows for more fine-grained control over element selection, as it returns all elements with a specific class.
	+ Cons: Can be slow and inefficient for large documents or complex selectors.

**Library Usage**

None of the provided test cases use any external libraries. The standard JavaScript DOM API is used to implement each method.

**Special JS Features/Syntax**

The benchmark uses the `getElementsByClassName` method, which requires the use of a special syntax in older versions of Internet Explorer (IE). For IE8 and below, the method must be called with the `arguments` object as the second argument, like this: `document.getElementsByClassName('testElement', null)`. This is not necessary for most modern browsers.

**Alternative Approaches**

Other approaches to selecting elements include:

* Using CSS selectors in conjunction with the `getElementsByTagName()` method.
* Utilizing the `querySelectorAll()` method, which returns a NodeList (an array-like object) containing all elements that match the specified selector.
* Implementing custom element selection logic using JavaScript, such as by iterating over the document's children or traversing the DOM tree.

These alternative approaches may offer different performance characteristics or use cases compared to the methods tested in this benchmark.

document.querySelector vs document.body.querySelector vs getElementsByClassName (version: 0) Benchmark.js

Comparing performance of: `querySelector vs querySelector.body vs getElementsByClassName vs getElementsByClassName BODY`

Created: 5 years ago by: Registered User

Go to the latest result

querySelector

querySelector.body

getElementsByClassName

getElementsByClassName BODY

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

document.querySelector vs document.body.querySelector vs getElementsByClassName (version: 0) Benchmark.js

Comparing performance of: querySelector vs querySelector.body vs getElementsByClassName vs getElementsByClassName BODY

Created: 5 years ago by: Registered User

Go to the latest result

querySelector

querySelector.body

getElementsByClassName

getElementsByClassName BODY

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 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 querySelector.body vs getElementsByClassName vs getElementsByClassName BODY`