I have a JSON list that creates several objects in a blog and I came across the following ways to add classes to the HTML objects I create after loading the list: className, setAttribute and classList.add.
Obviously I'm giving preference to classList.add or to className, but I've found that setAttribute has comparable or even better performance. Since this definition of the CSS class would be inside the private set, does anyone have any recommendations?
After searching the MDN website, W3chools, and running tests in my browser and measurethat, I discovered some interesting things about the 3 methods. As they vary in speed and functionality, I set up a post to be able to explain how I got back in my account .. Below is a summary of it
Performance
I decided to search to know the best option. According to the site link , someone had already asked themselves the same. They did the following test I rode on Chrome, Edge and Firefox:
1st place: className
2nd place: setAttribute (except Edge)
3rd place: classList
* Result in operations per second
In practice
Even though it is very clear, the above test is not absolute, we must take into account other factors such as manipulation, functionalities and good practices.
className: Allows the manipulation of the classes in the format string, in this case having a string with all the classes written inside and allowing the manipulation of the data in this format. Because it is an old functionality, it is used by several browsers
setAttribute: The set attribute simply does this, sets the value within an attribute. There is a getAttribute that allows you to view this value, but manipulation is limited to that.
Conclusion
I believe that the className and classList are the best candidates. If you need performance and are just setting and deleting classes, use className. Now if you have a system that needs to search for classes inside the tag or add only if it does not exist, spare the effort to create a logic for it and use the classList.
For the full version of this answer, see the post: link
setAttribute should never be used to add a class to an element, for the simple fact that the new value will overwrite the current one and you have no control over which classes the element currently has . If in one part you add the class x and in another the y class, you will have a lot of inconsistency in your layout. To work around this problem, you would have to read the current value and concatenate the new class to it, but that's just what className does.
Now, between choosing className and classList , the MDN documentation itself, for example, answers this:
Using
classListis a convenient alternative to access the list of classes of an element as a space-delimited string throughelement.className.
The only detail is that classList may not be implemented in all the browsers you intend to support, so check the compatibility table before using it in production.
