JavaScript Tutorial
JavaScript DOM (Document Object Model)
The DOM (Document Object Model) is a programming interface that allows JavaScript to access, modify, and interact with HTML and CSS on a web page. Using the DOM, JavaScript can change content, styles, attributes, and respond to user actions.
In simple words: DOM = JavaScript’s way to control HTML
Without the DOM, JavaScript would not be able to change text, images, styles, or respond to user actions.
What Is the DOM?
When a web page loads, the browser converts the HTML into a tree-like structure called the DOM.
Example HTML:
<h1>Hello World</h1>
<p>Welcome to JavaScript</p>
The browser creates a structure like:
Each HTML element becomes an object that JavaScript can access and modify.
Why DOM Is Important?
The DOM allows you to:
- Change page content dynamically
- Update styles without reloading the page
- Handle user events (clicks, input, scroll)
- Build interactive web applications
Modern frameworks like React are built on top of DOM concepts.
DOM and JavaScript
JavaScript uses the document object to access the DOM.
console.log(document);
This object provides methods to:
- Select elements
- Modify content
- Handle events
DOM Is Not HTML
| HTML | DOM |
|---|---|
| Static markup | Dynamic object model |
| Written by developer | Created by browser |
| Cannot change itself | Can be changed using JavaScript |
DOM Is Platform-Independent
The DOM works across:
- Browsers
- Programming languages
- Operating systems
JavaScript is the most common language used to work with the DOM.
Real-World Example
document.getElementById("title").innerText = "Hello DOM";
This line changes the text of an HTML element instantly — without reloading the page.
DOM in Modern Web Development
Before learning:
- React
- Angular
- Vue
You must understand DOM basics, because these frameworks optimize DOM updates using techniques like the Virtual DOM.
Common Beginner Mistakes
- Trying to access elements before page load
- Confusing DOM with HTML
- Overusing inline JavaScript
Best Practices
- Write JavaScript at the bottom of the page or use defer
- Use modern DOM methods
- Keep HTML, CSS, and JS separate