Loading topic...

JavaScript DOM Basics – Complete DOM Tree Tutorial

JavaScript DOM Basics

Learn JavaScript DOM basics including the DOM tree, document object, HTMLCollection, NodeList, nodes, elements, and DOM traversal with examples.

Phase 10 — DOM (Very Important)

Module 30 — DOM Basics

The Document Object Model (DOM) is a programming interface that represents an HTML document as a tree of objects. JavaScript uses the DOM to read, modify, create, and delete HTML elements dynamically.

Every interactive website—from login forms to dashboards and e-commerce applications—relies heavily on the DOM.

What is the DOM?

When a browser loads an HTML page, it converts the HTML into a DOM Tree.

JavaScript can then:

Read HTML elements
Change content
Modify styles
Add new elements
Remove elements
Respond to user actions

DOM Tree

Consider the following HTML:

html
1<!DOCTYPE html>
2<html>
3<head>
4    <title>DOM Example</title>
5</head>
6
7<body>
8
9    <h1>Hello JavaScript</h1>
10
11    <p>Learning DOM</p>
12
13</body>
14
15</html>

The browser converts it into a tree structure:

text
1Document
2│
3└── html
4    │
5    ├── head
6    │   └── title
7    │
8    └── body
9        ├── h1
10        │   └── "Hello JavaScript"
11        │
12        └── p
13            └── "Learning DOM"

Every HTML page follows this tree structure.

Document Object

The document object is the root of the DOM.

It provides methods to access and manipulate HTML elements.

javascript
1console.log(document);

Useful properties:

javascript
1document.title
2
3document.body
4
5document.head
6
7document.URL
8
9document.domain

Example

javascript
1console.log(document.title);
2
3document.title = "JavaScript Tutorial";

HTMLCollection

An HTMLCollection is a live collection of HTML elements.

html
1<p>One</p>
2
3<p>Two</p>
4
5<p>Three</p>

javascript
1const paragraphs = document.getElementsByTagName("p");
2
3console.log(paragraphs);

Characteristics:

Live collection
Updates automatically
Access using indexes

javascript
1console.log(paragraphs[0]);

NodeList

A NodeList is a collection of DOM nodes.

javascript
1const items = document.querySelectorAll("p");
2
3console.log(items);

Unlike HTMLCollection, a NodeList returned by querySelectorAll() is static.

You can iterate over it easily:

javascript
1items.forEach(item => {
2
3    console.log(item.textContent);
4
5});

HTMLCollection vs NodeList

HTMLCollection	NodeList
Live	Usually Static
Elements Only	Any Node
No `forEach()` in older browsers	Supports `forEach()`
`getElementsBy...()`	`querySelectorAll()`

Node

Everything inside the DOM is a Node.

Examples include:

Document
Element
Text
Comment

javascript
1console.log(document.body.nodeType);

Node Types

Node Type	Value
Element	1
Text	3
Comment	8
Document	9

Element Node

HTML tags are Element Nodes.

html
1<h1>Welcome</h1>

javascript
1const heading = document.querySelector("h1");
2
3console.log(heading.nodeType);

Output

text
11

Text Node

The text inside an element is a Text Node.

html
1<h1>Hello</h1>

javascript
1const heading = document.querySelector("h1");
2
3console.log(heading.firstChild.nodeType);

Output

text
13

Comment Node

HTML comments are also part of the DOM.

html
1<!-- Welcome Message -->

JavaScript can access comment nodes if needed.

Node type:

text
18

DOM Traversal

Traversal means moving through the DOM tree.

Useful properties:

javascript
1parentElement
2
3children
4
5firstElementChild
6
7lastElementChild
8
9nextElementSibling
10
11previousElementSibling

Example

javascript
1const list = document.querySelector("ul");
2
3console.log(list.children);
4
5console.log(list.firstElementChild);
6
7console.log(list.lastElementChild);

Parent Element

javascript
1const heading = document.querySelector("h1");
2
3console.log(heading.parentElement);

Child Elements

javascript
1const container = document.querySelector(".container");
2
3console.log(container.children);

Next Sibling

javascript
1const first = document.querySelector("li");
2
3console.log(first.nextElementSibling);

