JavaScript · Lesson 21 / 32 · English
DOM Manipulation
Understand the idea. Change the code. Build confidence with one focused experiment.
Read this lesson in தமிழ் ↗.
Start with the idea
The DOM exposes the page as objects. Select an element, then update its text or attributes. Run this complete HTML example in the HTML preview editor.
Learning goal: Explain what the example does, predict its result, and change it to solve the practice task.
Step-by-step lesson notes
The Document Object Model (DOM)
The DOM is a tree-like representation of an HTML document. JavaScript can read and modify the DOM to dynamically update the page content, structure, and styles.
Selecting Elements
// Modern selectors (returns first match)
document.querySelector(".btn"); // by class
document.querySelector("#title"); // by id
document.querySelector("h1"); // by tag
document.querySelector("ul > li"); // CSS selector
// Returns all matches as NodeList
document.querySelectorAll(".card");
// Legacy (still useful)
document.getElementById("title");
document.getElementsByClassName("btn"); // HTMLCollection
document.getElementsByTagName("p"); // HTMLCollectionModifying Content
const el = document.querySelector("#title");
// Text content (safe — no HTML)
el.textContent = "New Title";
// HTML content (use carefully — XSS risk!)
el.innerHTML = "<strong>Bold Title</strong>";
// Attributes
el.setAttribute("data-id", "42");
el.getAttribute("data-id"); // "42"
el.removeAttribute("data-id");
el.id; // direct property access
// CSS classes
el.classList.add("active");
el.classList.remove("hidden");
el.classList.toggle("visible");
el.classList.contains("active"); // true
// Styles
el.style.color = "red";
el.style.backgroundColor = "#f0f0f0";Creating and Inserting Elements
// Create
const li = document.createElement("li");
li.textContent = "New Item";
li.classList.add("list-item");
// Insert
const ul = document.querySelector("ul");
ul.appendChild(li); // at end
ul.prepend(li); // at start
ul.insertBefore(li, ul.firstChild);
// Modern: insertAdjacentHTML
el.insertAdjacentHTML("beforeend", "<span>New</span>");
// Remove
li.remove();
ul.removeChild(li);Security: Never use innerHTML with untrusted user data — it opens XSS attack vectors. Use textContent for plain text.
A complete example
This is a complete HTML document. Use the HTML preview editor below, not the Node console. Press Run to refresh the rendered page.
<!doctype html>
<html lang="en"><meta charset="utf-8"><title>DOM practice</title>
<body><h1 id="title">Waiting</h1><p id="summary"></p>
<script>
const title = document.querySelector("#title");
title.textContent = "JavaScript controls this heading";
document.querySelector("#summary").textContent = "2 lessons completed";
</script></body></html>Predict first. Reveal the expected result.
Page heading: JavaScript controls this heading Paragraph: 2 lessons completed
Make one change. See what happens.
For this browser example, interact with the rendered preview after pressing Run.
Wait for the editor to load, then load this example and press Run.
Powered by the free OneCompiler editor. Code you run is sent to that external service. Keep personal data and secret keys out of your examples.
Put the idea to work
Practice challenge
Change the paragraph to 5 lessons completed.
Reveal the answer and reasoning
Set the summary element's textContent to "5 lessons completed" and rerun the preview.
One mistake to avoid: document and querySelector belong to the browser DOM. A Node console editor does not provide a webpage. Use textContent for plain text instead of inserting untrusted HTML.
Your learning checkpoint
- Explain the example in your own words.
- Complete the challenge before revealing its answer.
- Describe the common mistake and how to avoid it.