DEV Community

Cover image for HTML DOM
QUBE
QUBE

Posted on

HTML DOM

#htmldom #domprograms #domexamples

The HTML DOM (Document Object Model) is a structured representation of a web page that allows developers to access, modify, and control its content and structure using JavaScript.

  • It powers most dynamic website interactions, enabling features like real-time updates, form validation, and interactive user interfaces.
  • The HTML Document Object Model is a tree structure, where each HTML tag becomes a node in the hierarchy.

Structure of the HTML DOM
If we imagine our webpage as a tree:

  • The document is the root.
  • HTML tags like html, head and body are branches.
  • Attributes, text, and other elements are the leaves.

Working Of DOM
The DOM connects your webpage to JavaScript, allowing you to:

  • Access elements .
  • Modify Content.
  • React to Events.
  • Create or remove elements dynamically.

Types of DOM:
The DOM is seperated into 3 parts.

  • Core DOM - It is standard model for all document types.
  • XML DOM - It is standard model for XML Documents.
  • HTML DOM: It is standard model for HTML documents .

Selecting elements in the document

getElementById()
In HTML, ids are used as unique identifiers for the HTML elements. This means you cannot have the same id name for two different elements.

<p id="para1">This is my first paragraph.</p>
<p id="para2">This is my second paragraph.</p>
Enter fullscreen mode Exit fullscreen mode 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Browser</title>
</head>
<body>
    <p id="para">DOM</p>
    <button id="btn" onclick="change()">Change</button>
  <script>
    const p1=document.getElementById("para");
    function change() {
        p1.innerText="Welcome DOM"
    }
  </script>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

O/P

  • querySelector() (TBD)
  • querySelectorAll() (TBD)

*Simple DOM Exercises *

<html>
<!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>
    <img id="bulbimg" src="https://www.w3schools.com/js/pic_bulboff.gif">
    <button id="btn">ON</button>
</body>
<script>
    const img=document.getElementById("bulbimg");
    const button=document.getElementById("btn");
    btn.addEventListener('click',bulb);
    function bulb(){
        if(img.src=="https://www.w3schools.com/js/pic_bulboff.gif"){
            img.src="https://www.w3schools.com/js/pic_bulbon.gif";
            btn.innerText="OFF";
        }
        else{
            img.src="https://www.w3schools.com/js/pic_bulboff.gif";
            btn.innerText="ON";
        }

    }
</script>
</html>
Enter fullscreen mode Exit fullscreen mode

O/P


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input id="in" type="password">
   <button id="btn">Show</button>
</body>
<script>
    const inp=document.getElementById("in")
    const btn=document.getElementById("btn")
    btn.addEventListener('click',showhide);
    function showhide(){
    if(inp.type=="password"){
        inp.type="text"
        btn.innerText="Hide"
    }
    else{
        inp.type="password"
        btn.innerText="Show"
    }
}

</script>
</html>
Enter fullscreen mode Exit fullscreen mode

O/P

References:

w3schools.com

Top comments (0)