Previous Sibling

javascript
1const second = document.querySelector(".second");
2
3console.log(second.previousElementSibling);

Real-World Example

HTML

html
1<div class="card">
2
3    <h2>JavaScript</h2>
4
5    <p>Learn DOM Basics</p>
6
7</div>

JavaScript

javascript
1const card = document.querySelector(".card");
2
3console.log(card.children);
4
5console.log(card.firstElementChild.textContent);
6
7console.log(card.lastElementChild.textContent);

Mini Project — DOM Explorer

index.html

html
1<!DOCTYPE html>
2<html>
3
4<head>
5    <title>DOM Explorer</title>
6</head>
7
8<body>
9
10<div class="container">
11
12    <h2>DOM Tutorial</h2>
13
14    <p>Paragraph One</p>
15
16    <p>Paragraph Two</p>
17
18</div>
19
20<script src="script.js"></script>
21
22</body>
23
24</html>

script.js

javascript
1const container = document.querySelector(".container");
2
3console.log("Children:");
4
5console.log(container.children);
6
7console.log("First Child:");
8
9console.log(container.firstElementChild);
10
11console.log("Last Child:");
12
13console.log(container.lastElementChild);
14
15console.log("Parent:");
16
17console.log(container.parentElement);

Best Practices

Prefer querySelector() and querySelectorAll() for selecting elements using CSS selectors.
Understand the difference between HTMLCollection (live) and NodeList (usually static).
Use children when you only need element nodes.
Use childNodes when text and comment nodes are also required.
Traverse the DOM efficiently instead of repeatedly searching the entire document.
Keep DOM manipulation minimal to improve rendering performance.

Summary

In this module, you learned:

What the Document Object Model (DOM) is.
How browsers build the DOM tree from HTML.
The role of the document object.
The difference between HTMLCollection and NodeList.
The different node types in the DOM.
How to work with element, text, and comment nodes.
How to traverse parent, child, and sibling elements.
Practical DOM exploration techniques used in real-world web applications.

Next Module: Module 31 — DOM Element Selection, where you'll learn getElementById(), getElementsByClassName(), getElementsByTagName(), querySelector(), querySelectorAll(), and professional element selection techniques used in modern JavaScript.

Loading topic...

JavaScript DOM Basics

Learn JavaScript DOM basics including the DOM tree, document object, HTMLCollection, NodeList, nodes, elements, and DOM traversal with examples.

Phase 10 — DOM (Very Important)

Module 30 — DOM Basics

Every interactive website—from login forms to dashboards and e-commerce applications—relies heavily on the DOM.

What is the DOM?

When a browser loads an HTML page, it converts the HTML into a DOM Tree.

JavaScript can then:

Read HTML elements
Change content
Modify styles
Add new elements
Remove elements
Respond to user actions

DOM Tree

Consider the following HTML:

html
1<!DOCTYPE html>
2<html>
3<head>
4    <title>DOM Example</title>
5</head>
6
7<body>
8
9    <h1>Hello JavaScript</h1>
10
11    <p>Learning DOM</p>
12
13</body>
14
15</html>

The browser converts it into a tree structure:

text
1Document
2│
3└── html
4    │
5    ├── head
6    │   └── title
7    │
8    └── body
9        ├── h1
10        │   └── "Hello JavaScript"
11        │
12        └── p
13            └── "Learning DOM"

Every HTML page follows this tree structure.

Document Object

The document object is the root of the DOM.

It provides methods to access and manipulate HTML elements.

javascript
1console.log(document);

Useful properties:

javascript
1document.title
2
3document.body
4
5document.head
6
7document.URL
8
9document.domain

Example

javascript
1console.log(document.title);
2
3document.title = "JavaScript Tutorial";

HTMLCollection

An HTMLCollection is a live collection of HTML elements.

html
1<p>One</p>
2
3<p>Two</p>
4
5<p>Three</p>

javascript
1const paragraphs = document.getElementsByTagName("p");
2
3console.log(paragraphs);

Characteristics:

Live collection
Updates automatically
Access using indexes

javascript
1console.log(paragraphs[0]);

NodeList

A NodeList is a collection of DOM nodes.

