Introduction to DOM (Document Object Model)
Subject: JavaScript
The DOM (Document Object Model) is a programming interface provided by browsers that represents the structure of a web page as a tree of objects. It allows developers to access, modify, add, or remove HTML elements dynamically using JavaScript.
When a web page loads, the browser converts the HTML into a DOM that JavaScript can interact with.
What is the DOM?
- The DOM represents the document (HTML or XML) as a tree structure.
- Each HTML element is an object (node) in this tree.
- JavaScript can read and change content, attributes, styles, and structure via the DOM.
Why is the DOM Important?
- Enables dynamic content updates without page reload.
- Allows interaction with elements (click, input, hover).
- Forms the foundation for most JavaScript-based UI features.
DOM Hierarchy Example
Example: Accessing and Modifying DOM Elements
Example Explained
document.getElementById("title"): Accesses the<h1>element..textContent: Updates the text inside the element.
This demonstrates how JavaScript interacts with HTML using the DOM.
Key Takeaways
- The DOM is the browser's internal representation of a webpage.
- JavaScript can access and manipulate the DOM using built-in methods.
- The DOM enables real-time updates and user interactivity.
- DOM elements can be selected by ID, class, tag name, and more.