Lecture 6 : What is DOM, DOM selection and Manipulation Part1| Full Stack Development Free Course

Learn how DOM Manipulation in JavaScript brings static web pages to life. This article covers vital methods for DOM selection and dynamic web page manipulation, helping you select, alter, and style HTML elements on the fly with clear, practical examples.

Varun Saharawat20 Jun, 2026

When you build a webpage, the browser reads your HTML file and generates a structured, tree-like map of the document. Without a way to interact with this structure, your pages remain lifeless.

This comprehensive DOM Manipulation in JavaScript tutorial solves that exact problem, showing you how to target, change, and style web layouts on the fly using standard browser APIs.

What is DOM Manipulation in JavaScript?

DOM Manipulation means using JavaScript to access, change, add, or remove elements from a web page. DOM stands for Document Object Model, which is a structure that represents all the content of an HTML page as objects and nodes.

When a browser loads a webpage, it converts the HTML code into a tree-like structure called the DOM. In this structure, every HTML element, attribute, and text becomes a node that JavaScript can access and modify. This allows developers to create interactive and dynamic web pages without reloading the page.

[ document ]

<html>

______|______

| |

| ______|______

<title> | |

In the DOM tree, the document object is the top-level object and serves as the starting point for accessing all elements on the page. Elements such as headings, paragraphs, images, buttons, and forms are connected in a parent-child relationship.

Why DOM Manipulation in JavaScript is Important?

At its basic level, DOM Manipulation in JavaScript means using JavaScript to change the content, structure, or appearance of a web page. JavaScript provides built-in methods that allow developers to update webpage elements quickly and easily without reloading the page.

DOM Manipulation is an important part of modern web development because it helps create interactive and user-friendly websites.

Real-Time Updates: JavaScript can update content on a webpage instantly when new data is received from a server. Users can see changes without refreshing the entire page.
Interactive Elements: DOM Manipulation makes it possible to create dropdown menus, popup windows, tabs, sliders, accordions, and other interactive features that respond to user actions.
Form Validation: Developers can check user input immediately and display error messages before a form is submitted. This improves user experience and helps prevent incorrect data entry.
Dynamic Styling: JavaScript can change colors, themes, layouts, and styles based on user preferences. Features such as dark mode and theme switching are commonly built using DOM Manipulation.
Better User Experience: Content can change instantly based on user actions, making websites faster, smoother, and more engaging.
Dynamic Content Management: New elements can be added, updated, or removed from a webpage whenever needed. This allows websites to display fresh and updated information in real time.

How to Select Elements in DOM Manipulation in JavaScript?

Before you can alter an element, you must tell the browser exactly which part of the layout you want to target. This process is known as DOM selection. The API provides several traditional and modern selection methods to grab individual objects or collections of nodes.

Targeting by Specific Identifiers

The most precise way to find a unique element is by targeting its ID attribute. Because IDs must be unique within a document, this approach returns a single node.

JavaScript

// Selecting a unique element by its ID
const mainHeading = document.getElementById('main-title');

If the browser cannot find an element with the specified ID, the method simply returns null.

Collecting Elements by Class Name or Tag

When you need to look up multiple elements that share the same design style or HTML tag, you can use broad collection methods.

JavaScript

// Grabbing a collection of elements sharing a class name
const infoParagraphs = document.getElementsByClassName('info-text');

// Grabbing all elements of a specific tag type
const allListItems = document.getElementsByTagName('li');

These methods return a live HTMLCollection. This collection behaves similarly to an array, allowing you to access items using zero-based indexing, though it does not support modern array methods like forEach directly without conversion.

The Power of Universal CSS Selectors

Modern scripts rely heavily on universal query methods. These functions let you search for nodes using standard CSS selector syntax, offering unparalleled flexibility.

JavaScript

// Selecting the very first matching element
const firstButton = document.querySelector('.btn-primary');

