Week 2.4

Week 2 - Day 4: JavaScript DOM and Event Handling - Summary

---

Session 1: Introduction to the DOM

Key Concepts

1. What is the DOM?

   • DOM (Document Object Model) is an abstraction of the HTML document into a tree of objects.
   • It allows dynamic interaction and manipulation of web content.

2. Static vs. Dynamic HTML

   • Static HTML: Webpages remain unchanged regardless of user interactions.
   • Dynamic HTML: Webpages update based on user actions, achieved using DOM manipulation.

3. Fetching Elements

   • Methods to select elements:
     • document.querySelector() – Selects the first matching element.
     • document.querySelectorAll() – Selects all matching elements (returns a NodeList).
     • document.getElementById() – Fetches element by id.
     • document.getElementsByClassName() – Fetches elements by class name.
     • document.getElementsByTagName() – Fetches elements by tag name.

4. DOM Manipulation

   • Accessing and modifying elements dynamically:
     • Inner Content:
       • .innerHTML – Get or set HTML content.
       • .textContent – Get or set text content.
     • Styling:
       • .style – Modify inline CSS properties.
       • .classList – Add, remove, or toggle CSS classes.
     • Creating/Deleting Elements:
       • document.createElement() – Create new elements.
       • .appendChild() – Add child elements.
       • .removeChild() – Remove child elements.

---

Session 2: Event Handling and Advanced DOM

Key Topics

1. Event Handling

   • Events enable interaction between users and webpages.
   • Common methods:
     • .addEventListener(event, callback) – Attach a handler to an event.
     • Inline event attributes (e.g., onclick) – Not recommended for modern applications.

   Example:

   const button = document.querySelector("button");
   button.addEventListener("click", () => {
     alert("Button clicked!");
   });

2. Event Object

   • Provides additional details about an event.
   • Example:

     document.addEventListener("click", (event) => {
       console.log(event.target); // Logs the clicked element
     });

3. Tasks and Practical Applications

   • Accessing Elements: Fetch elements and change their content dynamically.
   • Dynamic Styling: Modify styles or toggle classes based on user interactions.
   • Creating and Deleting Elements: Allow users to add/remove content on the fly.

---

Highlights

• DOM Basics:

  • Understood how to access and modify HTML elements using DOM methods.
  • Learned how to handle events and respond to user interactions dynamically.

• Event Handling:

  • Explored event-driven programming and used event listeners for interaction.
  • Gained insights into the Event object for advanced event handling.

---

Takeaways

1. DOM is essential for dynamic interaction in web applications.
2. Event handling bridges the gap between static content and user interactions.
3. With DOM manipulation and event listeners, we can create highly interactive web experiences.

---

🎯 Practice Exercise:

• Try building a simple webpage with:
  • A button to toggle the theme (dark/light).
  • A form with input validation.
  • A list where users can add or remove items dynamically.

Keep experimenting and happy coding! 🚀