Benchmark: document.getElementsByClassname vs document.querySelector

HTML Preparation code:

<div class="test">Test</div>

Tests:

Query by class
var test = document.getElementsByClassName('test'); test.innerHTML;
QuerySelector
var test = document.querySelector('.test'); test.innerHTML;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Query by class
QuerySelector

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.85 Safari/537.36

Browser/OS: Chrome 90 on Mac OS X 10.13.6

View result in a separate tab

Test name	Executions per second
Query by class	2419900.5 Ops/sec
QuerySelector	2629698.8 Ops/sec

Autogenerated LLM Summary (model gemma2:9b, generated 2 months ago):

LLMs can make mistakes. Check important info.

This benchmark tests the performance of two methods for selecting HTML elements in JavaScript: `document.getElementsByClassName()` and `document.querySelector()`.

**Options Compared:**

* **`document.getElementsByClassName('test')`**: This method returns a live HTMLCollection of all elements with the class "test". It can be slow for large sets of elements because it iterates through all elements on the page to find matching ones. 
* **`document.querySelector('.test')`**: This method returns the first element that matches the specified CSS selector (in this case, ".test"). It is generally faster than `getElementsByClassName()` because it uses a more efficient algorithm for traversing the DOM tree.

**Pros and Cons:**

| Method        | Pros                                 | Cons                              |
|---------------|---------------------------------------|-----------------------------------|
| `getElementsByClassName()` | Returns all matching elements | Slower, especially for large sets |
| `querySelector()`    | Faster, more efficient           | Returns only the first match     |

**Other Considerations:**

* **Use Case:**  If you need to access all elements with a specific class, use `getElementsByClassName()`. If you only need the first matching element, use `querySelector()`. 
* **DOM Traversal**:  Both methods involve traversing the DOM tree. Be mindful of the size of your HTML document and the number of elements you're selecting, as this can impact performance.

**Alternatives:**

* **`querySelectorAll()`**: Similar to `querySelector()`, but returns a NodeList of all matching elements. This might be a better choice if you need multiple matches but still want a relatively performant option.

Let me know if you have any other questions!

Related benchmarks:

document.getElementsByClassname vs document.querySelector (version: 0)

Comparing performance of: Query by class vs QuerySelector

Created: 3 years ago by: Guest

Jump to the latest result

Query by class

QuerySelector

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gemma2:9b, generated 2 months ago):