Benchmark: Class assignment document.querySelectorAll().forEach() vs [...document.getElementsByClassName()].forEach()

HTML Preparation code:

<div class="news-teaser">
    <div class="news-teaser__card-container">
        <div class="news-teaser__card-img">
            <img src="" width="690" height="440" alt="" loading="lazy" />
        </div>
        <article class="news-teaser__card-body">
            <div class="news-teaser__posted">04. August 2020</div>
            <h4 class="news-teaser__headline">Konzert mit "Klass Brothers"</h4>
            <div class="news-teaser__content">
                <p>
                    Konzert mit "Klazz Brothers" - open air!<br />
                    Samstag, 8. August 2020, 19.30 Uhr
                </p>
                <p class="expand">
                    Inventore fuga totam doloribus libero, neque perferendis atque et veniam qui cumque
                    accusantium? Debitis libero nulla reprehenderit similique eveniet aliquid magnam, incidunt
                    tenetur itaque? Ex alias dolorum reprehenderit, facere iure similique earum molestias in
                    pariatur inventore.
                </p>
            </div>
            <button class="link link--default link--gold text-toggle">
                <span class="link__icon icon--md">
                    <svg class="icon--md" viewBox="0 0 32 32" width="32" heigth="32" xmlns="http://www.w3.org/2000/svg">
                        <use href="#ico-plus"></use>
                    </svg>
                </span>
                <span class="underlined">weiterlesen</span>
            </button>

        </article>
    </div>
    <div class="news-teaser__aside--right">
        <aricle class="news-teaser__article">
            <div class="news-teaser__posted">03.Juni 2020</div>
            <h5 class="news-teaser__headline">Betriebsferien Fleischereigeschäft</h5>
            <div class="news-teaser__content">
                <p>
                    Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die
                    Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines
                    großen Sprachozeans. Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und
                    Konsonantien leben die Blindtexte.
                </p>
                <p class="expand">
                    Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die
                    Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines
                    großen Sprachozeans. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi
                    commodi omnis placeat tempora deserunt tenetur ad illo amet nulla ut suscipit, ratione,
                    eveniet assumenda ipsa, nihil quam distinctio dolorem at. Weit hinten, hinter den
                    Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte.
                </p>
            </div>
            <button class="link link--default link--gold text-toggle">
                <span class="link__icon icon--md">
                    <svg class="icon--md" viewBox="0 0 32 32" width="32" heigth="32" xmlns="http://www.w3.org/2000/svg">
                        <use href="#ico-plus"></use>
                    </svg>
                </span>
                <span class="underlined">weiterlesen</span>
            </button>

        </aricle>
        <article class="news-teaser__article">
            <div class="news-teaser__posted">15.Mai 2020</div>
            <h5 class="news-teaser__headline">
                Information zu aktuellen Situation in Verbindung mit dem Corona-Virus
            </h5>
            <button class="link link--default link--gold text-toggle">
                <span class="link__icon icon--md">
                    <svg class="icon--md" viewBox="0 0 32 32" width="32" heigth="32" xmlns="http://www.w3.org/2000/svg">
                        <use href="#ico-plus"></use>
                    </svg>
                </span>
                <span class="underlined">weiterlesen</span>
            </button>

        </article>
    </div>
</div>

Tests:

