Benchmark: getElementsByClassName last element vs getElementById as last element

HTML Preparation code:

<div class='test'>
  <div class='other'>
    <div class='other'>
      <a href='#'>
        Dummy
      </a>
    </div>
  </div>
</div>
<div class='test'>
  <div class='other'>
    <div class='other'>
      <a href='#'>
        Dummy
      </a>
    </div>
  </div>
</div>
<div class='test'>
  <div class='other'>
    <div class='other'>
      <a href='#'>
        Dummy
      </a>
    </div>
  </div>
</div>
<div class='test'>
  <div class='other'>
    <div class='other'>
      <a href='#'>
        Dummy
      </a>
    </div>
  </div>
</div>
<div class='test'>
  <div class='other'>
    <div class='other'>
      <a href='#'>
        Dummy
      </a>
    </div>
  </div>
</div>
<div class='test'>
  <div class='other'>
    <div class='other'>
      <a href='#'>
        Dummy
      </a>
    </div>
  </div>
</div>
<div class='test'>
  <div class='other'>
    <div class='other'>
      <a href='#'>
        Dummy
      </a>
    </div>
  </div>
</div>
<div class='test'>
  <div class='other'>
    <div class='other'>
      <a href='#'>
        Dummy
      </a>
    </div>
  </div>
</div>
<div class='test'>
  <div class='other'>
    <div class='other'>
      <a href='#'>
        Dummy
      </a>
    </div>
  </div>
</div>
<div class='test' id='final'>
  <div class='other'>
    <div class='other'>
      <a href='#'>
        Dummy
      </a>
    </div>
  </div>
</div>

Tests:

getElementsByClassName last element
var final = document.getElementsByClassName('test'); final[final.length - 1];
getElementById as last element
var final = document.getElementById('final'); final;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getElementsByClassName last element
getElementById as last element

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Browser/OS: Chrome 130 on Windows

View result in a separate tab

Test name	Executions per second
getElementsByClassName last element	1909834.0 Ops/sec
getElementById as last element	3170309.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is being tested.

**Benchmark Definition**

The benchmark tests two ways to access the last element of a collection:

1. **`getElementsByClassName`**: This method returns a live HTMLCollection of all elements with the specified class name. In this case, we're targeting an element with class `test`.
2. **`getElementById`**: This method returns a single HTMLElement by its id attribute.

**Options Compared**

The two options being compared are:

* Accessing the last element using `getElementsByClassName`
* Accessing the last element using `getElementById`

**Pros and Cons**

**getElementsByClassName**

Pros:

* Can be used to retrieve elements with multiple classes (in this case, `test` and `other`)
* Can be more efficient for large collections

Cons:

* Returns a live collection of elements, which can lead to slower performance due to the DOM updates
* May not be as fast as direct access using `getElementById`

**getElementById**

Pros:

* Directly accesses a single element by its id attribute
* Typically faster than accessing elements through `getElementsByClassName`

Cons:

* Only works for elements with a unique id attribute
* May not work if the last element is not found

**Other Considerations**

In this benchmark, we're using a nested HTML structure to create multiple elements with class `test`. The last element has an additional attribute, `id`, which makes it accessible via `getElementById`.

**Library and Purpose**

The `getElementsByClassName` method uses the Web API's `Element` interface and the `DOMTokenList` API. The `getElementById` method also uses the Web API's `Element` interface.

**Special JS Feature or Syntax**

There is no special JavaScript feature or syntax used in this benchmark, apart from the use of the dot notation to access element attributes (e.g., `final[final.length - 1]`). This is a standard way to access array elements in JavaScript.

**Alternatives**

Other alternatives for accessing elements include:

* Using `document.querySelector` and `querySelectorAll`, which are more modern APIs that provide better performance and flexibility
* Using CSS selectors, such as `:last-child` or `[class="test"]`, which can be used with `querySelector` or `querySelectorAll`

However, these alternatives may not be suitable for this specific benchmark, as they require a different approach to accessing elements in the DOM.

Related benchmarks:

getElementsByClassName last element vs getElementById as last element (version: 0)

Comparing performance of: getElementsByClassName last element vs getElementById as last element

Created: 5 years ago by: Guest

Jump to the latest result

getElementsByClassName last element

getElementById as last element

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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