JS 17

 

Chapter 17 — DOM Manipulation ⭐⭐⭐⭐⭐

🎯 Goal (1 line)

Learn how to use JavaScript to read, change, create, and remove elements on a webpage.

This is where JavaScript starts becoming fun. Until now, your code mostly worked in the console. From this chapter onward, you'll make webpages respond to your code.

---

Quick Refresher (3 minutes)

Consider this HTML:

<h1 id="title">Welcome</h1>

<p class="message">
    Hello
</p>

<button id="btn">
    Click Me
</button>

JavaScript can select these elements:

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

or

const message = document.querySelector(".message");

Then change them:

title.textContent = "Hello JavaScript";

Think of the DOM as JavaScript's remote control for your webpage.

---

MCQ 1 (Easy)

Which object represents the webpage?

A.

window

B.

document

C.

page

D.

html

---

✅ Answer

B

Explanation:

document represents the HTML page.

---

MCQ 2

Which selects an element with id="title"?

A.

document.getElementById("title")

B.

document.querySelector("#title")

C. Both A and B

D. None

---

✅ Answer

C

Both work.

---

MCQ 3

Which selects the first element with class="card"?

A.

document.querySelector(".card")

B.

document.getElementById("card")

C.

document.card()

D.

document.querySelector("#card")

---

✅ Answer

A

. means class.

---

MCQ 4

Predict the output.

HTML

<h1 id="title">Welcome</h1>

JavaScript

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

console.log(title.textContent);

A.

title

B.

Welcome

C.

undefined

D.

Error

---

✅ Answer

B

textContent returns the text inside the element.

---

MCQ 5

What happens?

title.textContent = "Hello";

A.

Nothing

B.

Changes the text

C.

Removes the element

D.

Throws an error

---

✅ Answer

B

It replaces the existing text.

---

MCQ 6

Find the bug.

HTML

<h1 id="title"></h1>

JavaScript

const title = document.getElementById("Title");

A.

No bug

B.

ID names are case-sensitive

C.

Missing let

D.

Need querySelector

---

✅ Answer

B

title ≠ Title

---

MCQ 7

Which is better?

A.

document.getElementById("btn")

B.

document.querySelector("#btn")

(Selecting by ID)

---

✅ Answer

Both are good.

In modern projects, many developers prefer querySelector() because the same method can select IDs, classes, and elements using CSS selectors.

---

MCQ 8

Predict the output.

HTML

<p id="msg">
Hello
</p>

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

msg.textContent = "Hi";

console.log(msg.textContent);

A.

Hello

B.

Hi

C.

undefined

D.

Error

---

✅ Answer

B

The text has already been changed.

---

MCQ 9

Which property changes HTML?

A.

textContent

B.

innerHTML

C.

value

D.

style

---

✅ Answer

B

Example:

box.innerHTML = "<b>Hello</b>";

Result:

Hello appears in bold.

---

MCQ 10

Output?

box.innerHTML = "<h2>JavaScript</h2>";

A.

Shows plain text

B.

Creates an actual <h2>

C.

Error

D.

Nothing

---

✅ Answer

B

innerHTML treats the string as HTML.

---

MCQ 11

Which is safer when displaying user input?

A.

innerHTML

B.

textContent

---

✅ Answer

B

textContent displays text exactly as it is.

It prevents HTML from being interpreted.

---

MCQ 12

How do you change text color?

A.

title.style.color = "red";

B.

title.color = "red";

C.

title.textColor = "red";

D.

title.css = "red";

---

✅ Answer

A

---

MCQ 13

Predict the result.

title.style.backgroundColor = "yellow";

A.

Changes background

B.

Changes font

C.

Nothing

D.

Error

---

✅ Answer

A

JavaScript uses camelCase for CSS properties.

CSS:

background-color

JavaScript:

backgroundColor

---

MCQ 14

Which creates a new element?

A.

document.newElement("p")

B.

document.createElement("p")

C.

document.makeElement("p")

D.

document.build("p")

---

✅ Answer

