DOM Starter

Bikramjit Roy

5 min readOct 8, 2026

1: What is DOM Tree ?

The DOM Tree is one of the most important concepts in JavaScript and Web Development.

What is DOM?

DOM stands for: Document Object Model

The browser converts HTML into a tree like structure called as DOM Tree.

This tree allows JavaScript to:

Read elements
Modify elements
Add elements
Remove elements
Update content dynamically

Why Do We Need DOM?

Suppose we have:

<h1>Hello World</h1>

HTML itself is just text.

JavaScript cannot directly manipulate this text.

Therefore the browser converts HTML into objects.

HTML
  ↓
DOM
  ↓
JavaScript Manipulates DOM

Example

HTML:

<html>
  <body>
    <h1>Hello</h1>
    <p>DOM</p>
  </body>
</html>

DOM Tree:

Document
   │
   └── html
         │
         └── body
                │
                ├── h1
                │     └── Hello
                │
                └── p
                      └── DOM

Understanding Parent, Child and Sibling

Parent Node

<body>
  <h1>Hello</h1>
</body>

Here:

body

is parent of

h1

Child Node

h1

is child of

body

Sibling Nodes

<h1>Hello</h1>
<p>DOM</p>

Both have the same parent.

Therefore:

h1 and p

are siblings.

DOM is Live

JavaScript can modify DOM anytime.

Example:

document.querySelector("h1").textContent = "Welcome";

Before:

<h1>Hello</h1>

After:

<h1>Welcome</h1>

The webpage updates instantly.

Important Points

HTML and DOM are not the same.

HTML:

<h1>Hello</h1>

DOM:

{
  tagName: "H1",
  textContent: "Hello"
}

HTML is text.

DOM is an object representation.

Summary

Part 2: Fetching Elements in DOM 🎯

Before modifying elements, we first need to select them.

This process is called: DOM Selection or Fetching Elements

Why Fetch Elements?

To:

Change text
Change styles
Add events
Remove elements
Create elements

JavaScript must first locate the element.

1. getElementById()

Selects an element using its ID.

HTML:

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

JavaScript:

const heading =
document.getElementById("title");
console.log(heading);

Output:

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

Important Rule

IDs should be unique.

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

Only one element should have that ID.

2. getElementsByClassName()

Selects all elements with the same class.

HTML:

<p class="text">One</p>
<p class="text">Two</p>
<p class="text">Three</p>

JavaScript:

const items =
document.getElementsByClassName("text");
console.log(items);

Output:

HTMLCollection(3)

3. getElementsByTagName()

Selects all elements of a tag.

HTML:

<p>One</p>
<p>Two</p>
<p>Three</p>

JavaScript:

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

Output:

HTMLCollection(3)

4. querySelector()

Returns the first matching element.

HTML:

<div class="box"></div>
<div class="box"></div>

JavaScript:

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

Returns:

First .box element only

Examples

Select by ID:

document.querySelector("#title");

Select by Class:

document.querySelector(".box");

Select by Tag:

document.querySelector("p");

5. querySelectorAll()

Returns all matching elements.

Get Bikramjit Roy’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

HTML:

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

JavaScript:

const boxes = document.querySelectorAll(".box");

Output:

NodeList(3)

Difference Between querySelector and querySelectorAll

Modern JavaScript Preference

Most developers use:

document.querySelector()
document.querySelectorAll()

because they support CSS selectors.

Summary

3: innerHTML

One of the most commonly used DOM properties.

What is innerHTML?

innerHTML allows us to:

Read HTML Content
Write HTML Content

inside an element.

Example

HTML:

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

JavaScript:

const box =
document.getElementById("box");
console.log(box.innerHTML);

Output:

<h1>Hello</h1>

Updating innerHTML

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

Result:

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

Adding Multiple Elements

box.innerHTML = `
  <h1>Hello</h1>
  <p>Welcome</p>
  <button>Click Me</button>
`;

Important Point

innerHTML understands HTML tags.

Example:

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

Output:

Hello

displayed in bold.

Security Warning

Never insert untrusted user input using innerHTML.

Example:

box.innerHTML = userInput;

Can lead to:

XSS Attacks

Summary

4: textContent

Another very important DOM property.

What is textContent?

textContent reads or updates only text.

It ignores HTML tags.

Example

HTML:

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

JavaScript:

const box =
document.getElementById("box");
console.log(box.textContent);

Output:

Hello

Notice: <h1> is not returned. Only text is returned.

Updating textContent

box.textContent =
"Welcome to JavaScript";

Result:

<div id="box">
  Welcome to JavaScript
</div>

Difference Example

Using innerHTML:

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

Output:

Bold Hello

Using textContent:

box.textContent = "<strong>Hello</strong>";

Output:

<strong>Hello</strong>

Displayed as plain text.

Why textContent is Safer?

Because it treats everything as text.

No HTML execution.
No script execution.
Less security risk.

innerHTML vs textContent

5: classList 🎨

classList is used to manage CSS classes dynamically.

This is heavily used in:

DOM Manipulation
Dark Mode
Modals
Dropdowns
Accordions
React Projects

What is classList?

classList provides methods to:

Add Classes
Remove Classes
Toggle Classes
Check Classes

Example

HTML:

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

JavaScript:

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

1. classList.add()

Adds a class.

box.classList.add("active");

Result:

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

Adding Multiple Classes

box.classList.add(
  "active",
  "visible",
  "dark"
);

2. classList.remove()

Removes a class.

box.classList.remove("active");

Example

Before:

<div class="active"></div>

After:

<div></div>

3. classList.toggle()

Most commonly used.

If class exists: Removes it
If class doesn’t exist: Adds it

Example

box.classList.toggle("dark");

Used for:

Dark Mode
Mobile Menu
Sidebar
Modal

Dark Mode Example

button.addEventListener("click", () => {
  document.body.classList.toggle("dark");
});

4. classList.contains()

Checks whether a class exists.

box.classList.contains("active");

Output:

true

false

Example

if(box.classList.contains("active")){
  console.log("Class Found");
}

Complete Example

HTML:

<button id="btn">Toggle</button>
<div id="box">
  Content
</div>

CSS:

.hidden{
  display:none;
}

JavaScript:

const btn =
document.getElementById("btn");
const box =
document.getElementById("box");
btn.addEventListener("click", () => {
  box.classList.toggle("hidden");
});

Every click: