DOM stands for Document Object Model.
The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents a web page as a tree-like structure of objects, where every HTML element becomes an object that JavaScript can access and manipulate.
Using the DOM, JavaScript can:
- Change HTML content dynamically.
- Change HTML attributes.
- Modify CSS styles.
- Add new elements.
- Remove existing elements.
- Handle user events dynamically.
Definition:
The Document Object Model (DOM) is a tree representation of an HTML document where each node represents an element, attribute, or piece of text.
The browser automatically creates the DOM when an HTML page is loaded.
DOM is used because it allows JavaScript to:
- Access HTML elements.
- Change the content of web pages.
- Change CSS properties dynamically.
- Add or delete elements.
- React to user interactions.
- Create dynamic and interactive websites.
<!DOCTYPE html>
<html lang="en">
<head>
<title>JS</title>
</head>
<body>
<p>Hello</p>
<a href="https://www.kodnest.com">
Visit KodNest
</a>
</body>
</html>The above HTML page is represented internally by the browser as:
Document
|
html
|
├── head
| |
| └── title
| |
| └── "JS"
|
└── body
|
├── p
| |
| └── "Hello"
|
└── a
|
├── href="https://www.kodnest.com"
|
└── "Visit KodNest"
This structure is called the DOM Tree.
The DOM contains different types of nodes.
The entire HTML document.
document
HTML tags are called Element Nodes.
Examples:
<html>
<head>
<body>
<p>
<a>Attributes of HTML elements.
Example:
<a href="https://www.kodnest.com">Attribute:
href
The text inside an element.
Example:
<p>Hello</p>Text Node:
Hello
A node that does not have any child nodes is called a Leaf Node.
Examples:
"Hello"
"Visit KodNest"
href attribute
These are terminal nodes of the DOM Tree.
JavaScript provides several methods to access HTML elements.
Syntax:
document.getElementById("id")Example:
<p id="demo">Hello</p>
<script>
document.getElementById("demo").innerHTML =
"Welcome to JavaScript";
</script>Output:
Welcome to JavaScript
Selects elements using tag names.
Example:
document.getElementsByTagName("p")Returns:
Collection of paragraph tags
Selects elements by class name.
Example:
document.getElementsByClassName("course")Selects the first matching element.
Example:
document.querySelector("#demo")Selects all matching elements.
Example:
document.querySelectorAll(".course")Example:
<p id="demo">Hello</p>
<script>
document.getElementById("demo").innerHTML =
"Welcome to DOM";
</script>Output:
Before:
Hello
After:
Welcome to DOM
Example:
<p id="demo">Hello</p>
<script>
document.getElementById("demo").style.color =
"red";
</script>Output:
Hello
Color:
Red
Example:
<a id="link"
href="https://google.com">
Google
</a>
<script>
document.getElementById("link")
.href =
"https://kodnest.com";
</script>Output:
The link now redirects to:
https://kodnest.com
Example:
var p =
document.createElement("p");
p.innerHTML =
"New Paragraph";
document.body.appendChild(p);Output:
New Paragraph
A new paragraph is dynamically created.
Example:
var ele =
document.getElementById("demo");
ele.remove();The element is removed from the webpage.
| Property | Purpose |
|---|---|
| innerHTML | Change HTML content |
| innerText | Change only text |
| style | Modify CSS |
| value | Read input values |
| href | Get or set link URL |
| src | Get or set image path |
| Method | Purpose |
|---|---|
| getElementById() | Select element by ID |
| getElementsByClassName() | Select by class |
| getElementsByTagName() | Select by tag |
| querySelector() | First matching element |
| querySelectorAll() | All matching elements |
| createElement() | Create element |
| appendChild() | Add element |
| remove() | Delete element |
Answer:
DOM stands for Document Object Model.
It is a tree representation of an HTML document that allows JavaScript to access and manipulate web pages dynamically.
Answer:
The Browser creates the DOM automatically when the HTML page loads.
Answer:
The hierarchical tree representation of HTML elements is called the DOM Tree.
Answer:
A node without any child nodes is called a Leaf Node.
Examples:
- Text Nodes
- Attribute Nodes
Answer:
document.getElementById("id")Answer:
innerHTML is used to read or modify HTML content inside an element.
Example:
element.innerHTML = "Hello";Answer:
It returns the first element matching a CSS selector.
Example:
document.querySelector("#demo")Answer:
document.createElement()Answer:
element.remove()Answer:
It adds a child element to a parent element.
- DOM stands for Document Object Model.
- The browser creates the DOM automatically.
- HTML is represented as a Tree Structure.
- Every HTML element becomes an Object.
- JavaScript uses DOM to manipulate HTML dynamically.
innerHTMLchanges content.stylechanges CSS.createElement()creates new elements.appendChild()adds elements.remove()deletes elements.
The Document Object Model (DOM) is one of the most important concepts in JavaScript. It acts as a bridge between HTML and JavaScript, allowing developers to access, modify, create, and remove webpage elements dynamically. Understanding DOM manipulation is essential for building interactive websites, handling events, validating forms, and developing modern web applications.