Benchmark: Contains className vs classList

HTML Preparation code:

<div id="testDiv" class="test1 test2">Sample div</div>

Tests:

className
var div = document.getElementById('testDiv'); div.className.includes("test1"); div.className.includes("test2");
classList
var div = document.getElementById('testDiv'); div.classList.contains("test1"); div.classList.contains("test2");

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
className
classList

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36 OPR/92.0.0.0

Browser/OS: Opera 92 on Windows 8.1

View result in a separate tab

Test name	Executions per second
className	1133950.6 Ops/sec
classList	908613.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring the performance of different approaches to check if an HTML element has a certain class can be useful in various web development scenarios.

**Benchmark Overview**

The provided benchmark compares two approaches:

1. `className.includes()`: This method checks if the `className` property of an HTML element contains a specific string.
2. `classList.contains()`: This method checks if the `classList` property of an HTML element contains a specific string.

**Pros and Cons of Each Approach**

### className.includes()

* Pros:
	+ Widely supported by most browsers, including older versions that may not support `classList`.
	+ Simple to implement.
* Cons:
	+ Can be slower than `classList.contains()` due to the use of the `includes()` method, which scans through the string for a match.
	+ May return false positives if the element has multiple classes with similar names.

### classList.contains()

* Pros:
	+ Faster than `className.includes()`, as it only checks for exact matches in the `classList` array.
	+ More accurate, as it reduces the likelihood of false positives.
* Cons:
	+ Not supported by older browsers that do not implement the Web APIs (e.g., IE 8-10).
	+ Requires more code to set up and clean up the `classList` property.

**Library Used**

The benchmark uses the Web APIs, specifically:

1. `document.getElementById()`: Retrieves an HTML element by its ID.
2. `element.classList`: Accesses the `classList` property of an HTML element.

Note that `classList` is a part of the W3C web standards, and most modern browsers support it. However, older browsers may not have this feature or might require additional code to implement it.

**Special JS Features/Syntax**

This benchmark does not use any special JavaScript features or syntax beyond what's required for basic Web API functionality.

**Other Alternatives**

If the goal is to check if an HTML element has a certain class, other alternatives could include:

1. `element.getAttribute('class') == 'your-class-name'`: This method uses the `getAttribute()` method to retrieve the value of the `class` attribute and compares it with the target class name.
2. Using a library like jQuery or Lodash, which provide utility functions for working with classes on HTML elements.

However, these alternatives may not be as efficient or reliable as using the native Web APIs (`classList.contains()`) in modern browsers.

Related benchmarks:

Contains className vs classList (version: 0)

Comparing performance of: className vs classList

Created: 2 years ago by: Guest

Jump to the latest result

className

classList

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