Traversing the DOM 🫡✨

yasirupanduka99 · yasirupanduka99 · commit add81ebdcc0c · 2024-06-01T00:50:33.000+05:30
diff --git a/30_JavaScript - Traversing the DOM/index.html b/30_JavaScript - Traversing the DOM/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hello World!</title>
+</head>
+
+<body>
+
+    <div class="content">
+        <div class="firstContentDiv">
+            <h5>Header is this!</h5>
+        </div>
+        <div class="secondContentDiv">
+            <h2 id="page-title">Head Title</h2>
+        </div>
+        <div class="thirdContentDiv">
+            <p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
+                took a galley of type and scrambled it to make a type specimen book. It has survived not only five
+                centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
+                popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
+                recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+        </div>
+        <div class="fourthContentDiv">
+            <h5>This is footer</h5>
+            <h2>Baba papki nam</h2>
+        </div>
+    </div>
+
+    <script src="./script.js"></script>
+
+</body>
+
+</html>
diff --git a/30_JavaScript - Traversing the DOM/script.js b/30_JavaScript - Traversing the DOM/script.js
@@ -0,0 +1,19 @@
+document.write("Traversing the DOM in JavaScript!" + "<br /><br />");
+
+/*
+    What is Traversing the DOM?
+        - Traversing the DOM (Document Object Model) refers to the process of navigating through the different elements in an HTML or XML document using JavaScript. The DOM is a hierarchical tree-like structure that represents the different elements in a web page, and each element is represented as a node in the tree.
+
+*/
+
+let myContentDiv = document.getElementsByClassName("content");
+console.log(myContentDiv);
+
+// Navigating content div to inside element. finding tagname h2 inside the content div. This naviagating is Traversing the DOM
+let myH2 = myContentDiv[0].getElementsByTagName("h2");
+console.log(myH2);
+
+let changedHeader = myH2[0].innerHTML = "Header Title Changed Using JavaScript";
+
+let header = document.getElementById("page-title").innerHTML;
+console.log(header);
