Dome done

Wcoder547 · Wcoder547 · commit dcf62ea284ab · 2024-06-19T09:32:38.000+05:00
diff --git a/Dom/2nd.html b/Dom/2nd.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Create a new elemenet</title>
+  </head>
+  <body style="background-color: #212121; color: #fff">
+    <div class="parent">
+      <div class="day">Monday</div>
+      <div class="day">Tuesday</div>
+      <div class="day">Wednesday</div>
+      <div class="day">Thursday</div>
+    </div>
+
+    <script>
+      // console.log("is js working");
+      const parent = document.querySelector(".parent");
+      //   console.log(parent);
+      //   console.log(parent.children);
+      //   console.log(parent.children[0]);
+
+      for (let i = 0; i < parent.children.length; i++) {
+        // console.log(parent.children[i]);
+      }
+      //   console.log(parent.children[0].innerHTML);
+
+      //   console.log(parent.firstElementChild);
+      //   console.log(parent.lastElementChild);
+
+      const firstElem = document.querySelector(".day");
+      //console.log(firstElem);
+      //   console.log(firstElem.children); //length is 0
+
+      //console.log(firstElem.parentElement);
+      //console.log(firstElem.nextElementSibling.nextElementSibling); //wednesday
+      //console.log(firstElem.lastElementChild); //null
+      //   console.log(`Nodes  ${parent.childNodes}`);
+      console.log("Nodes", parent.childNodes);
+    </script>
+  </body>
+</html>
diff --git a/Dom/3rd.html b/Dom/3rd.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Creating a new elemenet</title>
+  </head>
+  <body style="background-color: #212121; color: #fff">
+    <div>hello world</div>
+
+    <script>
+      //console.log("hello world");
+      const div = document.createElement("div");
+      console.log(div);
+      div.className = "main";
+      div.id = Math.round(Math.random() * 10 + 1);
+      //console.log(div.id);
+      div.setAttribute("title", "waseem_title");
+      //   div.innerText = "waseem akram";
+      const textName = document.createTextNode("waseem akram");
+      div.style.backgroundColor = "green";
+      div.style.padding = "10px";
+      //   div.appendChild(textName)
+      div.appendChild(document.createTextNode("waseem akram"));
+      document.body.appendChild(div);
+    </script>
+  </body>
+</html>
diff --git a/Dom/4th.html b/Dom/4th.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Edit | Remove Element</title>
+  </head>
+  <body style="background-color: #212121; color: #fff">
+    <ul class="language">
+      <li class="js">Javascript</li>
+    </ul>
+
+    <script>
+      console.log("hello world");
+
+      function addLI(langname) {
+        const li = document.createElement("li");
+        li.innerHTML = `${langname}`;
+        document.querySelector(".language").appendChild(li);
+      }
+      addLI("python");
+      addLI("Rust");
+
+      function addTwoLi(langname) {
+        const li = document.createElement("li");
+        li.appendChild(document.createTextNode(langname));
+        document.querySelector(".language").appendChild(li);
+      }
+      addTwoLi("Ruby");
+      addTwoLi("dynamic Li");
+
+      //Edit
+      const secondLanguage = document.querySelector("li:nth-child(2)");
+      //   console.log(secondLanguage);
+      const newLi = document.createElement("li");
+      newLi.textContent = "PHP";
+      // console.log(newLi);
+      secondLanguage.replaceWith(newLi);
+      //   console.log(secondLanguage);
+
+      //Edit
+      const firstLang = document.querySelector("li:first-child");
+      firstLang.outerHTML = "<li>first language</li>";
+
+      //Remove..
+
+      const lastLang = document.querySelector("li:last-child");
+      lastLang.remove();
+    </script>
+  </body>
+</html>
