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 llama3.1:latest, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**What is being tested?**

The benchmark tests three different approaches to determine if an HTML element has a specific class:

1. `hasClass1`: Uses the `classList` property of the element, which returns a DOMTokenList object containing all the classes applied to the element.
2. `hasClass2`: Uses the `indexOf()` method on a concatenated string of space-separated classes, checking if the target class is present.
3. `hasClass`: A custom method added as a prototype extension to the HTML Element prototype, using the same approach as `hasClass2`.

**What options are being compared?**

The three test cases compare the performance of:

1. Using `classList.contains()` (modern browsers).
2. Using `indexOf()` on a concatenated string (older browsers or for cross-browser compatibility).
3. Adding a custom method to the HTML Element prototype (an alternative approach).

**Pros and Cons of each approach:**

* **hasClass1**:
	+ Pros: Simple, efficient, and widely supported in modern browsers.
	+ Cons: May not work in older browsers without `classList`.
* **hasClass2**:
	+ Pros: Works across all browsers that support string manipulation (essentially all).
	+ Cons: May be slower than `hasClass1` due to string concatenation and `indexOf()` operation.
* **hasClass** (prototype extension):
	+ Pros: Provides a consistent, modern approach for all browsers by adding a custom method.
	+ Cons: May pollute the global namespace with additional prototype methods.

**Other considerations:**

When choosing an approach, consider:

1. Target audience and browser support requirements.
2. Performance expectations and potential trade-offs (e.g., simplicity vs. speed).
3. Code maintainability and readability.

**Library or special JS feature used?**

None in this specific benchmark definition.

**Alternatives?**

In addition to the approaches tested here, you can also use:

1. `element.getAttribute('class')`, which retrieves the class attribute as a string.
2. Third-party libraries like jQuery, which provide their own implementation of `hasClass()`.

Remember that each approach has its pros and cons, and choosing the best one depends on your specific requirements and constraints.

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 llama3.1:latest, generated one year ago):