Day 1 of Document Object Model(DOM)

What is DOM?
● It is a programming interface for web documents.
● It represents an HTML document as a tree structure where each part of the document is an object.
● This is used to make changes inside the program during the run time.

Inside the object model, Javascript get the power it needs to create dynamic HTML:
● JavaScript can change all the HTML elements in the page.
● JavaScript can change all the HTML attributes in the page.
● JavaScript can change all the CSS styles in the page.

Ex:

<h1 id="txt"> Hello !</h1>
<button onclick="changeTxt()"> Logout </button>

<script>
  function changeTxt() {
    document.getElementById("txt").innerText = "hii";
  }
</script>

Output: Hello changes to hii.

Task 1: Change text from logout to login

<!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 id="txt">Hello!</h1>
    <button id ="btn" onclick="changeTxt()">Logout</button>

  <script>
      function changeTxt(){
     // document.getElementById("txt").innerText="hii";
        document.getElementById("btn").innerText="Login";

        }
    </script>

</body>
</html>

Output: Logout → Login

Task 2: Show/Hide password

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Show/Hide Password</title>
</head>

<body>
    <h1>Show/Hide Password Example</h1>

    <input type id="password">
    <button onclick="viewPassword()">Show/Hide</button>

    <script>
        function viewPassword() {
            let pwd = document.getElementById("password");
            if (pwd.type == "password") {
                pwd.type = "text"; 
            } else {
                pwd.type = "password";
            }
        }
    </script>
</body>

</html>

DEV Community

Day 1 of Document Object Model(DOM)

Top comments (0)