DOM manipulation

DOM manipulation

DOM (Document Object Model) manipulation is the process of accessing and modifying elements within an HTML document using JavaScript. It allows developers to create dynamic and interactive web pages by changing the content, style, and structure of the page in response to user interactions, events, or data changes.

Here are some of the ways to manipulate the DOM using JavaScript:

1. Accessing Elements: :

There are many ways to access elements in the DOM. Some of the most common methods include:

  • getElementById : This method returns the element with the specified ID.

const element =

document.getElementById(‘myElement’) ;

 

  • getElementsByClassName: This method returns a collection of elements with the specified class name.

const elements =

document.getElementsByClassName

(‘myClass’)

; 

  • getElementsByTagName: This method returns a collection of elements with the specified tag name.

const elements =

document.getElementsByTagName(‘p’)

; 

  • querySelector : This method returns the first element that matches the specified CSS selector.

const element =

document.querySelector

(‘#myElement .myClass’) ;

  • querySelectorAll : This method returns a collection of elements that match the specified CSS selector.

const elements =

document.querySelectorAll(‘p.myClass’) ;

2. Modifying Content:

Once you have accessed an element in the DOM, you can modify its content using the following properties and methods:

  • textContent: This property sets or returns the text content of an element

element.textContent =

‘New Text Content’ ; 

  • innerHTML :This property sets or returns the HTML content of an element.

element.innerHTML =

‘<h1>New Heading</h1>’ ;

  • insertAdjacentHTML :This method inserts HTML content at a specified position relative to the element.

element.insertAdjacentHTML(‘be

foreend’, ‘<p>New Paragraph</p>’) ;

3. Modifying Attributes:

You can also modify the attributes of an element using the following methods:

  • getAttribute :This method returns the value of the specified attribute.

const value = element.getAttribute(‘src’);

  • setAttribute: This method sets the value of the specified attribute.

element.setAttribute(‘src’, ‘newimage.jpg’);

  • removeAttribute: This method removes the specified attribute from the element.
element.removeAttribute(‘src’);

4.Modifying Style:

You can modify the style of an element using the following properties and methods:

  • style: This property sets or returns the inline style of an element.
element.style.color = ‘red’;
  • classList: This property returns a collection of the class names of an element, and provides methods to add, remove, or toggle classes.

element.classList.add(‘myClass’);

element.classList.remove(‘myClass’);

element.classList.toggle(‘myClass’);

5.Creating and Modifying Elements:

You can create new elements and modify the structure of the DOM using the following methods:

  • createElement: This method creates a new element with the specified tag name. 

const newElement =

document.createElement(‘div’);

  • appendChild: This method adds a new child element to the end of the specified parent element.

parentElement.appendChild(newElement);

  • insertBefore: This method inserts a new child element before a specified reference element.

parentElement.insertBefore(new

Element, referenceElement);

  • removeChild:This method inserts a new child element before a specified reference element.

parentElement.removeChild(childElement) ;

DOM manipulation is a powerful technique that allows developers to create dynamic and interactive web pages. However, it’s important to use it carefully, as excessive manipulation of the DOM.click here to go back