Beginner-Friendly Topic
Take your time - it's perfectly normal to re-read this topic 2-3 times. Try the interactive code editor below to run code yourself. Use the Q&A section to check your understanding before moving on. You've got this! 🚀
Modifying Elements
Once you select an element, you can change its content, style, classes, and attributes. These are the most common DOM operations - they make pages dynamic and responsive to user actions.
Modification Methods
- textContent - Get/set plain text: element.textContent = 'New text'
- innerHTML - Get/set HTML content: element.innerHTML = '<strong>Bold</strong>'
- classList - Add/remove/toggle CSS classes: element.classList.add('active')
- style - Inline styles: element.style.color = 'red'. Use classList for multiple styles
- setAttribute/getAttribute - element.setAttribute('data-id', '123')
- ⚠️ Security - Never put user input in innerHTML (XSS attacks). Use textContent instead
Modifying Elements Code
// textContent vs innerHTML
const heading = document.querySelector("h1");
// heading.textContent = "New Heading"; // safe, plain text
// heading.innerHTML = "<em>Italic Heading</em>"; // renders HTML
// classList - add, remove, toggle, contains
const card = document.querySelector(".card");
// card.classList.add("highlighted", "shadow");
// card.classList.remove("hidden");
// card.classList.toggle("active"); // add if missing, remove if present
// card.classList.contains("active"); // true/false
// style - inline styles (camelCase!)
// card.style.backgroundColor = "#667eea";
// card.style.padding = "20px";
// card.style.borderRadius = "12px";
// card.style.display = "none"; // hide element
// Attributes
// element.setAttribute("href", "https://priygop.com");
// element.getAttribute("href");
// element.removeAttribute("disabled");
// element.dataset.userId; // access data-user-id attribute
// Example: Toggle dark mode
function toggleDarkMode() {
document.body.classList.toggle("dark-mode");
}
// Example: Show/hide element
function toggleElement(selector) {
const el = document.querySelector(selector);
if (el) el.classList.toggle("hidden");
}
console.log("DOM modification methods demonstrated");Tip
Tip
Use classList methods (add, remove, toggle, contains) instead of manipulating className directly. classList.toggle('active') is cleaner than checking and manually adding/removing. It also preserves other classes.
The DOM represents HTML as a tree of nodes that JavaScript can manipulate
Common Mistake
Warning
Using element.style for styling adds inline styles that are hard to override with CSS. Prefer toggling CSS classes with classList instead. Reserve element.style for dynamic values like positions calculated in JavaScript.
Practice Task
Note
DOM manipulation: (1) Create a button that toggles a dark/light theme by adding/removing a class on body. (2) Change the text content of a heading on click. (3) Modify the src attribute of an image dynamically.
Quick Quiz
Key Takeaways
- Once you select an element, you can change its content, style, classes, and attributes.
- textContent - Get/set plain text: element.textContent = 'New text'
- innerHTML - Get/set HTML content: element.innerHTML = '<strong>Bold</strong>'
- classList - Add/remove/toggle CSS classes: element.classList.add('active')