Run results for: Class assignment document.querySelectorAll().forEach() vs [...document.getElementsByClassName()].forEach()

Run details:

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

Browser: Firefox 94

Operating system: Ubuntu

Device Platform: Desktop

Date tested: 2 years ago

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

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'); }); }); } });