---
title: "Explain the concept and use DOM Manipulation"  
description: "The DOM represents an HTML or XML document as a tree structure, where each node corresponds to a part of the document (such as an element, attribute,"  
author: "Ravi Vishwakarma"  
published: 2024-06-18  
updated: 2024-06-18  
canonical: https://www.mindstick.com/blog/304387/explain-the-concept-and-use-dom-manipulation  
category: "javascript"  
tags: ["web development", "javascript", "front-end development"]  
reading_time: 3 minutes  

---

# Explain the concept and use DOM Manipulation

[**DOM (Document Object Model)**](https://www.mindstick.com/interview/969/what-is-dom-and-how-does-it-relate-to-xml) manipulation in JavaScript is the process of dynamically changing a [web page](https://www.mindstick.com/forum/718/sql-server-report-alignment-to-center-of-web-page)'s structure, content, and style. The DOM represents an HTML or XML document as a tree structure, where each node corresponds to a part of the document (such as an element, attribute, or piece of text). Using JavaScript, you can interact with this tree to modify the document's content and appearance.

## Key Concepts and Use Cases of DOM Manipulation

1. **Selecting Elements:** To manipulate elements, you first need to select them from the DOM.
2. **Modifying Elements:** Change the content, attributes, styles, or structure of elements.
3. **Creating and Inserting Elements:** Dynamically [add new elements](https://www.mindstick.com/interview/33783/how-can-add-new-elements-dynamically-in-javascript) to the DOM.
4. **Removing Elements:** Remove existing elements from the DOM.
5. **[Event Handling](https://www.mindstick.com/articles/12724/event-handling-in-android):** Respond to user actions like clicks, input, or [form submissions](https://www.mindstick.com/forum/157866/how-do-you-handle-form-submissions-in-knockoutjs-applications).

####

#### Selecting Elements

You can use several methods to [select elements](https://www.mindstick.com/forum/157817/how-do-you-select-elements-using-jquery-can-you-provide-some-examples) from the DOM:

**document.getElementById(id):** Selects an element by its ID.\
**document.getElementsByClassName(className):** Select elements by their [class name](https://www.mindstick.com/forum/12871/how-to-get-class-name).\
**document.getElementsByTagName(tagName):** Select elements by their tag name.\
**document.querySelector(selector):** Selects the first element that matches a CSS selector.\
**document.querySelectorAll(selector):** Selects all elements that match a CSS selector.

```javascript
// Select element by ID
const header = document.getElementById('header');
// Select elements by class name
const items = document.getElementsByClassName('item');
// Select elements by tag name
const paragraphs = document.getElementsByTagName('p');
// Select the first element that matches a CSS selector
const firstItem = document.querySelector('.item');
// Select all elements that match a CSS selector
const allItems = document.querySelectorAll('.item');
```

#### Modifying Elements

You can modify elements' content, attributes, and styles:

**element.textContent or element.innerHTML:** Change the text content or HTML of an element.\
**element.setAttribute(name, value):** Set an attribute's value.\
**element.style.property:** Change an element's style.

```javascript
const header = document.getElementById('header');
// Change text content
header.textContent = 'New Header Text';
// Change HTML content
header.innerHTML = '<span>New Header HTML</span>';
// Set an attribute
header.setAttribute('class', 'new-class');
// Change style
header.style.color = 'blue';
header.style.fontSize = '24px';
```

#### Creating and Inserting Elements

You can create new elements and insert them into the DOM:

**document.createElement(tagName):** Create a new element.\
**parentNode.appendChild(node):** Append a child node to a parent node.\
**parentNode.insertBefore(newNode, referenceNode):** Insert a new node before a reference node.

```javascript
// Create a new paragraph element
const newParagraph = document.createElement('p');
newParagraph.textContent = 'This is a new paragraph.';
// Append the new paragraph to the body
document.body.appendChild(newParagraph);
// Insert a new item before an existing item
const newItem = document.createElement('li');
newItem.textContent = 'New Item';
const list = document.querySelector('ul');
const firstItem = list.querySelector('li');
list.insertBefore(newItem, firstItem);
```

#### Removing Elements

You can remove elements from the DOM:

**parentNode.removeChild(node):** Remove a child node from a parent node.\
**element.remove():** Directly remove an element.

```javascript
const itemToRemove = document.querySelector('.item');
// Remove using parent node
itemToRemove.parentNode.removeChild(itemToRemove);
// Or remove directly
itemToRemove.remove();
```

#### Event Handling

You can add [event listeners](https://www.mindstick.com/forum/159117/how-do-you-handle-events-using-jquery-and-attach-event-listeners-to-elements) to elements to respond to [user interactions](https://www.mindstick.com/forum/158690/how-can-you-handle-user-interactions-such-as-button-clicks-using-jquery):

**element.addEventListener(event, function):** Add an [event listener](https://www.mindstick.com/interview/529/how-to-remove-the-event-listener).

```javascript
const button = document.querySelector('button');
// Add a click event listener
button.addEventListener('click', function() {
   alert('Button was clicked!');
});
```

---

Original Source: https://www.mindstick.com/blog/304387/explain-the-concept-and-use-dom-manipulation

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.