JAVASCRIPT

js classlist

classList.item(index); // Returns the item in the list by its index, or undefined if index is greater than or equal to the list's length
classList.contains(token); // Returns true if the list contains the given token, otherwise false.
classList.add(token1[, ...tokenN]); // Adds the specified token(s) to the list.
classList.remove(token1[, ...tokenN]); // Removes the specified token(s) from the list.
classList.replace(oldToken, newToken); // Replaces token with newToken.
classList.supports(token); // Returns true if a given token is in the associated attribute's supported tokens.
classList.toggle(token[, force]); // Removes token from the list if it exists, or adds token to the list if it doesn't. Returns a boolean indicating whether token is in the list after the operation.
classList.entries(); // Returns an iterator, allowing you to go through all key/value pairs contained in this object.
classList.forEach(callback[ ,thisArg]); // Executes a provided callback function once per DOMTokenList element.
classList.keys(); // Returns an iterator, allowing you to go through all keys of the key/value pairs contained in this object.
classList.values(); // Returns an iterator, allowing you to go through all values of the key/value pairs contained in this object.

javascript classlist add

// select element and append class
const div = document.querySelector('div');
div.classList.add('class-1', 'class-2', 'class-3', 'class-n');

// create element and append class
const div = document.createElement('div');
div.classList.add('class-1', 'class-2', 'class-3', 'class-n');

JS classList

-- HTML --
<div class='container'></div>

-- JAVASCRIPT --
element.classList.contains('container'); // True or false
element.classList.add('my-class'); // Adds the class if it isn't present yet
element.classList.remove('my-class'); // Removes the class if it’s present
element.classList.toggle('my-class'); // Adds if not present, else removes

classlist.contain in javascript

let span = document.querySelector("span");
let classes = span.classList;
let result = classes.contains("d");
if (result) {
  span.textContent = "The classList contains 'c'";
} else {
   span.textContent = "The classList does not contain 'c'";
}

js classlist

// querySelector() - you can use element name / #id / .class
const varName = document.querySelector('div #idName .className');
// add class - classList.add()
varName.classList.add('someClassName'); // class name without the dot 
// remove class - classList.remove()
varName.classList.remove('someClassName');

classlist

// use the classList API to remove and add classes
div.classList.remove("foo");
div.classList.add("anotherclass");

.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', ... ]

classlist

classList.item(index);// Returns item in list by its index, or undefined if index >=list's length
classList.contains(token); // Returns true if list contains token, otherwise false.
classList.add(token1[, ...tokenN]); // Adds token to the list.
classList.remove(token1[, ...tokenN]); // Removes the token from the list.
classList.replace(oldToken, newToken); // Replaces token with newToken.
classList.supports(token); // Returns true if token is in associated attribute's supported tokens.
classList.toggle(token[, force]); // Removes token if it exists, or adds to list if it doesn't. Returns a boolean true if conteined, false otherwise.
classList.entries(); // Returns an iterator through all key/value pairs contained in this object.
classList.forEach(callback[ ,thisArg]); // Executes a provided callback function once per DOMTokenList element.
classList.keys(); // Returns an iterator through all keys of the key/value pairs contained in this object.
classList.values(); // Returns an iterator through all values of the key/value pairs contained in this object.