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');

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: 2 days ago)

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

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
querySelector	13135624.0 Ops/sec
querySelector.body	13190358.0 Ops/sec
getElementsByClassName	16831302.0 Ops/sec
getElementsByClassName BODY	13542895.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months 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.

Related benchmarks:

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

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

Created: 3 years ago by: Registered User

Jump to the latest result

querySelector

querySelector.body

getElementsByClassName

getElementsByClassName BODY

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