Benchmark: getAttribute(...) vs classList.value vs className

HTML Preparation code:

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

Tests:

getAttribute(...)
var element = document.getElementById("foo"); var i = 100; while (i--) { element.getAttribute("class"); }
classList.value
var element = document.getElementById("foo"); var i = 100; while (i--) { element.classList.value; }
className
var element = document.getElementById("foo"); var i = 100; while (i--) { element.className; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getAttribute(...)
classList.value
className

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Browser/OS: Chrome 116 on Linux

View result in a separate tab

Test name	Executions per second
getAttribute(...)	289547.7 Ops/sec
classList.value	139174.2 Ops/sec
className	469107.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring the performance of different approaches to retrieve and manipulate an element's class list is an interesting benchmark.

**What is being tested:**

The provided JSON represents three individual test cases, each measuring the performance of retrieving and manipulating an element's class list using:

1. `getAttribute("class")`
2. `classList.value` (via the `classList` property on the `Element` object)
3. `className` (via the `className` property on the `Element` object)

**Options being compared:**

The benchmark is comparing the performance of these three approaches:

* **`getAttribute("class")`**: This method retrieves the value of the `class` attribute of an element.
* **`classList.value`**: This method returns a string containing all the classes of the element, using the `classList` property on the `Element` object.
* **`className`**: This method returns a string containing all the classes of the element as CSS class names.

**Pros and Cons:**

1. **`getAttribute("class")`**:
	* Pros: Simple, widely supported, and works across older browsers that don't support the `classList` property.
	* Cons: Returns only the value of the `class` attribute, without any additional information about the classes themselves.
2. **`classList.value`**:
	* Pros: Returns a string containing all the classes of the element, making it easier to manipulate class lists.
	* Cons: Requires modern browsers that support the `classList` property, which might not be the case for older users or browsers.
3. **`className`**:
	* Pros: Similar to `classList.value`, but with a more traditional approach using CSS class names.
	* Cons: Less straightforward than `classList.value`, as it requires parsing the string returned by this method.

**Library and syntax considerations:**

None of these test cases rely on specific libraries or syntax features that are not part of standard JavaScript or DOM APIs.

**Other alternatives:**

If you want to explore alternative approaches, here are a few options:

* Using `getComputedStyle()` to retrieve the CSS styles for an element and then parsing them to extract class names.
* Creating a custom function to parse the `class` attribute or `className` property into an array of classes.

Keep in mind that these alternatives might not be as efficient or straightforward as the methods being compared in this benchmark.

Related benchmarks:

getAttribute(...) vs classList.value vs className (version: 0)

Comparing performance of: getAttribute(...) vs classList.value vs className

Created: one year ago by: Guest

Jump to the latest result

getAttribute(...)

classList.value

className

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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