DOM + Modern JS - Class I

Lecture 42 :- DOM + Modern JS - Class I

In "DOM + Modern JS - Class I," we'll explore the Document Object Model (DOM) and how to use modern JavaScript to interact with HTML elements and manipulate the DOM. The DOM is a programming interface for web documents and allows JavaScript to access and modify the content, structure, and style of HTML documents. Let's get started:

Accessing Elements: You can use various methods to access HTML elements in the DOM.

javascriptCopy code

// JavaScript // Using getElementById (returns a single element) let myDiv = document.getElementById("myDiv"); // Using getElementsByClassName (returns a collection of elements) let btns = document.getElementsByClassName("btn"); // Using querySelector (returns the first matching element) let myButton = document.querySelector(".btn"); // Using querySelectorAll (returns all matching elements) let allButtons = document.querySelectorAll(".btn");

htmlCopy code

<!-- HTML --> <div id="myDiv">Hello, DOM!</div> <button class="btn">Click Me</button>

Modifying Elements: You can modify the content and attributes of HTML elements using the DOM.

javascriptCopy code

// JavaScript myDiv.textContent = "Hello, Updated DOM!"; // Modify text content myButton.innerHTML = "Click Me Again"; // Modify HTML content myButton.setAttribute("disabled", true); // Set attribute myDiv.style.color = "red"; // Change CSS styles

Event Handling: You can attach event listeners to HTML elements to respond to user interactions.

javascriptCopy code

// JavaScript myButton.addEventListener("click", function () {  console.log("Button clicked!"); }); // Event delegation (attaching event to a parent element) let parentElement = document.getElementById("parent"); parentElement.addEventListener("click", function (event) {  if (event.target.classList.contains("btn")) {    console.log("Button clicked!");  } });

Creating and Appending Elements: You can create new elements and append them to the DOM.

javascriptCopy code

// JavaScript let newDiv = document.createElement("div"); newDiv.textContent = "Newly created div"; document.body.appendChild(newDiv); // Append to the body element

Removing Elements: You can remove elements from the DOM.

javascriptCopy code

// JavaScript let elementToRemove = document.getElementById("toBeRemoved"); elementToRemove.remove();

Modern JavaScript (ES6+): Utilize modern JavaScript features like arrow functions, destructuring, and spread operators to write cleaner and more concise code.

javascriptCopy code

// Modern JavaScript const myArrowFunction = (param) => console.log(param); const { name, age } = person; // Destructuring const arr1 = [1, 2, 3]; const arr2 = [...arr1, 4, 5]; // Spread operator

These are the foundational concepts for working with the DOM using modern JavaScript. The DOM is a powerful tool that enables you to create dynamic and interactive web applications. As you progress, you'll learn more advanced DOM manipulation techniques and explore additional modern JavaScript features.

Remember to practice regularly and experiment with different scenarios to solidify your understanding. If you have any specific questions or need further clarification on any topic, feel free to ask! Happy coding!