javascript get class list code example

Example 1: add multiple class list at once in js

elem.classList.add("first");
elem.classList.add("second");
elem.classList.add("third");

is equal to :

elem.classList.add("first","second","third");

Example 2: add to classlist javascript

Add multiple classes to a <div> element:
document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");

Remove a class from a <div> element:
document.getElementById("myDIV").classList.remove("mystyle");

Remove multiple classes from a <div> element:
document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");

Toggle between two classes for a <div> element:
document.getElementById("myDIV").classList.toggle("newClassName");

Find out if an element has a "mystyle" class:
document.getElementById("myDIV").classList.contains("mystyle");

Example 3: javascript list class properties

function getClassProperties(instanceOfClass) {
  const proto = Object.getPrototypeOf(instanceOfClass);
  const names = Object.getOwnPropertyNames(proto);
  return names.filter(name => name != 'constructor');
}

Example 4: .classList

// .classList method returns an array of the classes attached to the element it is called with.
document.getElementById("myDIV").classList
// It returns
// [ 'className1', 'className2', ... ]