classlist. JavaScript Dom

# Web Site Writing Basics

# javascript

# classlist

ClassList in JavaScript DOM is a property that allows us to handle the list of Class CSS assigned to that particular HTML element (Element) more easily and efficiently than editing the className property directly 💡 What is a classList? When you access an element .classList, you will receive an object called DOMTokenList, which is a list of all Class names separated by spaces (Space) in the class properties of Element itself. HTML < div id = "myDiv" class = "active large-text highlights" >...< / div >

JavaScriptlet myDiv = document.getElementById ('myDiv');

console.log (myDiv.classList);

/ / Result: DOMTokenList (3) ["active," "large-text," "highlight"]

🛠️ The main methods of the DOMTokenList classlist contain methods that are useful for adding, deleting, and examining different classes as follows: Example description methods of usaging.add (class1, class2,...) Add one or more Class names myDiv.classList.add ('new-style'); .remove (class1, class2,...) Delete Class one name or more myDiv.classlist.remove ('large-text', 'highlight'); .toggle (class, [force]) Toggle Class: If there is already a Class, delete it. If there is none, add to myDiv.classlist.toggle ('is-hidden'); .there is a Class). Check if there is a Class (restore true or false) if (Div.classic.contains ('active') {... } .replace (oldClass, newClass) Replace the old Class with the new Class myDiv.classList.replace ('new-style', 'celebrity-style'); the method of use starts by first accessing the Element that needs to be managed, and then running the method on the classlist feature: JavaScript / / 1.access Element.

Const button = document.querySelector ('# submit-btn ');

/ / 2.Add Class

button.classlist.add ('loading', 'disabled');

/ / < button id = "submit-btn" class = "loading disabled" >...

/ / 3. Check if there is a Class.

Let isLoading = button.classList.containing ('loading'); / / true

/ / 4.Remove Class

button .classlist.remove ('loading');

/ / < button id = "submit-btn" class = "disabled" >...

/ / 5.Toggle Class (Frequently used for menu opening / closing)

button.addEventListener ('click', () = > {

/ / If there is an 'active', it will be removed. If there is no, it will be added.

button.classlist.toggle ('active');

});

ClassList makes your code easier to read and manage Class more accurately than it is to handle className strings yourself.