1. DOM Basics
📌 What is the DOM?
The Document Object Model (DOM) is a programming interface for web documents.
- It represents the HTML page as a structured tree of objects.
- Each element, attribute, and piece of text in your HTML is a node in this tree.
- JavaScript can read, modify, add, or delete these nodes to change the page dynamically.
In short: The DOM is not the HTML itself—it’s the in-memory representation of the page that JavaScript interacts with.
🔄 How browsers convert HTML into a DOM tree
When you open a web page:
- Browser downloads HTML from the server.
- The HTML parser reads the code from top to bottom.
- Each tag becomes a node in a tree structure.
- The browser stores this tree in memory — that’s the DOM.
- CSS and JavaScript then work with this DOM to style and update it.
Example:
<html>
<body>
<h1>Hello</h1>
</body>
</html>
Becomes:
Document
└── html
└── body
└── h1
└── "Hello"
🌳 DOM Nodes
| Node Type | Example | Description |
|---|---|---|
| Document Node | document | The root of the DOM tree. |
| Element Node | <h1>, <p> | HTML tags. |
| Text Node | "Hello World" | The actual text inside elements. |
| Attribute Node | class="title" | The attributes of HTML elements. |
🏠 Real-life Analogy
Think of:
- HTML as the blueprint of a building.
- DOM as the actual building in front of you.
- JavaScript as the construction crew that can paint walls, move furniture, or add new rooms without rebuilding the whole structure.
📍 Visual DOM Tree Diagram
document
└── html
├── head
│ ├── meta
│ └── title ("My Page")
└── body
├── h1 ("Welcome")
└── p ("This is my page.")
Graphical version:
Imagine boxes connected with lines:
- Each box is a node (element, text, etc.).
- Lines show the parent-child relationships.
Examples :
<!DOCTYPE html>
<html>
<body>
<h1> Hello Students </h1>
<h1> Hello Friends </h1>
<p class="t1"> Welcome </p>
<p class="t1"> PSR Eng </p>
<p class="t1"> Sivakasi </p>
<p id="mytitle"> MyCourse</p>
<script type="text/javascript">
let m=document.getElementsByClassName("t1");
console.log(m[0].innerText)
console.log(m[1].innerText)
console.log(m[2].innerText)
let m3=document.getElementById("mytitle");
console.log(m3.innerText);
let myh=document.getElementsByTagName("h1");
console.log(myh[0].innerText);
console.log(myh[1].innerText);
</script>
</body>
</html>
Output :
Example : InnerText and InnerHTML
<!DOCTYPE html>
<html>
<body>
<div id="area1">
<h1> Student Area </h1>
<ul>
<li> 1. Aruna </li>
<li> 2. Kumar </li>
<li>3. Raj </li>
</ul>
</div>
<div id="area2">
<h1> Teachers Area </h1>
</div>
<script type="text/javascript">
let a1=document.getElementById("area1");
console.log(a1.innerText);
console.log(a1.innerHTML);
</script>
</body>
</html>
Output
Example : Inner HTML
<!DOCTYPE html>
<html>
<body>
<div id="area1">
</div>
<div id="area2">
<h1> Teacher Zone </h1>
</div>
<div id="area3">
</div>
<div id="area4">
</div>
<script type="text/javascript">
let a1=document.getElementById("area1");
a1.innerText="Students Zone";
let a2=document.getElementById("area2");
let tcopy=a2.innerText;
console.log(tcopy);
let a3=document.getElementById("area3");
a3.innerText=tcopy;
let myarea=document.getElementById("area4");
myarea.innerHTML="<b>Collage Zone</b>";
</script>
</body>
</html>
Output
Example :
Example :
<!DOCTYPE html>
<html>
<body>
<div id="mytable">
</div>
<script type="text/javascript">
let mytbl=document.getElementById("mytable");
mytbl.innerHTML="<h1>Course Details </h1><h2>Javascript</h2>";
</script>
</body>
</html>
Output
Example
<!DOCTYPE html>
<html>
<body>
<div id="mytable">
Welcome to My Home Page
</div>
<script type="text/javascript">
let mytbl=document.getElementById("mytable");
mytbl.style.color="Red";
mytbl.style.fontSize="20px";
</script>
</body>
</html>
Output :
Example for Events
<!DOCTYPE html>
<html>
<body>
<div id="mytable" tabindex="0">
Welcome to My Home Page
</div>
<script type="text/javascript">
let mytbl=document.getElementById("mytable");
//Common Events
//mytbl.addEventListener("click",
//mytbl.addEventListener("dblclick",
//mytbl.addEventListener("mouseout",
//mytbl.addEventListener("mouseover",
//mytbl.addEventListener("keydown",
//mytbl.addEventListener("keyup",
mytbl.addEventListener("mouseover",
function()
{
mytbl.style.color="Red";
mytbl.style.backgroundColor="Yellow";
mytbl.style.fontSize="20px";
});
mytbl.addEventListener("mouseout",
function()
{
mytbl.style.color="blue";
mytbl.style.backgroundColor="white";
mytbl.style.fontSize="20px";
});
mytbl.addEventListener("keydown",
function()
{
mytbl.style.color="green";
mytbl.style.backgroundColor="orange";
mytbl.style.fontSize="40px";
});
</script>
</body>
</html>
Leave a Reply