How to Manipulate the DOM in JavaScript – Most Commonly Used Techniques

Manipulating the Document Object Model (DOM) in JavaScript is an art that empowers developers to dynamically shape the structure, content, and presentation of web pages. In the intricate dance between HTML, CSS, and JavaScript, DOM manipulation serves as a key choreographer, enabling the seamless orchestration of user interfaces.

Manipulating the Document Object Model (DOM) in JavaScript is a crucial skill for web developers. The DOM represents the structure of an HTML document as a tree of objects, and JavaScript can be used to interact with and manipulate these objects. Here are some commonly used techniques for manipulating the DOM:

Table of content :

1. Change the Content of an Element
2. Manipulate the Class Attribute
3. Setting CSS Styles Using JavaScript
4. Create, Add, and Remove Elements
5. Insert Element at a Specific Position
6. Manipulating Element Attributes
7. Manipulating Data Attributes

1. Change the Content of an Element:

 `textContent`: This property represents the text content of a node and its descendants. You can use it to get or set the text content of an element.

let element = document.getElementById('myElement');
 
   element.textContent = 'New content';

2. Manipulate the Class Attribute:

 `classList`: This property returns a live `DOMTokenList` collection of the class attributes of the element. It provides methods like `add()`, `remove()`, and `toggle()` to manipulate the classes.

let element = document.getElementById('myElement');
 
   element.classList.add('newClass');
 
   element.classList.remove('oldClass');
 
   element.classList.toggle('active');

3. Setting CSS Styles Using JavaScript:

`style`: The `style` property allows you to manipulate the inline styles of an element. You can set individual style properties like `color` and `fontSize`.

 

  let element = document.getElementById('myElement');
 
   element.style.color = 'red';
 
   element.style.fontSize = '16px';

4. Create, Add, and Remove Elements:

  `createElement()`: This method creates a new HTML element with the specified tag name.

  `appendChild()`: This method appends a node as the last child of a node. It's used to add a newly created element to the DOM.

 `removeChild()`: This method removes a child node from the DOM.

 let newElement = document.createElement('div');
 
   document.body.appendChild(newElement);
 
   let elementToRemove = document.getElementById('elementToRemove');
 
   elementToRemove.parentNode.removeChild(elementToRemove);

  

5. Insert Element at a Specific Position:

 `insertBefore()`: This method inserts a node before a reference node as a child of a specified parent node.

  let newElement = document.createElement('div');
 
   let referenceElement = document.getElementById('referenceElement');
 
   referenceElement.parentNode.insertBefore(newElement, referenceElement);

6. Manipulating Element Attributes:

`setAttribute()`: This method sets the value of an attribute on the specified element. You can use it to add or modify any attribute.

  `getAttribute()`: This method retrieves the value of the attribute with the specified name.

 

  let element = document.getElementById('myElement');
 
   element.setAttribute('data-custom', 'value');
 
   let value = element.getAttribute('data-custom');

7. Manipulating Data Attributes:

`dataset`: The `dataset` property provides a convenient way to access and manipulate the `data-*` attributes of an element. It returns a `DOMStringMap` object.

 

  let element = document.getElementById('myElement');
 
   element.dataset.customValue = 'someValue';
 
   let value = element.dataset.customValue;

Conclusion

These attributes and methods are part of the Document Object Model (DOM) API and allow you to dynamically modify the structure and content of HTML documents using JavaScript. If you got helpfull this article then please send with your friends.