JavaScript DOM
JavaScript DOM (Document Object Model)
The DOM is a programming interface that allows JavaScript to interact with and manipulate web pages.
When a web page loads, the browser converts the HTML into a tree structure called the DOM Tree.
Example HTML:
Browser Converts It to a DOM Structure:
Why Do We Use DOM?
With the DOM, JavaScript can:
- Change HTML content
- Modify styles
- Add or remove elements
- Handle events (click, hover, keypress, etc.)
Selecting Elements
| Method | Example | Purpose |
|---|---|---|
getElementById() | document.getElementById("title") | Select by ID |
getElementsByClassName() | document.getElementsByClassName("text") | Select by class |
querySelector() | document.querySelector("p") | Select single element |
querySelectorAll() | document.querySelectorAll("p") | Select multiple |
Example: Change Text
Example: Change CSS Style
Working with Attributes
Creating and Adding Elements
Removing Elements
Handling Events
DOM Levels
| Level | Description |
|---|---|
| DOM Level 0 | Basic event model |
| DOM Level 1 | Node and document structure |
| DOM Level 2 | Style and advanced events |
| DOM Level 3 | Validation and XPath support |
Summary
| DOM Feature | Purpose |
|---|---|
| Read content | innerHTML, textContent |
| Modify content | innerHTML = ... |
| Style elements | .style.property = value |
| Create/remove elements | createElement(), remove() |
| Add events | addEventListener() |
