js-series/12-DOM-Manipulation-(Practical).html at main · jdcodebase/js-series · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>DOM Manipulation</title>

    <style>
      .active {
        color: white;
        background-color: green;
        padding: 10px;
      }
    </style>
  </head>

  <body>
    <h1 id="title">Hello World</h1>
    <p class="text">This is a paragraph</p>

    <input type="text" id="nameInput" />

    <button id="btn">Click Me</button>

    <script>
      // Selecting elements
      let heading = document.getElementById("title");
      let para = document.querySelector(".text");
      let input = document.getElementById("nameInput");
      let button = document.getElementById("btn");

      // Changing text content
      heading.textContent = "Welcome to DOM Manipulation";

      // innerHTML vs textContent
      para.innerHTML = "This is <b>Bold</b> text";
      // para.textContent = "This is <b>Bold</b> text";

      // Changing styles using JavaScript
      // heading.style.color = "blue";
      // heading.style.backgroundColor = "lightgray";
      // heading.style.padding = "10px";

      // Working with classList
      // heading.classList.add("active");
      // heading.classList.remove("active");
      // heading.classList.toggle("active");

      // Working with attributes
      input.setAttribute("placeholder", "Enter Your Name");
      input.removeAttribute("placeholder");

      // Creating elements dynamically
      let newHeading = document.createElement("h1");
      newHeading.innerHTML =
        "This heading is created using <b><i>JavaScript</i></b>";

      document.body.appendChild(newHeading);

      // Removing elements
      newHeading.remove();

      // Button click event
      button.addEventListener("click", function () {
        heading.textContent = "Button Clicked";
        heading.classList.toggle("active");
      });
    </script>
  </body>
</html>