JavaScript : DOM Manipulation

Credits : Unsplash

The DOM is a programming interface for web documents, and it represents the structure of the web page, allowing you to manipulate its content and structure using JavaScript. You can use DOM manipulation to update, add, or remove elements, change styles, and more.

Here are some fundamental concepts and techniques for DOM manipulation in JavaScript:

(1) Accessing Elements :

To manipulate the DOM, you first need to access elements on the web page. You can do this using several methods:

• document.getElementById(id): Gets an element by its id attribute.
• document.querySelector(selector): Retrieves the first element that matches the specified CSS selector.
• document.querySelectorAll(selector): Retrieves a list of all elements that match the CSS selector.

const elementById = document.getElementById('myElement');
const elementBySelector = document.querySelector('.myClass');
const elementsBySelectorAll = document.querySelectorAll('p');

(2) Modifying Content :

You can change the content and attributes of HTML elements using properties and methods.

• element.innerHTML: Allows you to change the HTML content of an element.
• element.innerText or element.textContent: Sets the text content of an element.
• element.setAttribute(name, value): Sets an attribute of an element.
• element.removeAttribute(name): Removes an attribute from an element.

const element = document.getElementById('myElement');
element.innerHTML = 'New content';
element.innerText = 'New text';
element.setAttribute('class', 'newClass');

(3) Creating Elements :

You can create new elements and append them to the DOM.

• document.createElement(tagName): Creates a new element with the specified tag name.
• element.appendChild(childElement): Appends a child element to a parent element.

const newDiv = document.createElement('div');
newDiv.textContent = 'New div content';
document.body.appendChild(newDiv);

(4) Event Handling :

You can add event listeners to elements to respond to user interactions.

• element.addEventListener(event, callback): Listens for a specific event (e.g., click, input) and executes a callback function when the event occurs.

const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  alert('Button clicked');
});

(5) Manipulating Styles :

You can change CSS styles of elements using the style property.

• element.style.propertyName = value: Changes the CSS style of an element.

const element = document.getElementById('myElement');
element.style.color = 'red';
element.style.backgroundColor = 'yellow';

(6) Removing Elements :

You can remove elements from the DOM using the remove() method.

• element.remove(): Removes the element from the DOM.

const element = document.getElementById('myElement');
element.remove();

These are the basic concepts of DOM manipulation in JavaScript. You can use these techniques to create dynamic and interactive web applications. Keep in mind that modern web development often uses libraries and frameworks like jQuery or React, which abstract many of these DOM manipulation tasks and provide higher-level abstractions for building web applications.