Lecture_16_DOM Manipulation

• Objective: Introduce students to Document Object Model (DOM) and how to manipulate web pages dynamically using JavaScript.

Lesson Breakdown:

1. Introduction to DOM (15 mins)

   • Explain what the DOM is and how it represents HTML elements in JavaScript.

2. DOM Selection Methods (20 mins)

   • Demonstrate getElementById, getElementsByClassName, and querySelector.

3. DOM Manipulation (20 mins)

   • Modify the content, attributes, and styles of HTML elements using JavaScript.

4. Programming Activity (20 mins)

   • Task: Create a simple HTML page and use JavaScript to dynamically change text and style.

   • Challenge: Add interactivity where clicking a button changes the background color of the page.

5. Event Listeners and DOM Events (15 mins)

   • Introduce addEventListener and common DOM events (e.g., click, mouseover).