Benchmark: querySelector vs getElementById vs getElementsByClassName vs getElementsByTagName 2

HTML Preparation code:

    <div class="test1">
        <div class="test1">
        <div class="test1"></div>
        <div class="test1"></div>
        <div class="test1">
            <div class="test1">
                <div class="test1"></div>
            </div>
        </div>
        <div class="test1"></div>
        <div class="test1"></div>
        </div>
        <div class="test1">
        <div class="test1"></div>
        <div class="test1">
            <div class="test1">
                <div class="test1"></div>
            </div>
        </div>
        <div class="test1">
            <div class="test1">
                <div class="test1"></div>
            </div>
        </div>
        <div class="test1"></div>
        </div>
        <div class="test1"></div>
        <div class="test1">
        <div class="test1"></div>
        <div class="test1">
            <div class="test1">
                <div class="test1"></div>
            </div>
            <div class="test1"></div>
        </div>
        <div class="test1"></div>
        <div class="test1"></div>
        <div class="test1"></div>
        </div>
        <div class="test1"></div>
        <div class="test1">
        <div class="test1">
            <div class="test1"></div>
            <div class="test1">
                <div class="test1">
                    <div class="test1">
                    <article class="test" id="test"></article>
                    </div>
                    <div class="test1">
                    <div class="test1"></div>
                    </div>
                    <div class="test1"></div>
                </div>
                <div class="test1"></div>
            </div>
        </div>
        <div class="test1"></div>
        <div class="test1"></div>
        </div>
        <div class="test1">
        <div class="test1"></div>
        <div class="test1">
            <div class="test1"></div>
            <div class="test1"></div>
        </div>
        <div class="test1"></div>
        <div class="test1"></div>
        <div class="test1"></div>
        </div>
    </div>

Tests:

getElementById
document.getElementById("test");
querySelector (id)
document.querySelector("#test")
getElementsByClassName
document.getElementsByClassName("test")
querySelector (class)
document.querySelector(".test")
getElementsByTagName
document.getElementsByTagName("article")
querySelector (tag)
document.querySelector("article")

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getElementById
querySelector (id)
getElementsByClassName
querySelector (class)
getElementsByTagName
querySelector (tag)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:92.0) Gecko/20100101 Firefox/92.0

Browser/OS: Firefox 92 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
getElementById	3573833.5 Ops/sec
querySelector (id)	1314474.8 Ops/sec
getElementsByClassName	3909238.0 Ops/sec
querySelector (class)	1182266.1 Ops/sec
getElementsByTagName	3962080.0 Ops/sec
querySelector (tag)	1263613.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in the provided benchmark.

The main goal of this benchmark is to compare the performance of different DOM query methods:

1. `getElementById`
2. `querySelector` with an ID selector (`"#test"` )
3. `getElementsByClassName` with a class name selector (`"test"` )
4. `getElementsByTagName` with a tag name selector (`"article"` )
5. `querySelector` with a class selector (`".test"` )

Each test case has the same HTML structure, which contains multiple elements with a specific class or ID.

Here's a brief overview of each query method:

* `getElementById`: Returns the first element with the specified ID.
* `querySelector` with an ID selector: Returns the first element that matches the specified ID.
* `getElementsByClassName`: Returns a list of all elements that have the specified class name. This method is slower than `querySelector` because it requires iterating over all elements and checking their classes.
* `getElementsByTagName`: Returns a list of all elements that match the specified tag name.
* `querySelector` with a class selector: Returns the first element that matches the specified class.

Now, let's discuss the pros and cons of each approach:

**`getElementById`**:

Pros:

* Fastest method among all four (since it directly accesses the DOM element by ID)

Cons:

* Only returns the first matching element
* Less flexible than other methods

**`querySelector` with an ID selector**:

Pros:

* Fast and efficient, especially for modern browsers

Cons:

* Only returns the first matching element
* Requires a valid CSS selector syntax

**`getElementsByClassName`**:

Pros:

* Returns all matching elements (not just the first one)
* Can be used to get multiple elements with the same class name

Cons:

* Slower than `querySelector` due to its iterative approach
* May return null if no elements match the class name

**`getElementsByTagName`**:

Pros:

* Returns all matching elements
* Simple to use, but not as flexible as other methods

Cons:

* Generally slower than other methods (except for older browsers)
* Less precise than `querySelector` with a class selector

In terms of performance, the latest benchmark results show that:

1. `getElementsByTagName` is the fastest method, followed closely by `querySelector` with an ID selector.
2. `querySelector` with a class selector is relatively slow due to its iterative approach.

Keep in mind that these results may vary depending on the specific browser, version, and environment being tested.

Overall, this benchmark highlights the importance of choosing the right DOM query method for your use case, considering factors like performance, flexibility, and precision.

Related benchmarks:

querySelector vs getElementById vs getElementsByClassName vs getElementsByTagName 2 (version: 0)

Comparing performance of: getElementById vs querySelector (id) vs getElementsByClassName vs querySelector (class) vs getElementsByTagName vs querySelector (tag)

Created: 3 years ago by: Guest

Jump to the latest result

getElementById

querySelector (id)

getElementsByClassName

querySelector (class)

getElementsByTagName

querySelector (tag)

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):