Init DOM examples

2026-09-22 13:38:43 +00:00 · 2023-08-15 17:26:08 +07:00
parent f7f013c5e8
commit 3671d1fcfe
2 changed files with 87 additions and 0 deletions
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Javascript Training</title>
+  </head>
+  <style>
+    body {
+      max-width: 600px;
+      margin: 0 auto;
+      font-family: sans-serif;
+    }
+    .active {
+      border: 2px solid blue;
+    }
+
+    .warning {
+      border: 2px solid red;
+    }
+
+    .hidden {
+      display: none;
+    }
+
+    .dashedBox {
+      border: 2px dashed lightgray;
+      padding: 15px;
+      margin: 5px;
+    }
+  </style>
+
+  <body>
+    <h1>DOM Training</h1>
+    <img
+      src="https://cdn.discordapp.com/attachments/1090895809098289185/1139820954860671106/IMG_0115.jpg"
+    />
+
+    <div class="dashedBox">Div 1</div>
+    <div class="active dashedBox">Div 2</div>
+
+    <div class="myDiv">Div</div>
+
+    <script src="./index.js"></script>
+  </body>
+</html>
@@ -0,0 +1,41 @@
+const img = document.querySelector("img");
+
+console.log(img.hasAttribute("src"));
+console.log(img.getAttribute("src"));
+img.removeAttribute("src");
+
+img.setAttribute(
+  "src",
+  "https://cdn.discordapp.com/attachments/1090895809098289185/1140311522883670217/make_exp_1.jpg"
+);
+img.setAttribute("width", "711.2");
+img.setAttribute("height", "400px");
+
+// Select the first div
+const div = document.querySelector("div");
+
+// Assign the warning class to the first div
+div.className = "warning";
+
+// Select the second div by class name
+const activeDiv = document.querySelector(".active");
+
+activeDiv.classList.add("hidden"); // Add the hidden class
+// activeDiv.classList.remove("hidden"); // Remove the hidden class
+activeDiv.classList.toggle("hidden"); // Switch between hidden true and false
+activeDiv.classList.replace("active", "warning"); // Replace active class with warning class
+
+// Select div
+const myDiv = document.querySelector(".myDiv");
+
+console.log(myDiv);
+// Apply style to div
+myDiv.setAttribute("style", "text-align: center");
+myDiv.style.height = "200px";
+myDiv.style.width = "500px";
+myDiv.style.border = "2px solid black";
+
+myDiv.style.borderRadius = "50%";
+myDiv.style.display = "flex";
+myDiv.style.justifyContent = "center";
+myDiv.style.alignItems = "center";