Benchmark: className vs. classList (comparing and adding)1

HTML Preparation code:

<div id="foo" class="test"></div>

Tests:

className
var element = document.getElementById("foo"); var i = 1000; while (i--) { if(element.className.indexOf("test") > -1) { element.className = "bar"; }else { element.className = "test"; } }
classList
var element = document.getElementById("foo"); var i = 1000; while (i--) { if(element.classList.contains("test")) { element.classList.add("bar"); } else { element.classList.add("test"); } }

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:

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 what is being tested in this benchmark.

**The Test Case:**

We have two test cases, both aimed at manipulating the class attribute of an HTML element (`#foo`). The main difference between these tests lies in how they access and modify the class attribute:

1. **`className` test**: This test uses the `className` property to get and set the value of the class attribute.
2. **`classList` test**: This test uses the `classList` API, which provides a more modern way to manage the class list.

**What's being compared:**

We're comparing two approaches:

* Using `element.className` (an older method) vs.
* Using `element.classList` (a newer, more efficient method)

**Pros and Cons of each approach:**

* **`className` approach:**
	+ Pros:
		- Still widely supported in older browsers.
		- Easy to use for simple class manipulations.
	+ Cons:
		- Less efficient than `classList`, especially when dealing with multiple classes or complex operations.
* **`classList` approach:**
	+ Pros:
		- More efficient and modern, making it suitable for large-scale applications.
		- Provides methods like `add()`, `remove()`, and `toggle()` for easier class management.
	+ Cons:
		- Not supported in older browsers (IE8 and below).

**Other considerations:**

* **Library:** None mentioned; these tests rely on native JavaScript functionality.
* **Special JS feature or syntax:** None, the tests use standard JavaScript methods.

**Alternatives:**

For similar class manipulation tasks:

* You can also consider using a CSS selector engine like Sizzle (used in jQuery) or a utility library like Lodash.
* In modern browsers, you might prefer using CSS `class` attribute and CSS selectors for styling and behavior control.

This benchmark highlights the performance differences between two approaches to managing HTML element classes. While both methods work, the newer `classList` API offers improved efficiency and is a better choice for large-scale applications or browsers that support it.

Related benchmarks:

className vs. classList (comparing and adding)1 (version: 0)

Comparing performance of: className vs classList

Created: 8 years ago by: Guest

Jump to the latest result

className

classList

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