getAttribute() & setAttribute()

last-endcode · last-endcode · commit 8f8b343833d7 · 2020-10-26T13:32:37.000+07:00
diff --git a/10_getAttribute.js b/10_getAttribute.js
@@ -1,7 +1,20 @@
 // getAttribute();
 // setAttribute();
 
-const first = document.querySelector('.first');
-// getAttribute
-const getIDs = first.getAttribute('id');
-console.log(getIDs);
+const heading = document.querySelector('.title');
+// getAttribute class and id from h2
+const classValue = heading.getAttribute('class');
+const idsValue = heading.getAttribute('id');
+console.log(classValue); // show title class
+console.log(idsValue); //show titles id
+
+// setAttribute
+// first move to p cz no have class
+const nextoP = heading.nextElementSibling.nextElementSibling;
+nextoP.setAttribute('id', 'text');
+nextoP.textContent = 'This is a text';
+
+// example again showLinks
+const links = document.querySelector('.links');
+const getLinks = links.getAttribute('href');
+console.log(getLinks);
diff --git a/index.html b/index.html
@@ -83,9 +83,20 @@ <h2>The Pirates</h2>
       <li>marine ford</li>
     </ul> -->
 
-    <!-- textContent and childNodes -->
+    <!-- textContent and childNodes
     <h3>Hello people</h3>
-    <h2>Hello World</h2>
+    <h2>Hello World</h2> -->
+
+    <!-- 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>
+
     <!-- source js -->
     <!-- <script src="/01_getElementById.js"></script> -->
     <!-- <script src="/02_getElementByTagName.js"></script> -->
@@ -95,7 +106,7 @@ <h2>Hello World</h2>
     <!-- <script src="/06_parentElement.js"></script> -->
     <!-- <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="/09_textContent.js"></script> -->
+    <script src="/10_getAttribute.js"></script>
   </body>
 </html>
