Benchmark: Complex test 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 visible">
                    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>
<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 visible">
                    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) { 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) { [...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:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Related benchmarks:

Complex test document.querySelectorAll().forEach() vs [...document.getElementsByClassName()].forEach() (version: 0)

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

Created: 4 years ago by: Guest

Jump to the latest result

document.querySelectorAll().forEach()

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

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results