1. What is the DOM?

The Document Object Model (DOM) is a representation of a web page’s structure as a tree of objects. JavaScript (JS) and jQuery allow us to manipulate these objects dynamically to create interactive web experiences.

With DOM manipulation, you can:
✅ Access and modify elements dynamically.
✅ Change CSS styles in real time.
✅ Respond to user interactions like clicks, keypresses, or form submissions.

2. Selecting Elements in the DOM

To manipulate elements, we first need to select them. JavaScript provides several methods, and jQuery offers simpler alternatives.

Examples:

JavaScript:

const heading = document.getElementById("main-heading"); 
console.log(heading);
const items = document.querySelectorAll(".item");
console.log(items);

jQuery:

const heading = $("#main-heading");
console.log(heading);
const items = $(".item");
console.log(items);

✅ Best Practices:

• Use querySelector or querySelectorAll for modern JavaScript.
• Use jQuery for a shorter, more readable syntax, especially when selecting multiple elements.

3. Manipulating DOM Elements

Once selected, elements can be modified dynamically by changing their content, attributes, and styles.

Examples:

JavaScript:

const heading = document.getElementById("main-heading");
heading.innerHTML = "Updated Heading";

const link = document.querySelector("a");
link.setAttribute("href", "https://example.com");
link.style.color = "blue";

jQuery:

$("#main-heading").html("Updated Heading");
$("a").attr("href", "https://example.com").css("color", "blue");

✅ jQuery makes syntax shorter and easier to read.

4. Event Handling in JavaScript & jQuery

Events occur when users interact with the page (clicks, keypresses, form submissions). Both JavaScript and jQuery provide ways to handle these interactions.

Examples:

JavaScript:

document.getElementById("myButton").addEventListener("click", function() {
    alert("Button clicked!");
});

document.addEventListener("keydown", function(event) {
    console.log("Key pressed:", event.key);
});

jQuery:

$("#myButton").click(function() {
    alert("Button clicked!");
});

$(document).keydown(function(event) {
    console.log("Key pressed:", event.key);
});

✅ jQuery removes the need for addEventListener, making it cleaner.

5. Removing Event Listeners

Sometimes, we may need to remove event listeners dynamically.

Examples:

JavaScript:

function handleClick() {
    alert("Clicked!");
}
const button = document.getElementById("myButton");
button.addEventListener("click", handleClick);

// Removing the event listener
button.removeEventListener("click", handleClick);

jQuery:

$("#myButton").click(function() {
    alert("Clicked!");
});

// Removing event listener
$("#myButton").off("click");

6. Event Delegation (Handling Events on Dynamic Elements)

Event delegation allows you to handle events for dynamically added elements using their parent.

Example:

JavaScript:

document.getElementById("myList").addEventListener("click", function(event) {
    if (event.target.tagName === "LI") {
        alert(`You clicked on ${event.target.textContent}`);
    }
});

jQuery:

$("#myList").on("click", "li", function() {
    alert(`You clicked on ${$(this).text()}`);
});

✅ jQuery simplifies event delegation by using .on() directly.

7. Form Handling in JavaScript & jQuery

Example:

JavaScript:

document.getElementById("myForm").addEventListener("submit", function(event) {
    event.preventDefault(); 
    alert("Form submitted!");
});

jQuery:

$("#myForm").submit(function(event) {
    event.preventDefault();
    alert("Form submitted!");
});

✅ jQuery simplifies form handling with .submit().

Conclusion

By the end of this class, you should be able to:
✅ Select and manipulate elements using JavaScript and jQuery.
✅ Handle events like clicks, keypresses, and form submissions.
✅ Use event delegation for dynamically added elements.
✅ Dynamically update the DOM efficiently.

Would you like any additional examples or exercises? 🚀