Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
setAttribute vs classList.add (attribute adding)
(version: 0)
Comparing performance of:
classList.add vs setAttribute
Created:
6 years ago
by:
Registered User
Go to the latest result
HTML Preparation code:
<div id="test" class="first">Testing</div>
Script Preparation code:
var el = document.getElementById('test');
Tests:
classList.add
el.classList.add("second");
setAttribute
el.setAttribute("class", el.getAttribute("class") + " second");
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
classList.add
setAttribute
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:122.0) Gecko/20100101 Firefox/122.0
Browser/OS:
Firefox 122 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=510208" width="100%" height="500px"></iframe>
classList.add
8.1M/s
setAttribute
2K/s
View exact numbers
Test name
Executions per second
✓
classList.add
8,051,140 Ops/sec
setAttribute
2,313 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down what's being tested on the provided JSON. **Benchmark Definition** The benchmark is comparing two approaches to adding an attribute (class in this case) to an HTML element using JavaScript: 1. `classList.add()`: This method is part of the DOM API, which provides a convenient way to manage classes on an element. 2. `setAttribute()`: This method is used to set the value of an attribute on an element. **Options Compared** The benchmark is comparing these two approaches in terms of performance. **Pros and Cons** * `classList.add()`: + Pros: - More concise and readable code - Less error-prone, as it automatically handles cases where the class already exists + Cons: - May not be supported in older browsers or versions of JavaScript (before ECMAScript 2015) * `setAttribute()`: + Pros: - More versatile, as it can be used to set any attribute, not just classes + Cons: - Longer and less readable code - May lead to errors if the class already exists or is set to an invalid value **Library Used** The `classList` property is part of the DOM API, which is a standard library in modern browsers. The purpose of `classList.add()` is to add a class to an element and update its classes list accordingly. **Special JavaScript Feature/Syntax** This benchmark doesn't use any special JavaScript features or syntax. It only uses standard JavaScript methods and properties (e.g., `document.getElementById()`, `setAttribute()`, etc.). **Other Alternatives** If you wanted to test other approaches, some alternatives could be: * Using a CSS class instead of the `classList` property * Using a custom library or function to add classes * Testing different attribute names (e.g., `style` instead of `class`) * Testing different browsers or versions of JavaScript However, for this specific benchmark, comparing `classList.add()` and `setAttribute()` is a good starting point, as it highlights the trade-offs between conciseness, readability, and performance.
Related benchmarks
className vs. setAttribute vs. classList
setAttribute vs classList.add (attribute adding) V2
setAttribute vs classList.add
Comments
Confirm delete:
Do you really want to delete benchmark?