JavaScript DOM
Manipulating the Document Object Model
What you'll learn
Select DOM elements using querySelector and getElementById
Traverse the DOM tree with parent, child, and sibling properties
Manipulate element content, attributes, and CSS classes
Handle user events with addEventListener and event delegation
Create and remove elements dynamically
Understand the DOM event lifecycle: capture, target, bubble
The DOM (Document Object Model) represents the page structure as a tree of nodes.
Selecting Elements
// By selector (preferred)
const button = document.querySelector(".btn")
const allButtons = document.querySelectorAll(".btn")
// By ID
const header = document.getElementById("header")
// By class
const cards = document.getElementsByClassName("card")
Modifying Content
// Text
element.textContent = "New text"
// HTML
element.innerHTML = "<strong>Bold</strong>"
// Attributes
element.setAttribute("disabled", "")
element.removeAttribute("disabled")
element.classList.add("active")
element.classList.remove("hidden")
Events
button.addEventListener("click", (e) => {
e.preventDefault()
console.log("Clicked!")
})
// Event delegation (parent listens)
list.addEventListener("click", (e) => {
if (e.target.matches("li")) {
console.log("Item clicked:", e.target.textContent)
}
})
Creating Elements
const li = document.createElement("li")
li.textContent = "New item"
li.className = "list-item"
list.appendChild(li)
Next Steps
- React Introduction — Declarative UI
- Async/Await — Async JS
Key Takeaways
document.querySelector and querySelectorAll are the most flexible methods for selecting DOM elements
The DOM is a tree of nodes — you can navigate it with parentNode, childNodes, nextSibling, etc.
element.textContent, element.innerHTML, and element.setAttribute() are the primary manipulation methods
addEventListener attaches handlers that can be removed with removeEventListener for cleanup
Event delegation uses a single listener on a parent to handle events from multiple children via bubbling