Benchmark: classList.contains vs. hasAttribute

HTML Preparation code:

<div id="foo" class="bar baz"></div>

Script Preparation code:

var test_element = document.getElementById("foo");

Tests:

Use hasAttribute shorthand
test_element.hasAttribute('class');
Use classList
test_element.classList.contains("bar");

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Use hasAttribute shorthand
Use classList

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/133.0.0.0 Safari/537.36

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
Use hasAttribute shorthand	69020768.0 Ops/sec
Use classList	36945008.0 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 JavaScript microbenchmark on MeasureThat.net.

**Benchmark Definition**

The benchmark compares two approaches for checking if an HTML element has a specific CSS class: using the `hasAttribute` shorthand and using the `classList.contains()` method.

**Script Preparation Code**

This code creates a variable `test_element` that represents an HTML element with the id "foo". This element is assumed to have some CSS classes attached to it, but their names are not specified.

**Html Preparation Code**

This code generates an HTML string that contains a `<div>` element with the id "foo" and two classes: "bar" and "baz".

**Options Compared**

The benchmark compares two options:

1. **`hasAttribute('class')`**: This method checks if the `class` attribute of the element is set to a non-empty value. It's an older way of checking for CSS classes, but it has some drawbacks (see below).
2. **`classList.contains('bar')`**: This method checks if the `bar` class is present in the element's class list. It's a more modern and efficient way of checking for CSS classes.

**Pros and Cons**

1. **`hasAttribute('class')`**:
	* Pros: Simple, fast, and widely supported.
	* Cons:
		+ It only checks if the `class` attribute is set to a non-empty value, not if it's actually a valid class name (e.g., " foo").
		+ It can be slower than `classList.contains()` for larger class lists.
2. **`classList.contains('bar')`**:
	* Pros: Efficient, flexible, and modern.
	* Cons:
		+ Requires support for the `classList` property, which is not supported in older browsers.

**Library**

In this benchmark, no specific library is used beyond what's built into JavaScript (e.g., DOM APIs). However, if you were to use a third-party library like jQuery or Lodash, you might find more convenient methods for working with CSS classes.

**Special JS Feature/Syntax**

This benchmark uses the `classList` property, which is a relatively modern feature introduced in ECMAScript 2015 (ES6). It's not supported in older browsers, so if you need to support those, you should use one of the other approaches. The `contains()` method is also supported by modern JavaScript engines.

**Other Alternatives**

If you don't want to use `classList.contains()`, you could also use a custom function to check for class presence:
```javascript
function hasClass(element, className) {
  return element.className.indexOf(className) !== -1;
}
```
Keep in mind that this approach can be slower and less efficient than using `classList.contains()`.

Overall, the benchmark suggests that using `classList.contains()` is a good choice for checking CSS class presence in modern browsers.

Related benchmarks:

classList.contains vs. hasAttribute (version: 0)

Comparing performance of: Use hasAttribute shorthand vs Use classList

Created: 7 years ago by: Guest

Jump to the latest result

Use hasAttribute shorthand

Use classList

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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