className & classList.add/remove()

last-endcode · last-endcode · commit 24904991982f · 2020-10-26T14:02:03.000+07:00
diff --git a/11_className-classList.js b/11_className-classList.js
@@ -0,0 +1,31 @@
+// className - for check class and add
+// classList
+
+const first = document.querySelector('.first');
+const second = document.querySelector('.second');
+const third = document.querySelector('.third');
+
+// this just for check class
+// const classValue = first.className;
+// console.log(classValue); //first
+
+// add first class here can multiple
+first.className = 'text colors';
+// but if separator like this
+first.className = 'text';
+//the last will select colors, and text class not
+first.className = 'colors';
+
+// classList
+//["second", value: "second"] value 0: is second
+// so u should need add / remove  syntax
+console.log(second.classList);
+
+// add class colors on second element
+// if u need 2 class use ('class1','class2')
+second.classList.add('colors');
+second.classList.add('text');
+
+// remove class first colors red
+first.classList.remove('colors');
+first.classList.add('text');
diff --git a/index.html b/index.html
@@ -5,12 +5,15 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>DOM</title>
     <style>
-      a {
-        display: inline-block;
-        color: #fff;
-        background: #333;
-        text-decoration: none;
-        padding: 0.375rem 1.25rem;
+      .colors {
+        color: white;
+        background: red;
+        padding: 0.35rem 0.75rem;
+        width: 16rem;
+      }
+
+      .text {
+        text-transform: uppercase;
       }
     </style>
   </head>
@@ -87,15 +90,20 @@ <h2>The Pirates</h2>
     <h3>Hello people</h3>
     <h2>Hello World</h2> -->
 
-    <!-- getAttribute, setAttribute -->
+    <!-- getAttribute, setAttribute
     <div class="container">
       <h2 class="title" id="titles">Hello World</h2>
       <a href="index.html" class="links">This Links</a>
       <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam,
         doloribus!
       </p>
-    </div>
+    </div> -->
+
+    <!-- className & classList -->
+    <h2 class="first">first element</h2>
+    <h2 class="second">second element</h2>
+    <h2 class="third">third element</h2>
 
     <!-- source js -->
     <!-- <script src="/01_getElementById.js"></script> -->
@@ -107,6 +115,7 @@ <h2 class="title" id="titles">Hello World</h2>
     <!-- <script src="/07_nextSibling_previous.js"></script> -->
     <!-- <script src="/08_nextElementSibling_previous.js"></script> -->
     <!-- <script src="/09_textContent.js"></script> -->
-    <script src="/10_getAttribute.js"></script>
+    <!-- <script src="/10_getAttribute.js"></script> -->
+    <script src="/11_className-classList.js"></script>
   </body>
 </html>
