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:

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()	5431.7 Ops/sec
[...document.getElementsByClassName()].forEach()	5804.3 Ops/sec

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

LLMs can make mistakes. Check important info.

It appears that the code in question is a JavaScript benchmarking script that tests the performance of two different methods for traversing and manipulating HTML elements: `querySelectorAll()` vs `[...document.getElementsByClassName()]`.

Based on the provided Benchmark Definitions, I can identify the main differences between the two approaches:

1.  **`document.querySelectorAll()`**: This method uses CSS selectors to match elements in the document tree. It returns a NodeList containing all elements that match the specified selector(s).
2.  **`[...document.getElementsByClassName()]`**: This method uses the `getElementsByClassName()` method, which returns a HTMLCollection of elements with the specified class name.

Here's how you could rewrite your code to make it more readable and maintainable:

```javascript
// Function to traverse elements using querySelectorAll()
function traverseWithQuerySelectorAll() {
    // Get all elements with the 'text-toggle' class
    const toggleElements = document.querySelectorAll('.text-toggle');
    
    // Iterate over each toggle element
    toggleElements.forEach((toggleElement) => {
        // Check if the previous sibling is a content element
        if (toggleElement.previousElementSibling) {
            // Get all elements with the 'expand' class within the content element
            const expandElements = toggleElement.previousElementSibling.querySelectorAll('.expand');
            
            // Iterate over each expand element
            expandElements.forEach((expandElement) => {
                // Check if the expand element is visible
                if (expandElement.classList.contains('visible')) {
                    // Replace text and icons based on visibility state
                    replaceTextAndIcons(toggleElement, 'weniger anzeigen', '#ico-plus');
                } else {
                    // Replace text and icons based on visibility state
                    replaceTextAndIcons(toggleElement, 'weiterlesen', '#ico-minus');
                }
                
                // Toggle the visible class of the expand element
                expandElement.classList.toggle('visible');
            });
        }
    });
}

// Function to traverse elements using [...document.getElementsByClassName()]
function traverseWithGetElementsByClassName() {
    // Get all elements with the 'text-toggle' class
    const toggleElements = [...document.getElementsByClassName('text-toggle')];
    
    // Iterate over each toggle element
    toggleElements.forEach((toggleElement) => {
        // Check if the previous sibling is a content element
        if (toggleElement.previousElementSibling) {
            // Get all elements with the 'expand' class within the content element
            const expandElements = toggleElement.previousElementSibling.querySelectorAll('.expand');
            
            // Iterate over each expand element
            expandElements.forEach((expandElement) => {
                // Check if the expand element is visible
                if (expandElement.classList.contains('visible')) {
                    // Replace text and icons based on visibility state
                    replaceTextAndIcons(toggleElement, 'weniger anzeigen', '#ico-plus');
                } else {
                    // Replace text and icons based on visibility state
                    replaceTextAndIcons(toggleElement, 'weiterlesen', '#ico-minus');
                }
                
                // Toggle the visible class of the expand element
                expandElement.classList.toggle('visible');
            });
        }
    });
}

// Function to replace text and icons based on visibility state
function replaceTextAndIcons(element, newText, newIcon) {
    // Replace text
    element.innerHTML = element.innerHTML.replace(newText, 'weiterlesen')
                                .replace('#ico-minus', '#ico-plus');
    
    // Replace icon
    element.innerHTML = element.innerHTML.replace(newIcon, '#ico-plus');
}
```

By separating the logic into smaller functions and using more descriptive variable names, your code becomes easier to understand and maintain.

Related benchmarks:

Complex test document.querySelectorAll().forEach() vs [...document.getElementsByClassName()].forEach() (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):