Use duplicate class name on an element?

Question

I found that there are many frameworks will check the duplicate class name before adding the new class name on the element that i think will slow down the performance.

Answer 1

ES6 provides a convenient API for adding and removing and testing class-names of DOM-elements: classList.add(name) and classList.remove(name) and classList.contains(name).

In the ES6 context the question could perhaps be rephrased as:

"If I use .classList.add() to add the same className more than once, and then want to remove that class with classList.remove(), do I need to call classList.remove() multiple times?

Luckily the answer seems to be a single call to .classList.remove() is enough to remove a given class no matter how many times you have added it.

I couldn't find an easy answer to this by Google so I wrote the following test to tell me that is how it behaves. Calling the below function with DOM-element as argument does NOT throw an error:

function testClassListRemove (dem)
{
  dem.classList.add ("hello");
  dem.classList.add ("hello");
  dem.classList.add ("hello");
  ok (dem.classList.contains ("hello") );

  dem.classList.remove ("hello");
  ok (!  dem.classList.contains ("hello") );

  function ok (b)
  { if (! b)
    { throw new Error ('not ok ');
    }
  }
}