// Selecting every element that matches the selector
const allCheckboxes = document.querySelectorAll('input[type="checkbox"]'

While querySelector returns a single element node, querySelectorAll returns a static NodeList. Unlike an HTMLCollection, a NodeList remains unchanged even if the document updates later, and it supports built-in loop methods like forEach right out of the box.

Quick Selector Reference Table

Selection Method	Selector Input	Return Type	Live Updates?
getElementById	String (ID name)	Single Element / null	No
getElementsByClassName	String (Class name)	HTMLCollection	Yes
getElementsByTagName	String (Tag name)	HTMLCollection	Yes
querySelector	CSS Selector String	Single Element / null	No
querySelectorAll	CSS Selector String	Static NodeList	No

Practical Methods for DOM Manipulation in JavaScript

Once you successfully execute your selection queries, you can move on to active web page manipulation. This involves changing textual definitions, inserting fresh elements, deleting outdated nodes, or reconfiguring core object characteristics.

Modifying Content with Text and HTML Properties

To update what a user reads on your screen, you can manipulate properties like textContent and innerHTML.

textContent: This property handles raw, unformatted text. It reads or overrides the literal text inside an element, ignoring any HTML markup hidden within. It is secure and safe from injection attacks.
innerHTML: This property reads or sets the full HTML markup inside a node. It tells the browser to parse string tags into live elements, making it ideal for rendering complex nested layouts.

JavaScript

// Updating plain text safely
const alertBox = document.getElementById('status-message');
alertBox.textContent = 'Your progress has been saved successfully.';

// Inserting structured markup dynamically
const container = document.querySelector('.card-container');
container.innerHTML = '<h3>Card Title</h3><p>This paragraph was added via script.</p>

Creating and Appending New Elements

Instead of overriding large code segments with raw HTML strings, you can build new nodes programmatically step by step. This programmatic creation is highly scalable and keeps your code structured.

JavaScript

// 1. Create a brand new paragraph element
const newParagraph = document.createElement('p');

// 2. Add text and a class name to our new element
newParagraph.textContent = 'This is a freshly created paragraph.';
newParagraph.className = 'dynamic-text';

// 3. Locate the parent destination node
const articleBody = document.querySelector('.article-body');

// 4. Append the new node as the final child of the parent
articleBody.appendChild(newParagraph);

Using createElement ensures the browser constructs the underlying object model safely, preventing rendering errors that can sometimes occur when parsing massive text fragments through innerHTML.

Removing Elements from the Layout

Cleaning up your interface involves removing elements that are no longer needed, such as dismissing an alert notification or wiping out a deleted list item.

JavaScript

// Modern method to delete a selected node directly
const oldBanner = document.querySelector('.promo-banner');
if (oldBanner) {
oldBanner.remove();
}

// Legacy parent-child removal method
const listParent = document.getElementById('task-list');
const firstTask = listParent.firstElementChild;
if (firstTask) {
listParent.removeChild(firstTask);
}

The direct remove() method is widely supported and simplifies your scripts by eliminating the need to look up parent nodes first.

How to Change Styles in DOM Manipulation in JavaScript?

Dynamic visual feedback is essential for a great user experience. You can modify appearance either by editing inline style rules directly or by toggling CSS classes.

Adjusting Direct Inline Styles

Every selected element exposes a style object. You can read or set specific inline CSS values through this object using camelCase notation instead of standard hyphenated CSS syntax.

JavaScript

const actionButton = document.querySelector('.action-btn');

// Applying inline CSS style rules
actionButton.style.backgroundColor = '#0056b3';
actionButton.style.padding = '12px 24px';
actionButton.style.fontSize = '16px';

While inline adjustments work well for quick changes, scattering explicit design values throughout your script files can make your codebase harder to maintain.

Controlling Design with ClassList

The cleanest approach to visual styling is managing your CSS classes. The classList object offers simple methods to add, remove, or toggle pre-defined style rules in your stylesheets.

JavaScript

const themeContainer = document.querySelector('.app-wrapper');

// Adding a class to apply dark theme styles
themeContainer.classList.add('dark-mode');

// Removing a temporary highlight class
themeContainer.classList.remove('highlight-border');

// Toggling a class automatically on click
themeContainer.classList.toggle('sidebar-expanded');

This clean separation keeps visual layout rules inside your CSS file and functional logic inside your script file, making your code easier to debug.

How DOM Manipulation in JavaScript Works Together?

Let us combine these concepts into a practical example. We will build an interactive checklist where clicking a button selects a specific container, builds a new item, attaches styles, and adds it to the page layout.

HTML

<div class="todo-app">
<h2 id="app-title">My Tasks</h2>
<ul id="task-list">
<li>Review JavaScript Fundamentals</li>
</ul>
<button id="add-task-btn">Add New Task</button>
</div>

JavaScript

// JavaScript Implementation
// Step 1: Handle DOM selection to grab our interactive triggers
const addTaskButton = document.getElementById('add-task-btn');
const taskListCollection = document.getElementById('task-list');

// Step 2: Define a function to execute web page manipulation
function addNewItem() {
// Create the list item element
const listItem = document.createElement('li');

// Set text content securely
listItem.textContent = 'Practice DOM Manipulation in JavaScript';

// Style the new item using classList manipulation
listItem.classList.add('pending-task');

// Append the element to the document tree
taskListCollection.appendChild(listItem);
}

// Step 3: Connect our function to a user click action
addTaskButton.addEventListener('click', addNewItem);

In this workflow, the user initiates an action, our code detects the request, finds the target containers using precise element methods, and alters the viewport layout seamlessly without requiring a page reload.

Our Social Channels

🔥 Trending Blogs

Lecture 10 : Javascript Projects | Full Stack Development Free Course

Lecture 9 : EventLoop, Callback Queue Callbacks, Promises in Javascript | FSD Free Course

Lecture 8 : JS OOPS : Factory functions, Constructors, new keyword, Prototypes | FSD Free Course

Lecture 7 : JS Events, Event Listeners, Bubbling Vs Capturing and Throttling Vs Debouncing in JS

Lecture 6 : What is DOM, DOM selection and Manipulation Part1| Full Stack Development Free Course

FAQs

1. What is the difference between innerHTML and textContent?

The textContent property is used to read or display only plain text from an element. If the text contains HTML tags, they are shown as normal text and are not executed by the browser. On the other hand, innerHTML reads and inserts HTML content. The browser processes the HTML tags and displays them as actual webpage elements. For better security, especially when working with user-generated content, developers often prefer textContent because it helps prevent unwanted script injections.

2. How is querySelector different from querySelectorAll?

The querySelector() method finds and returns only the first element that matches a given CSS selector. If multiple elements match the selector, only the first one is selected. In contrast, querySelectorAll() returns all matching elements and stores them in a NodeList. Developers can then loop through the list and perform actions on each element individually.

3. Does JavaScript styling override external CSS?

Yes, in most cases it does. When styles are added directly through the element.style property in JavaScript, they become inline styles. Inline styles usually have a higher priority than styles written in external CSS files. As a result, the new style applied through JavaScript can override existing stylesheet rules.

4. What is a live HTMLCollection?

A HTMLCollection is a group of HTML elements returned by methods such as getElementsByClassName() or getElementsByTagName(). It is called "live" because it updates automatically when matching elements are added to or removed from the webpage. This means you do not need to run the query again to get the updated collection.

5. Why should I use classList instead of inline styles?

Using classList is generally a better practice because it allows developers to add, remove, or toggle CSS classes without directly changing inline styles. This keeps styling inside CSS files and functionality inside JavaScript files. As a result, the code becomes cleaner, easier to manage, simpler to update, and more efficient for large projects.

Check out these Related Courses