document.querySelectorAll().forEach()
document.querySelectorAll('.text-toggle').forEach((toggleElement) => { const contentElement = toggleElement.previousElementSibling; if (contentElement) { toggleElement.addEventListener('click', () => { contentElement.querySelectorAll('.expand').forEach((expandElement) => { if (expandElement.classList.contains('visible')) { toggleElement.innerHTML = toggleElement.innerHTML .replace('weniger anzeigen', 'weiterlesen') .replace('#ico-minus', '#ico-plus'); } else { toggleElement.innerHTML = toggleElement.innerHTML .replace('weiterlesen', 'weniger anzeigen') .replace('#ico-plus', '#ico-minus'); } expandElement.classList.toggle('visible'); }); }); } });
[...document.getElementsByClassName()].forEach()
[...document.getElementsByClassName('.text-toggle')].forEach((toggleElement) => { const contentElement = toggleElement.previousElementSibling; if (contentElement) { toggleElement.addEventListener('click', () => { [...contentElement.getElementsByClassName('.expand')].forEach((expandElement) => { if (expandElement.classList.contains('visible')) { toggleElement.innerHTML = toggleElement.innerHTML .replace('weniger anzeigen', 'weiterlesen') .replace('#ico-minus', '#ico-plus'); } else { toggleElement.innerHTML = toggleElement.innerHTML .replace('weiterlesen', 'weniger anzeigen') .replace('#ico-plus', '#ico-minus'); } expandElement.classList.toggle('visible'); }); }); } });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
document.querySelectorAll().forEach()
[...document.getElementsByClassName()].forEach()

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 28 days ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark and analyze what's being tested.

**Benchmark Definition**

The benchmark compares two approaches to iterate over elements in an HTML document:

1. `document.querySelectorAll('.text-toggle').forEach()`
2. `[...document.getElementsByClassName('.text-toggle')].forEach()`

Both approaches aim to achieve the same goal: iterating over elements with the class `text-toggle` and performing some action on them.

**Approach 1: `document.querySelectorAll()`**

This approach uses the `querySelectorAll()` method, which returns a NodeList of all elements that match the specified CSS selector (`'.text-toggle'`). The `forEach()` method is then called on this NodeList to execute a callback function for each element.

In the provided benchmark definition, the callback function does the following:

* Retrieves the previous sibling element of the current toggle element using `toggleElement.previousElementSibling`.
* Adds an event listener to the toggle element that toggles the visibility of elements with class `expand` when clicked.
* Replaces certain text and icons in the toggle element's HTML based on the expanded state.

**Approach 2: `[...document.getElementsByClassName()]`

This approach uses the spread operator (`[...]`) to convert a HTMLCollection (returned by `getElementsByClassName()` ) into an array-like object, which is then passed to the `forEach()` method.

The callback function in this case performs similar actions as in Approach 1, but with some differences:

* The callback function retrieves elements with class `expand` from the content element's children using `contentElement.getElementsByClassName('.expand')`.
* The replacement text and icons are updated differently based on the expanded state.

**Test Results**

The benchmark results show two browsers (Firefox 94) executing these approaches at different frequencies. Approach 2 (`[...document.getElementsByClassName()].forEach()` ) is being executed significantly more often than Approach 1 (`document.querySelectorAll().forEach()`), with an execution rate of approximately 1252 executions per second compared to around 2676666 executions per second.

**Analysis**

The significant difference in execution rates between the two approaches suggests that `document.querySelectorAll()` may be less efficient or optimized for certain use cases, such as when working with arrays-like objects. However, this might also depend on the specific browser and version being used.

It's worth noting that both approaches are relatively simple and lightweight, so any performance differences may not have a significant impact in most use cases. Nevertheless, this benchmark provides an interesting insight into the performance characteristics of these two methods.

Latest run results:

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

User agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:94.0) Gecko/20100101 Firefox/94.0

Browser/OS: Firefox 94 on Ubuntu

View result in a separate tab

Test name	Executions per second
document.querySelectorAll().forEach()	1252.1 Ops/sec
[...document.getElementsByClassName()].forEach()	2676666.2 Ops/sec

Related benchmarks:

Class assignment document.querySelectorAll().forEach() vs [...document.getElementsByClassName()].forEach() (version: 0)

Comparing performance of: document.querySelectorAll().forEach() vs [...document.getElementsByClassName()].forEach()

Created: 2 years ago by: Guest

Jump to the latest result

document.querySelectorAll().forEach()

[...document.getElementsByClassName()].forEach()

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 28 days ago):