B

---

MCQ 15

Predict the output.

const p = document.createElement("p");

p.textContent = "Hello";

A.

A new paragraph element containing "Hello"

B.

Displays Hello immediately

C.

Error

D.

Nothing

---

✅ Answer

A

The element exists in memory, but it isn't visible until it's added to the page.

---

MCQ 16

Which adds the paragraph to the page?

A.

document.body.append(p);

B.

document.body.add(p);

C.

document.body.push(p);

D.

document.body.insert(p);

---

✅ Answer

A

append() adds the element as the last child.

---

MCQ 17

Find the bug.

const p = document.createElement("p");

p.textContent = "Hello";

document.body.appendChild();

A.

No bug

B.

appendChild needs the element

C.

Wrong quotes

D.

Need let

---

✅ Answer

B

Correct:

document.body.appendChild(p);

or

document.body.append(p);

---

MCQ 18

Which removes an element?

A.

element.delete();

B.

element.remove();

C.

element.destroy();

D.

element.hide();

---

✅ Answer

B

---

MCQ 19

Predict the output.

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

title.remove();

A.

Removes the element

B.

Only clears text

C.

Error

D.

Nothing

---

✅ Answer

A

The entire element disappears from the page.

---

MCQ 20 (Hard)

What happens?

HTML

<div id="box"></div>

JavaScript

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

const p = document.createElement("p");

p.textContent = "JavaScript";

box.append(p);

console.log(box.textContent);

A.

JavaScript

B.

undefined

C.

Error

D.

Nothing

---

✅ Answer

A

The paragraph is added inside the div, so its text becomes "JavaScript".

---

Common Beginner Mistakes

❌ Forgetting # in querySelector() for IDs.

document.querySelector("title")

Should be:

document.querySelector("#title")

---

❌ Forgetting . for classes.

Wrong:

document.querySelector("card")

Correct:

document.querySelector(".card")

---

❌ Using innerHTML when textContent is enough.

Prefer:

element.textContent = userName;

instead of:

element.innerHTML = userName;

---

❌ Creating an element but never appending it.

const p = document.createElement("p");

This alone doesn't display anything.

---

Mini Coding Challenge

Question

Given this HTML:

<div id="container"></div>

Predict what appears on the page after running this code:

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

const h2 = document.createElement("h2");
h2.textContent = "Learning DOM";

container.append(h2);

container.style.color = "blue";

console.log(container.textContent);

Think first.

---

✅ Answer

Page

A blue heading:

Learning DOM

Console

Learning DOM

Why?

• createElement("h2") creates an <h2>.

• textContent sets its text.

• append() inserts it into the page.

• style.color = "blue" colors the text blue.

• container.textContent returns the combined text of its child elements.

---

Mini Project — Dynamic Welcome Message

Problem

Given this HTML:

<div id="app"></div>

Write JavaScript to:

1. Select the div.

2. Create an <h1>.

3. Set its text to:

Welcome to JavaScript!

4. Change its color to green.

5. Append it to the div.

---

✅ Solution

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

const heading = document.createElement("h1");

heading.textContent = "Welcome to JavaScript!";

heading.style.color = "green";

app.append(heading);

Final HTML (after JavaScript runs)

<div id="app">
  <h1 style="color: green;">
    Welcome to JavaScript!
  </h1>
</div>

---

🎯 Chapter 17 Takeaways (The 20% That Gives You 80%)

Memorize these—they cover most day-to-day DOM work:

Task	Method
Select by ID	document.getElementById() or document.querySelector("#id")
Select by class	document.querySelector(".class")
Read/change text	element.textContent
Read/change HTML	element.innerHTML
Change styles	element.style.property = value
Create element	document.createElement()
Add element	append() or appendChild()
Remove element	remove()

These are the DOM methods you'll use repeatedly when building projects like Todo Apps, Notes Apps, Weather Apps, and Expense Trackers. In the next chapter, we'll make these elements interactive by responding to user actions with events (clicks, typing, form submissions, keyboard input, and more).