⚙️ Lesson 17: DOM Manipulation

The DOM (Document Object Model) is a hierarchical representation of your HTML page. JavaScript can access and modify the DOM to change what users see in real-time.

What is the DOM?

The DOM treats your HTML like a tree of objects:

Document
├── html
│   ├── head
│   │   ├── title
│   │   └── meta
│   └── body
│       ├── header
│       │   └── h1
│       ├── main
│       │   ├── p
│       │   └── button
│       └── footer
        

Selecting Elements

getElementById()

Select element by its ID (unique):

const header = document.getElementById("header");

getElementsByClassName()

Select all elements with a specific class:

const items = document.getElementsByClassName("item");

getElementsByTagName()

Select all elements of a specific type:

const paragraphs = document.getElementsByTagName("p");

querySelector() (Modern - Recommended)

Select using CSS selectors:

const header = document.querySelector("#header");        // ID
const firstItem = document.querySelector(".item");       // Class
const firstPara = document.querySelector("p");           // Tag
const input = document.querySelector("input[type='text']"); // Complex
        

querySelectorAll()

Select all matching elements:

const allItems = document.querySelectorAll(".item");
const allParas = document.querySelectorAll("p");

allItems.forEach(item => {
    console.log(item.textContent);
});
        

Modifying Content

innerText

Change plain text content:

document.getElementById("title").innerText = "New Title";

innerHTML

Change HTML content (be careful with user input!):

document.getElementById("content").innerHTML = "<h2>New Heading</h2><p>New paragraph</p>";
        

textContent

Get or set text content (safer than innerHTML):

document.getElementById("item").textContent = "Updated text";

Modifying Styles

Inline Style Manipulation

const element = document.getElementById("box");

element.style.color = "red";
element.style.backgroundColor = "yellow";
element.style.padding = "20px";
element.style.fontSize = "18px";
        

Hover buttons to change my style

Adding and Removing Classes

classList.add()

element.classList.add("active");
element.classList.add("highlighted", "important");  // Multiple classes
        

classList.remove()

element.classList.remove("active");

classList.toggle()

Add class if not present, remove if present:

element.classList.toggle("active");

classList.contains()

if (element.classList.contains("active")) {
    console.log("Element is active");
}
        

Modifying Attributes

getAttribute()

const href = document.querySelector("a").getAttribute("href");

setAttribute()

document.querySelector("img").setAttribute("src", "new-image.jpg");
document.querySelector("a").setAttribute("href", "https://example.com");
        

removeAttribute()

document.getElementById("form").removeAttribute("disabled");

Creating and Removing Elements

createElement()

Create a new element:

const newPara = document.createElement("p");
newPara.textContent = "This is a new paragraph";
newPara.classList.add("new-item");
        

appendChild()

Add element as last child:

document.getElementById("container").appendChild(newPara);

insertBefore()

Add element before specific child:

const firstChild = document.getElementById("list").firstChild;
document.getElementById("list").insertBefore(newItem, firstChild);
        

removeChild()

Remove an element:

const item = document.getElementById("item-to-remove");
item.parentElement.removeChild(item);

// Or simply
item.remove();
        

Interactive List Example

My To-Do List

Sample task

Working with Forms

Getting Input Values

const name = document.getElementById("nameInput").value;
const email = document.getElementById("emailInput").value;
const isChecked = document.getElementById("agree").checked;
        

Setting Input Values

document.getElementById("nameInput").value = "John Doe";
document.getElementById("agree").checked = true;
        

DOM Navigation

Parent, Children, Siblings

const element = document.getElementById("item");

element.parentElement;           // Parent node
element.children;                // All child elements
element.firstChild;              // First child (text/element)
element.lastChild;               // Last child
element.nextElementSibling;      // Next sibling
element.previousElementSibling;  // Previous sibling
        

Performance Tips

Cache frequently used elements: `const btn = document.getElementById('btn');`
Use querySelector/querySelectorAll for complex selectors
Avoid innerHTML for security; use textContent or createElement
Minimize DOM manipulation in loops
Use event delegation for dynamic elements

Key Takeaways

DOM is a tree representation of HTML
Use querySelector/querySelectorAll to select elements
Use textContent/innerHTML to change content
Use style property to change CSS
Use classList to manage CSS classes
Use createElement/appendChild for dynamic content

← Back to Course | ← Previous | Next: Events & Interactivity →