Here’s a beginner-to-intermediate guide to DOM Manipulation — one of the core skills in web development.
🧠 What is the DOM?
DOM (Document Object Model) is a tree-like structure that represents your web page in memory. Each element, attribute, and piece of text is a node that JavaScript can access and modify.
🔧 Why DOM Manipulation Matters
Using JavaScript, you can:
Change content (
text,HTML, etc.)Add/remove elements
Handle user interactions (click, keypress)
Dynamically update styles and layout
✅ Accessing Elements
📌 JavaScript Selectors
📝 Changing Content
textContentis for plain text.innerHTMLcan render HTML tags.
🎨 Changing Styles
Use
.style.propertyfor inline CSS.
➕ Creating and Adding Elements
➖ Removing Elements
Or older method:
🔁 Loop Through Elements
🧩 Handling Events
You can respond to events like
click,input,keydown,submit, etc.
🎯 Example: Toggle Dark Mode
In CSS:
🧪 Common DOM APIs
| Task | Method |
|---|---|
| Create element | document.createElement() |
| Append child | element.appendChild() |
| Set attributes | element.setAttribute() |
| Add event | element.addEventListener() |
| Select element | querySelector(), getElementById() |
✅ Summary
Use
querySelector()andquerySelectorAll()for clean, modern selection.Modify content with
.textContentor.innerHTML.Add interactivity with
.addEventListener().DOM manipulation is the foundation of JS frameworks like React, Vue, etc.
