What is DOM?
DOM (Document Object Model) is a programming interface provided by the browser that represents an HTML document as a tree of objects.
It allows JavaScript to access, modify, create, and delete HTML elements dynamically.
In simple words:
DOM is the bridge between HTML and JavaScript.
Without the DOM, JavaScript cannot change the content or appearance of a webpage after it has loaded.
How DOM Works
Suppose we have the following HTML:
<!DOCTYPE html>
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<h1>Hello World</h1>
<p>Learning JavaScript DOM</p>
<button>Click Me</button>
</body>
</html>
The browser converts this HTML into a tree structure:
Document
│
└── html
│
├── head
│ └── title
│
└── body
├── h1
├── p
└── button
JavaScript accesses these nodes through the DOM.
Why Do We Use DOM?
DOM allows JavaScript to:
- Read HTML elements
- Change text content
- Change styles
- Change attributes
- Create new elements
- Remove elements
- Handle user events
- Build interactive web pages
Selecting Elements
1. getElementById()
Selects one element using its id.
let heading = document.getElementById("title");
2. getElementsByClassName()
Returns all elements having the same class.
let items = document.getElementsByClassName("card");
Returns an HTMLCollection.
3. getElementsByTagName()
Selects elements using their tag.
let paragraphs = document.getElementsByTagName("p");
4. querySelector()
Returns the first matching element.
document.querySelector(".box");
document.querySelector("#title");
document.querySelector("p");
5. querySelectorAll()
Returns every matching element.
document.querySelectorAll(".card");
Returns a NodeList.
Changing Content
innerText
Changes visible text.
heading.innerText = "Welcome";
innerHTML
Changes HTML content.
heading.innerHTML = "<span>Hello</span>";
textContent
Returns all text including hidden text.
heading.textContent
Working with Form Elements
value
Used for input and textarea.
let username = input.value;
Example:
textbox.value = "";
Clears the textbox.
Changing Attributes
src
image.src = "image.png";
href
link.href = "https://example.com";
id
element.id = "header";
className
element.className = "active";
Styling Elements
element.style.color = "red";
element.style.backgroundColor = "yellow";
element.style.fontSize = "24px";
element.style.display = "none";
Creating Elements
let p = document.createElement("p");
Adding Elements
parent.appendChild(p);
Removing Elements
element.remove();
Events in DOM
Events are actions performed by users.
Examples:
- click
- dblclick
- input
- change
- mouseover
- mouseout
- keydown
- keyup
- submit
- focus
- blur
Event Example
<button onclick="show()">Click</button>
function show(){
alert("Button clicked");
}
Reading Input
<input id="name">
let value = document.getElementById("name").value;
Updating Text
document.getElementById("result").innerText = value;
References:
https://www.w3schools.com/js/js_htmldom.asp
https://www.geeksforgeeks.org/javascript/dom-document-object-model/
Top comments (0)