š JavaScript DOM (Document Object Model) ā Explained Simply
The DOM (Document Object Model) is a programmatic interface that allows JavaScript to interact with and manipulate HTML and CSS of a webpage dynamically.
š§ The DOM turns your HTML page into a tree of nodes (elements, text, attributes) that JS can control.
š§± What Is the DOM?
Imagine this HTML:
Behind the scenes, the browser creates this structure:
ā Each tag becomes a node (an object you can access via JavaScript).
š Accessing the DOM
1. Selectors
2. Traversing Nodes
š§āšØ Manipulating Elements
š Change Content
šØ Change Style
š§± Change Attributes
š§© Creating/Removing Elements
š±ļø Event Handling
šÆ You can also use:
mouseoverkeydownsubmitchange
š§Ŗ Example: Toggle Dark Mode
š§° Common DOM Methods & Properties
| Method/Property | Description |
|---|---|
document.querySelector() | Select first matching element |
element.innerHTML | Get/set HTML inside element |
element.textContent | Get/set plain text |
element.classList | Add/remove CSS classes |
element.style | Inline styles |
document.createElement() | Create a new DOM element |
parent.appendChild() | Add element to DOM |
element.addEventListener() | Attach event listener |
Ā
š Learn More
š MDN DOM Guide
ā Summary
| What | DOM Lets You Do |
|---|---|
| Access elements | ā |
| Change content or styles | ā |
| Respond to user actions | ā |
| Build dynamic UIs | ā |
