-
Hajipur, Bihar, 844101
Hajipur, Bihar, 844101
JS Basics
JS Variables & Operators
JS Data Types & Conversion
JS Numbers & Math
JS Strings
JS Dates
JS Arrays
JS Control Flow
JS Loops & Iteration
JS Functions
JS Functions
Function Definitions
Function Parameters
Function Invocation
Function Call
Function Apply
Function Bind
Function Closures
JS Arrow Function
JS Objects
JS Objects
JS Object Properties
JS Object Methods
JS Object Display
JS Object Constructors
Object Definitions
Object Get / Set
Object Prototypes
Object Protection
JS Classes & Modules
JS Async Programming
JS Advanced
JS Destructuring
JS Bitwise
JS RegExp
JS Precedence
JS Errors
JS Scope
JS Hoisting
JS Strict Mode
JS this Keyword
JS HTML DOM
DOM Intro
DOM Methods
DOM Document
DOM Elements
DOM HTML
DOM Forms
DOM CSS
DOM Animations
DOM Events
DOM Event Listener
DOM Navigation
DOM Nodes
DOM Collections
DOM Node Lists
JS BOM (Browser Object Model)
JS Web APIs
Web API Intro
Web Validation API
Web History API
Web Storage API
Web Worker API
Web Fetch API
Web Geolocation API
JS AJAX
AJAX Intro
AJAX XMLHttp
AJAX Request
AJAX Response
AJAX XML File
AJAX PHP
AJAX ASP
AJAX Database
AJAX Applications
AJAX Examples
JS JSON
JSON Intro
JSON Syntax
JSON vs XML
JSON Data Types
JSON Parse
JSON Stringify
JSON Objects
JSON Arrays
JSON Server
JSON PHP
JSON HTML
JSON JSONP
JS Graphics & Charts
The DOM (Document Object Model) is a programming interface that allows JavaScript to interact with HTML and XML pages. It represents the webpage as a tree of objects. Each HTML element, text, and comment becomes a node in this tree.
Think of it like a blueprint of your webpage. JavaScript can use this blueprint to read, change, or add content, update styles, or respond to user actions.
The DOM is essential because it allows websites to become interactive and dynamic. Without it, webpages would be static. Some main benefits include:
Dynamic Updates – Change text, images, or sections without reloading the page.
User Interaction – Buttons, forms, and menus respond to clicks or typing.
Element Access – Grab and manipulate any HTML element.
Event Handling – Listen for clicks, mouse movements, or keyboard input.
Animations and Effects – Create interactive animations using DOM updates.
In short, the DOM makes your webpage live and responsive.
The DOM is organized as a tree of nodes. Each HTML element, attribute, and text is a node connected in a parent-child relationship.
Example DOM tree:
Document (root)
├─ html
│ ├─ head
│ │ ├─ title
│ │ └─ meta
│ └─ body
│ ├─ h1
│ ├─ p
│ └─ div
│ └─ a
Document Node – The root of the DOM tree, representing the entire webpage.
Element Nodes – Represent HTML tags like <p>
, <div>
, <h1>
.
Text Nodes – Contain the text inside elements.
Attribute Nodes – Represent attributes like id
, class
, or src
.
Comment Nodes – Represent HTML comments (<!-- comment -->
).
JavaScript interacts with the DOM through the document
object, which is the entry point to the page structure.
// Access the document object
console.log(document);
// Get the page title
console.log(document.title);
// Change the title dynamically
document.title = "My Dynamic Webpage";
This example shows how JavaScript can read and update webpage content in real-time.
HTML Example:
<!DOCTYPE html>
<html>
<head>
<title>Original Title</title>
</head>
<body>
<h1>Welcome to DOM Tutorial</h1>
<p>This is the first paragraph.</p>
</body>
</html>
JavaScript Example:
// Change heading text
document.querySelector("h1").textContent = "DOM Made Easy";
// Update paragraph text
document.querySelector("p").textContent = "This paragraph is updated using JavaScript.";
// Add a new paragraph
let newPara = document.createElement("p");
newPara.textContent = "This paragraph is added dynamically.";
document.body.appendChild(newPara);
The webpage updates without refreshing, showing the power of the DOM.
The DOM tree allows you to move between nodes:
Parent Node – Access the parent of an element:
let p = document.querySelector("p");
console.log(p.parentNode); // body
Child Nodes – Access children of an element:
let bodyChildren = document.body.children;
console.log(bodyChildren); // HTMLCollection
Sibling Nodes – Access elements at the same level:
let firstPara = document.querySelector("p");
console.log(firstPara.nextElementSibling); // null if no sibling
DOM traversal helps you target and manipulate specific parts of a page.
Live DOM – Represents the current state of the page. Any changes are immediately visible.
DOM vs HTML – HTML is static, the DOM is a live interactive version of your page.
Event-driven programming – DOM enables user interactions like clicks or typing.
Dynamic Changes – You can create, delete, or modify elements without reloading the page.
HTML:
<button id="myBtn">Click Me</button>
<p id="msg"></p>
JavaScript:
document.getElementById("myBtn").addEventListener("click", function() {
document.getElementById("msg").textContent = "Button clicked! DOM is working!";
});
Clicking the button updates the paragraph instantly, showing how DOM enables interactivity.
The DOM is a core part of modern web development. With the DOM, you can:
Change text, images, and styles dynamically
Add, remove, or modify HTML elements
Respond to user actions like clicks, typing, or scrolling
Create interactive effects and animations
Mastering the DOM is the foundation for advanced topics like DOM Methods, Events, and Animations. Once you understand the DOM structure and navigation, you can control every part of a webpage using JavaScript.
Write JavaScript to change the page title to "DOM Practice Page".
Change the text of the first <h1>
element on the page to "Welcome to DOM Tutorial".
Add a new paragraph <p>
with any text content to the end of the <body>
using createElement
and appendChild
.
Change the color of all <p>
elements to blue using querySelectorAll
and a loop.JavaScript DOM Tutorial | Manipulation & Examples
Select any element on the page and log its parent node to the console using parentNode
.
Select the <body>
and log all its child elements using children
.
Select the first <p>
and log its next and previous sibling elements using nextElementSibling
and previousElementSibling
.
Create a button with text "Click Me". On click, it should update a paragraph to "Button clicked!" using addEventListener
.
Remove the last paragraph from the page using removeChild
or remove
.
Add an image to the page and then change its src
attribute to a new image URL using setAttribute
.
JS Basics
JS Variables & Operators
JS Data Types & Conversion
JS Numbers & Math
JS Strings
JS Dates
JS Arrays
JS Control Flow
JS Loops & Iteration
JS Functions
JS Functions
Function Definitions
Function Parameters
Function Invocation
Function Call
Function Apply
Function Bind
Function Closures
JS Arrow Function
JS Objects
JS Objects
JS Object Properties
JS Object Methods
JS Object Display
JS Object Constructors
Object Definitions
Object Get / Set
Object Prototypes
Object Protection
JS Classes & Modules
JS Async Programming
JS Advanced
JS Destructuring
JS Bitwise
JS RegExp
JS Precedence
JS Errors
JS Scope
JS Hoisting
JS Strict Mode
JS this Keyword
JS HTML DOM
DOM Intro
DOM Methods
DOM Document
DOM Elements
DOM HTML
DOM Forms
DOM CSS
DOM Animations
DOM Events
DOM Event Listener
DOM Navigation
DOM Nodes
DOM Collections
DOM Node Lists
JS BOM (Browser Object Model)
JS Web APIs
Web API Intro
Web Validation API
Web History API
Web Storage API
Web Worker API
Web Fetch API
Web Geolocation API
JS AJAX
AJAX Intro
AJAX XMLHttp
AJAX Request
AJAX Response
AJAX XML File
AJAX PHP
AJAX ASP
AJAX Database
AJAX Applications
AJAX Examples
JS JSON
JSON Intro
JSON Syntax
JSON vs XML
JSON Data Types
JSON Parse
JSON Stringify
JSON Objects
JSON Arrays
JSON Server
JSON PHP
JSON HTML
JSON JSONP
JS Graphics & Charts