Benchmark: Has Class Function

HTML Preparation code:

<div class='test some more items and stuff here' id='test'></div>

Script Preparation code:

var elem = document.getElementById('test');

function hasClass1(elem, name) {
    return elem.classList.contains(name);
}

function hasClass2(elem, name) {
    return (' ' + elem.className + ' ').indexOf(' ' + name + ' ');
}

Element.prototype.hasClass = function (name) {
  return (' ' + this.className + ' ').indexOf(' ' + name + ' ');
};

Tests:

ClassList Contains
var has = hasClass1(elem, 'stuff');
ClassName IndexOf
var has = hasClass2(elem, 'stuff');
ClassName IndexOf Prototype
var has = elem.hasClass('stuff');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
ClassList Contains
ClassName IndexOf
ClassName IndexOf Prototype

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!

Autogenerated LLM Summary (model gemma2:9b, generated one year ago):

LLMs can make mistakes. Check important info.

This benchmark explores three different ways to check if an HTML element has a specific class:

**1. `classList.contains(name)` (ClassList Contains)**

*   This method utilizes the built-in `classList` property of HTML elements, which is a convenient way to manage classes attached to an element. 
*   **Pros:** Concise and efficient, often considered the preferred approach in modern JavaScript due to its directness and performance optimization.
*   **Cons:**  Requires modern browsers that support the `classList` API (generally most current browsers).

**2. `indexOf(' ' + name + ' ')` (ClassName IndexOf)**

*   This method relies on searching for the class name within the space-separated string of all classes present in the element's `className` property.
*   **Pros:** Works in older browsers that might not support the `classList` API.
*   **Cons:** Less efficient than `classList.contains` as it involves string manipulation and searching.

**3. Prototype Extension (ClassName IndexOf Prototype)**

*   This method adds a custom `hasClass` function to the `Element.prototype`, extending the functionality of all HTML elements. It uses the same `indexOf` approach as method 2.
*   **Pros:** Can be useful for adding consistent functionality across different projects or when you want to override default behavior.
*   **Cons:**  Potentially increases the complexity of your codebase if not used carefully, and still relies on string manipulation which can be slower than `classList`.

Let's look at the benchmark results:

The "ClassName IndexOf Prototype" approach performs best in this specific case, but keep in mind that benchmarks can vary depending on the browser, hardware, and other factors.

**Alternatives:**
* **Lodash or Other Utility Libraries:**  Libraries like Lodash offer optimized functions for checking class names, potentially offering even better performance.

**Important Considerations:**
*   **Browser Support:** Always consider the target audience of your code and ensure that your chosen method is supported by their browsers.
*   **Performance Trade-offs:** While `classList.contains` is generally the fastest option, there might be specific scenarios where other approaches perform better. Carefully evaluate your needs.
*   **Code Readability and Maintainability:**  Choose an approach that is clear, concise, and easy to understand for both yourself and others who might work on the codebase.

Related benchmarks:

Has Class Function (version: 0)

Determining which method to check if an element has a specific class.

Comparing performance of: ClassList Contains vs ClassName IndexOf vs ClassName IndexOf Prototype

Created: 7 years ago by: Guest

Jump to the latest result

ClassList Contains

ClassName IndexOf

ClassName IndexOf Prototype

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model gemma2:9b, generated one year ago):