Benchmark: querySelectorAll vs getElementsByClassName performance test for demo

HTML Preparation code:

<ul>
        <li class="list">Text Element 1</li>
        <li class="list">Text Element 2</li>
        <li class="list">Text Element 3</li>
        <li class="list">Text Element 4</li>
        <li class="list">Text Element 5</li>
        <li class="list">Text Element 6</li>
        <li class="list">Text Element 7</li>
        <li class="list">Text Element 8</li>
        <li class="list">Text Element 9</li>
        <li class="list">Text Element 10</li>
        <li class="list">Text Element 11</li>
        <li class="list">Text Element 12</li>
        <li class="list">Text Element 13</li>
        <li class="list">Text Element 14</li>
        <li class="list">Text Element 15</li>
        <li class="list">Text Element 16</li>
        <li class="list">Text Element 17</li>
        <li class="list">Text Element 18</li>
        <li class="list">Text Element 19</li>
        <li class="list">Text Element 20</li>
    </ul>

Tests:

querySelectorAll
document.querySelectorAll('li');
getElementsByClassName
document.getElementsByClassName('list');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelectorAll
getElementsByClassName

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 9 months ago)

User agent: Mozilla/5.0 (Android 16; Mobile; rv:140.0) Gecko/140.0 Firefox/140.0

Browser/OS: Firefox Mobile 140 on Android

View result in a separate tab

Test name	Executions per second
querySelectorAll	1239465.2 Ops/sec
getElementsByClassName	6052661.0 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided benchmark test compares the performance of two JavaScript methods: `document.querySelectorAll()` and `document.getElementsByClassName()`. These methods are used to select elements from an HTML document.

**Overview of the methods being compared**

1. `document.querySelectorAll(selector)`: This method returns a NodeList containing all elements that match the specified CSS selector.
2. `document.getElementsByClassName(className)`: This method returns a NodeList containing all elements with the specified class name.

**Options being compared**

The benchmark test compares two options:

a. **`document.querySelectorAll()`**: This option uses a CSS selector to select elements from the document.

b. **`document.getElementsByClassName()`**: This option uses a class name to select elements from the document.

**Pros and cons of each approach**

a. `document.querySelectorAll()`: Pros:

* More flexible and powerful than `getElementsByClassName`, as it allows selecting elements based on any CSS selector.
* Can be used for more complex selection scenarios, such as selecting elements with multiple classes or IDs.

Cons:

* Can be slower than `getElementsByClassName` for simple class name-based selections due to the overhead of parsing CSS selectors.

b. `document.getElementsByClassName()`: Pros:

* Faster than `querySelectorAll()` for simple class name-based selections, since it can directly access elements by their class names.
* Simpler and more straightforward than `querySelectorAll()`, as it only requires specifying a class name.

Cons:

* Less flexible and powerful than `querySelectorAll()`, as it only allows selecting elements based on class names.
* May not work correctly for complex selection scenarios, such as selecting elements with multiple classes or IDs.

**Library used**

There is no specific library mentioned in the benchmark test. However, `querySelectorAll()` and `getElementsByClassName()` are built-in methods of the Document object, which is part of the DOM (Document Object Model).

**Special JavaScript feature or syntax**

The benchmark test uses the `querySelectorAll()` and `getElementsByClassName()` methods, which are supported by most modern browsers.

**Alternative approaches**

Other alternatives for selecting elements from an HTML document include:

1. **`document.querySelector(selector)`**: This method returns a single element that matches the specified CSS selector.
2. **`Element.classList.contains(className)`**: This method checks if an element contains a specific class name.
3. **`element.parentNode && element.parentNode.childNodes`**: This approach involves traversing the DOM tree to find elements based on their parent-child relationships.

However, `querySelectorAll()` and `getElementsByClassName()` are often preferred over these alternatives due to their flexibility and performance.

Related benchmarks:

querySelectorAll vs getElementsByClassName performance test for demo (version: 2)

Compare javascript selector performance

Comparing performance of: querySelectorAll vs getElementsByClassName

Created: 4 years ago by: Registered User

Jump to the latest result

querySelectorAll

getElementsByClassName

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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