Day 9 - DOM Manipulation Assignment.md

Day 9: DOM Manipulation

Tasks/Activities

Activity 1: Selecting and Manipulating Elements

• Task 1: Select an HTML element by its ID and change its text content.
• Task 2: Select an HTML element by its class and change its background color.

Activity 2: Creating and Appending Elements

• Task 3: Create a new div with text and append it to the body.
• Task 4: Create a new li element and add it to an existing ul.

Activity 3: Removing Elements

• Task 5: Remove an HTML element from the DOM.
• Task 6: Remove the last child of a specific HTML element.

Activity 4: Modifying Attributes and Classes

• Task 7: Change an attribute (e.g., src of an img).
• Task 8: Add and remove a CSS class to/from an element.

Activity 5: Event Handling

• Task 9: Add a click event listener to a button to change paragraph text.
• Task 10: Add a mouseover event listener to change an element's border color.

Feature Request

1. Text Content Manipulation Script: Change text content by ID.
2. Element Creation Script: Create and append a div.
3. Element Removal Script: Remove an element from the DOM.
4. Attribute Modification Script: Change HTML element attributes.
5. Event Handling Script: Add event listeners to change content or style.

Achievement

By the end of these activities, students will:

• Select and manipulate DOM elements using JavaScript.
• Create and append new elements to the DOM.
• Remove elements from the DOM.
• Modify attributes and classes of HTML elements.
• Add and handle events for interactive web pages.