classname, Setattribute or classList.add

Question

I have a JSON list that creates several objects from a blog and come across the following ways to add classes to the HTML objects that I create after loading the list: classname, setAttribute and classList.add.

Obviously I’m giving preference to classList.add or even classname, but I found that setAttribute has a comparable performance or even better than them. As this CSS class definition would be inside the private set, someone has some recommendation?

Answer 1

The setAttribute should never be used to add a class to an element, for the simple fact that the new value will override the current one and you have no control over which classes the element has at this time. If in one part you add the class x and in another the class y, You’ll have a lot of inconsistency in your layout. To get around this problem, you would have to read the current value and concatenate the new class to it, but that’s just what the className ago.

Already, between choosing className and classList, the MDN documentation itself, for example responds to this:

Use classList is a convenient alternative to access the class list of an element as a space-delimited sequence through element.className.

The only detail is that the classList may not be implemented in all browsers you intend to support, so please refer to the compatibility table before using it in production.

Answer 2

After searching the MDN website, W3chools and running tests on 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 explain how I got to my answer.. below is a summary of it

The performance

I decided to search to know what would be the best option. According to the site https://measurethat.net/Benchmarks/Show/54/0/classname-vs-setattribute-vs-classlist, someone had already wondered the same. They did the following test I ran on Chrome, Edge and Firefox:

1st place: class

2nd place: setAttribute (except Edge)

3rd place: classList

*Result in transactions per second

In practice

Even if it is very clear, the above test is not an absolute, we must take into account other factors such as manipulation, functionalities and good practices.

1. classname: Allows the manipulation of classes in string format, in this case having a string with all classes written inside and allowing the manipulation of the data in this format. As an old feature, it is used by several browsers

2. setAttribute: The set attribute simply does this, sets the value within an attribute. There is getattribute that lets you view this value, but manipulation is limited to this.

3. classList: Places classes within a list to be manipulated in an orderly manner through several specific methods. The level of functionality is the most practical, but besides having a lower performance, has not been implemented in older browsers.

Completion

I believe that classname and classList are the best candidates. If you need performance and are just setting and deleting classes, use the classname. Now if you have a system that needs to search for classes within the tag or add only if it doesn’t exist, save the effort of creating a logic for it and use the classList.

For the full version of this reply, see the post: http://www.mundojs.com.br/blog/b00020.html