Day 6 - DOM Basics and Manipulation

IshanviChauhan · Feb 19, 2025 · 71de65b · 71de65b
1 parent dcad4a1
commit 71de65b
Show file tree

Hide file tree

Showing 4 changed files with 161 additions and 0 deletions.
diff --git a/Day6/domBasics.js b/Day6/domBasics.js
@@ -0,0 +1,37 @@
+// console.dir(window);  //window object repreasents BOM (Browser Object Model)
+// console.dir(document); //document object represents DOM (Document Object Model)
+// console.log(document); 
+//document is givrn by window. So, window.document -> document
+
+//Write generic text in html
+// document.write("Hello World");
+
+/*-------------------------------------------------------------------------*/
+
+//Finding element 
+//1. document.getElementById("id-name") --> returns single element or null
+const elem1 = document.getElementById("text-1");
+console.dir(elem1);
+console.log(elem1);
+elem1.style.color = "purple";
+
+//2. document.getElementsByClassName("class-name") --> iterable[] / returns array of elements [.....] (HTML Collections) or empty array []
+const elem2 = document.getElementsByClassName("heading-2");
+console.dir(elem2);
+console.log(elem2);
+elem2[0].style.color = "red";
+
+//3. document.getElementsByTagName() --> iterable[] / returns array of elements [.....] (HTML Collections) or empty array []
+const elem3 = document.getElementsByTagName("p");
+console.dir(elem3);
+console.log(elem3);
+elem3[0].style.backgroundColor = "yellow";
+
+//4. document.querySelector() --> returns single element or null
+const elem4 = document.querySelector(".heading-1");
+console.dir(elem4);
+console.log(elem4);
+elem4.style.textDecoration = "underline";
+
+//5. document.querySelectorAll() --> returns array of elements
+
diff --git a/Day6/domBasicsIndex.html b/Day6/domBasicsIndex.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <h1 class="heading-1">DOM</h1>
+    <div>
+        <h4 class="heading-2">Hello!</h4>
+        <p id="text-1">Lorem, ipsum.</p>
+    </div>
+
+    <script src="domBasics.js"></script>
+</body>
+</html>
diff --git a/Day6/domManipulation.js b/Day6/domManipulation.js
@@ -0,0 +1,76 @@
+// console.dir(document);
+// console.dir(document.children);
+// console.dir(document.children[0]);
+// console.dir(document.children[0].children[1]);
+// console.dir(document.children[0].children[1].children);
+
+//H1 Color Change:
+// console.dir(document.children[0].children[1].children[0].style.color = "red");
+
+//Outer div bg = Blue and inner div bg = yellow:
+
+// console.dir(document.children[0].children[1].children[1].style.backgroundColor = "blue");
+// console.dir(document.children[0].children[1].children[1].children[0].style.backgroundColor = "yellow");
+// console.dir(document.children[0].children[1].children[1].children[1].style.backgroundColor = "yellow");
+// console.dir(document.children[0].children[1].children[1].children[2].style.backgroundColor = "yellow");
+// console.dir(document.children[0].children[1].children[1].children[3].style.backgroundColor = "yellow");
+
+//OR
+
+// const outerDiv = document.querySelector("div");
+// outerDiv.style.backgroundColor = "blue";
+
+// outerDiv.children[0].style.backgroundColor = "yellow";
+// outerDiv.children[1].style.backgroundColor = "yellow";
+// outerDiv.children[2].style.backgroundColor = "yellow";
+// outerDiv.children[3].style.backgroundColor = "yellow";
+
+//OR
+
+// const divChildrean = Array.from(outerDiv.children);
+// divChildrean.forEach((child) => {
+//     child.style.backgroundColor = "yellow";
+// });
+
+//OR
+
+// const divChildrean = Array.from(document.querySelectorAll("div div"));
+// divChildrean.forEach((child) => {
+//     child.style.backgroundColor = "yellow";
+// });
+
+/*-------------------------------------------------------------------------*/
+
+const mappings = {
+    Invitation: "You are invited for event",
+    Reminder: "You are reminded for task",
+    Notice: "You have a notice from college",
+    Message: "You have 7 messages",
+};
+
+// Array.from(outerDiv.children).forEach((child) => {
+//     let key = child.children[0].innerText;
+    // console.log(key);
+//     child.children[1].innerText = mappings[key];
+// });
+
+/*-------------------------------------------------------------------------*/
+//append, appendChild, remove, removeChild, prepend 
+
+const newElement = document.createElement("div");
+// newElement.innerText = "Hi from DOM";
+const rootElement = document.querySelector("body");
+rootElement.appendChild(newElement);
+
+console.log(Object.entries(mappings));
+
+Object.entries(mappings).forEach((elem) => {
+    const newChildDiv = document.createElement("div");
+    // newChildDiv.innerText = "Hello from DOM!";
+    newChildDiv.style.border = "1px solid red";
+    newChildDiv.innerHTML = `
+        <h4 style="color:blue">${elem[0]}</h4>
+        <p>${elem[1]}</p>
+    `;
+    newElement.appendChild(newChildDiv);
+});
diff --git a/Day6/domManipulationIndex.html b/Day6/domManipulationIndex.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <h1>Dom Example 1</h1>
+    <div>
+        <div>
+            <h4>Invitation</h4>
+            <p>Lorem ipsum dolor sit amet.</p>
+        </div>
+        <div>
+            <h3>Reminder</h3>
+            <p>Lorem ipsum dolor sit.</p>
+        </div>
+        <div>
+            <h4>Notice</h4>
+            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quibusdam, maxime?</p>
+        </div>
+        <div>
+            <h3>Message</h3>
+            <p>Lorem ipsum dolor sit.</p>
+        </div>
+    </div>
+
+    <script src="domManipulation.js"></script>
+</body>
+</html>