javascript
1const items = document.querySelectorAll("p");
2
3console.log(items);

Unlike HTMLCollection, a NodeList returned by querySelectorAll() is static.

You can iterate over it easily:

javascript
1items.forEach(item => {
2
3    console.log(item.textContent);
4
5});

HTMLCollection vs NodeList

HTMLCollection	NodeList
Live	Usually Static
Elements Only	Any Node
No `forEach()` in older browsers	Supports `forEach()`
`getElementsBy...()`	`querySelectorAll()`

Node

Everything inside the DOM is a Node.

Examples include:

Document
Element
Text
Comment

javascript
1console.log(document.body.nodeType);

Node Types

Node Type	Value
Element	1
Text	3
Comment	8
Document	9

Element Node

HTML tags are Element Nodes.

html
1<h1>Welcome</h1>

javascript
1const heading = document.querySelector("h1");
2
3console.log(heading.nodeType);

Output

text
11

Text Node

The text inside an element is a Text Node.

html
1<h1>Hello</h1>

javascript
1const heading = document.querySelector("h1");
2
3console.log(heading.firstChild.nodeType);

Output

text
13

Comment Node

HTML comments are also part of the DOM.

html
1<!-- Welcome Message -->

JavaScript can access comment nodes if needed.

Node type:

text
18

DOM Traversal

Traversal means moving through the DOM tree.

Useful properties:

javascript
1parentElement
2
3children
4
5firstElementChild
6
7lastElementChild
8
9nextElementSibling
10
11previousElementSibling

Example

javascript
1const list = document.querySelector("ul");
2
3console.log(list.children);
4
5console.log(list.firstElementChild);
6
7console.log(list.lastElementChild);

Parent Element

javascript
1const heading = document.querySelector("h1");
2
3console.log(heading.parentElement);

Child Elements

javascript
1const container = document.querySelector(".container");
2
3console.log(container.children);

Next Sibling

javascript
1const first = document.querySelector("li");
2
3console.log(first.nextElementSibling);

Previous Sibling

javascript
1const second = document.querySelector(".second");
2
3console.log(second.previousElementSibling);

Real-World Example

HTML

html
1<div class="card">
2
3    <h2>JavaScript</h2>
4
5    <p>Learn DOM Basics</p>
6
7</div>

JavaScript

javascript
1const card = document.querySelector(".card");
2
3console.log(card.children);
4
5console.log(card.firstElementChild.textContent);
6
7console.log(card.lastElementChild.textContent);

Mini Project — DOM Explorer

index.html

html
1<!DOCTYPE html>
2<html>
3
4<head>
5    <title>DOM Explorer</title>
6</head>
7
8<body>
9
10<div class="container">
11
12    <h2>DOM Tutorial</h2>
13
14    <p>Paragraph One</p>
15
16    <p>Paragraph Two</p>
17
18</div>
19
20<script src="script.js"></script>
21
22</body>
23
24</html>

script.js

javascript
1const container = document.querySelector(".container");
2
3console.log("Children:");
4
5console.log(container.children);
6
7console.log("First Child:");
8
9console.log(container.firstElementChild);
10
11console.log("Last Child:");
12
13console.log(container.lastElementChild);
14
15console.log("Parent:");
16
17console.log(container.parentElement);

Best Practices

Prefer querySelector() and querySelectorAll() for selecting elements using CSS selectors.
Understand the difference between HTMLCollection (live) and NodeList (usually static).
Use children when you only need element nodes.
Use childNodes when text and comment nodes are also required.
Traverse the DOM efficiently instead of repeatedly searching the entire document.
Keep DOM manipulation minimal to improve rendering performance.

Summary

In this module, you learned:

What the Document Object Model (DOM) is.
How browsers build the DOM tree from HTML.
The role of the document object.
The difference between HTMLCollection and NodeList.
The different node types in the DOM.
How to work with element, text, and comment nodes.
How to traverse parent, child, and sibling elements.
Practical DOM exploration techniques used in real-world web applications.

Next Module: Module 31 — DOM Element Selection, where you'll learn getElementById(), getElementsByClassName(), getElementsByTagName(), querySelector(), querySelectorAll(), and professional element selection techniques used in modern JavaScript.