DOM Tutorial | Dom Manipulation in HTML| Day 37 | Part - 1 | Web development Course 2023

DOM Manipulation
DOM Manipulation refers to the process of dynamically changing the content, structure, and style of a web page after it has loaded. This is done by accessing and manipulating the Document Object Model (DOM), which is a tree-like representation of the HTML document.

There are several ways to manipulate the DOM in JavaScript:

1. Accessing DOM elements:

getElementById: Retrieves an element by its unique ID.
getElementsByClassName: Retrieves a collection of elements by their class name.
getElementsByTagName: Retrieves a collection of elements by their tag name.
querySelector: Retrieves the first element that matches a CSS selector.
querySelectorAll: Retrieves a collection of elements that match a CSS selector.
2. Modifying content:

textContent: Sets or gets the text content of an element.
innerHTML: Sets or gets the HTML content of an element.
innerText: Sets or gets the inner text of an element (including any child elements).
3. Modifying attributes:

setAttribute: Sets an attribute on an element.
getAttribute: Gets the value of an attribute on an element.
removeAttribute: Removes an attribute from an element.
4. Adding and removing elements:

appendChild: Adds a child element to the end of another element.
insertBefore: Adds a child element before another child element.
removeChild: Removes a child element from its parent element.
5. Modifying styles:

style.setProperty: Sets the value of a specific style property.
classList.add: Adds a class name to an element.
classList.remove: Removes a class name from an element.