Premium Javascript Course

JavaScript DOM Manipulation

The Document Object Model (DOM) represents the structure of an HTML document. JavaScript can interact with and modify the DOM, allowing you to change the content, structure, and style of a webpage dynamically.

1. What is the DOM?

The DOM is a programming interface for web documents. It represents the structure of the document as a tree of objects, each object corresponding to a part of the document (like elements, attributes, and text).

2. Accessing DOM Elements

To manipulate the DOM, you need to access elements in the document. Here are some common methods to select elements:

• getElementById: Selects an element by its ID.
• getElementsByClassName: Selects elements by their class name.
• getElementsByTagName: Selects elements by their tag name.
• querySelector: Selects the first element that matches a CSS selector.
• querySelectorAll: Selects all elements that match a CSS selector.

Example of Accessing an Element:

let element = document.getElementById("myElement");
        

This code selects the element with the ID "myElement" and stores it in the variable element.

3. Modifying DOM Elements

You can modify the content and properties of DOM elements using various methods:

• innerHTML: Sets or gets the HTML content inside an element.
• textContent: Sets or gets the text content inside an element.
• setAttribute: Sets an attribute on an element.
• style: Sets or gets the inline style of an element.

Example of Modifying Content:

let element = document.getElementById("myElement");
element.innerHTML = "New content"; // Modifies the HTML content
element.textContent = "New text content"; // Modifies the text content
        

This code changes the content inside the selected element to "New content" and "New text content".

4. Creating New Elements

You can create new elements and add them to the DOM dynamically:

• createElement: Creates a new HTML element.
• appendChild: Adds a new element as the last child of a parent element.
• insertBefore: Inserts a new element before an existing child element.

Example of Creating and Adding a New Element:

let newElement = document.createElement("div");
newElement.innerHTML = "This is a new element.";
document.body.appendChild(newElement); // Adds the new element to the body
        

This code creates a new div element and appends it to the body of the document.

5. Removing DOM Elements

To remove an element from the DOM, you can use the removeChild method:

Example of Removing an Element:

let element = document.getElementById("myElement");
element.parentNode.removeChild(element); // Removes the element from the DOM
        

This code removes the element with the ID "myElement" from the DOM.

6. Event-Driven DOM Manipulation

DOM manipulation is often done in response to events. You can add event listeners to elements to change their properties when an event occurs.

Example of Modifying an Element on Click:

document.getElementById("myButton").addEventListener("click", function() {
    let element = document.getElementById("myElement");
    element.style.backgroundColor = "yellow"; // Changes the background color on click
});
        

This code changes the background color of the element with the ID "myElement" when the button with the ID "myButton" is clicked.

7. Traversing the DOM

Traversing the DOM means moving through the tree of elements. You can move between parent, child, and sibling elements using methods such as:

• parentNode: Gets the parent element of a given element.
• childNodes: Gets a list of all child elements.
• nextSibling: Gets the next sibling of a given element.
• previousSibling: Gets the previous sibling of a given element.

Example of Traversing the DOM:

let parentElement = document.getElementById("child").parentNode;
let nextSibling = document.getElementById("child").nextSibling;
        

This code accesses the parent element of the "child" element and its next sibling.

8. Conclusion

JavaScript DOM manipulation is a powerful tool that allows you to dynamically interact with web pages. By understanding how to access, modify, create, and remove elements, you can build highly interactive web applications.