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

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

Latest run results:

Run details: (Test run date: 3 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()	1164.4 Ops/sec
[...document.getElementsByClassName()].forEach()	416.3 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Description**

The provided benchmark tests the performance difference between two approaches for iterating over HTML elements using JavaScript.

**Approach 1: `document.querySelectorAll()` followed by `.forEach()`**

This approach uses the `querySelectorAll` method to select all elements with a specific class (in this case, `.text-toggle`) and then iterates over the resulting NodeList using the `.forEach` method. The callback function within `.forEach` is responsible for toggling the visibility of content elements.

**Approach 2: `[...document.getElementsByClassName('text-toggle')].forEach()`**

This approach uses the `getElementsByClassName` method to select all elements with a specific class (in this case, `.text-toggle`) and then iterates over the resulting HTMLCollection using the `.forEach` method. The callback function within `.forEach` is similar to the one in Approach 1.

**Test Cases**

There are two test cases:

1. `document.querySelectorAll().forEach()`: This test case uses the first approach.
2. `[...document.getElementsByClassName('text-toggle')].forEach()`: This test case uses the second approach.

**Benchmark Results**

The latest benchmark results show that:

* Approach 1 (`document.querySelectorAll().forEach()`) executed approximately 1164 executions per second on Firefox 94 running on Ubuntu.
* Approach 2 (`[...document.getElementsByClassName('text-toggle')].forEach()`)) executed approximately 416 executions per second on the same browser and OS.

**Performance Comparison**

The results indicate that Approach 1 is significantly faster than Approach 2. This may be due to differences in how these methods interact with the DOM, or variations in JavaScript engine optimizations. However, the actual reasons for this difference require further investigation.

Related benchmarks:

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

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

Created: 3 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 2 months ago):