From aaf1b4137496ab48136d29b515d46aa0b8ed7dc4 Mon Sep 17 00:00:00 2001
From: Premjeet1804 <cs2054@global.org.in>
Date: Tue, 18 Oct 2022 13:32:20 +0530
Subject: [PATCH] classList-Methods.

---
 JavaScript/DOM/classList/js-classList.js | 45 ++++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 JavaScript/DOM/classList/js-classList.js

diff --git a/JavaScript/DOM/classList/js-classList.js b/JavaScript/DOM/classList/js-classList.js
new file mode 100644
index 0000000..781764a
--- /dev/null
+++ b/JavaScript/DOM/classList/js-classList.js
@@ -0,0 +1,45 @@
+// javascript classList method implementation---
+
+// Element.classList
+// The Element.classList is a read-only property that returns a live DOMTokenList collection of the class attributes of the element. This can then be used to manipulate the class list.
+
+// Using classList is a convenient alternative to accessing an element's list of classes as a space-delimited string via element.className.
+
+// Value
+// A DOMTokenList representing the contents of the element's class attribute. If the class attribute is not set or empty, it returns an empty DOMTokenList, i.e. a DOMTokenList with the length property equal to 0.
+
+// Although the classList property itself is read-only, you can modify its associated DOMTokenList using the add(), remove(), replace(), and toggle() methods.
+
+// Examples
+const div = document.createElement("div");
+div.className = "foo";
+
+// our starting state: <div class="foo"></div>
+console.log(div.outerHTML);
+
+// use the classList API to remove and add classes
+div.classList.remove("foo");
+div.classList.add("anotherclass");
+
+// <div class="anotherclass"></div>
+console.log(div.outerHTML);
+
+// if visible is set remove it, otherwise add it
+div.classList.toggle("visible");
+
+// add/remove visible, depending on test conditional, i less than 10
+div.classList.toggle("visible", i < 10);
+
+console.log(div.classList.contains("foo"));
+
+// add or remove multiple classes
+div.classList.add("foo", "bar", "baz");
+div.classList.remove("foo", "bar", "baz");
+
+// add or remove multiple classes using spread syntax
+const cls = ["foo", "bar"];
+div.classList.add(...cls);
+div.classList.remove(...cls);
+
+// replace class "foo" with class "bar"
+div.classList.replace("foo", "bar");