# Day 9: DOM Manipulation

**Screenshot:-**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1721577445234/90351423-cce6-44dd-9531-635a5703ea4f.png align="center")

### Introduction

DOM (Document Object Model) manipulation is essential for creating dynamic and interactive web pages. Today, we'll cover selecting and manipulating elements, creating and appending elements, removing elements, modifying attributes and classes, and handling events.

### Activity 1: Selecting and Manipulating Elements

#### Task 1: Select an HTML Element by Its ID and Change Its Text Content

You can select an HTML element by its ID using `document.getElementById` and then change its text content with the `textContent` property.

```xml
<p id="myParagraph">Original Text</p>
```

```javascript
const paragraph = document.getElementById("myParagraph");
paragraph.textContent = "New Text";
```

#### Task 2: Select an HTML Element by Its Class and Change Its Background Color

Select an element by its class using `document.querySelector` and change its style with the `style` property.

```xml
<div class="myDiv">This is a div</div>
```

```javascript
const div = document.querySelector(".myDiv");
div.style.backgroundColor = "lightblue";
```

### Activity 2: Creating and Appending Elements

#### Task 3: Create a New Div Element with Some Text Content and Append It to the Body

You can create a new element using `document.createElement` and append it to another element with `appendChild`.

```javascript
const newDiv = document.createElement("div");
newDiv.textContent = "This is a new div";
document.body.appendChild(newDiv);
```

#### Task 4: Create a New List Item and Add It to an Existing Unordered List

```javascript
<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
```

```javascript
const ul = document.getElementById("myList");
const newLi = document.createElement("li");
newLi.textContent = "Item 3";
ul.appendChild(newLi);
```

### Activity 3: Removing Elements

#### Task 5: Select an HTML Element and Remove It from the DOM

Select an element and remove it using `remove`.

```xml
<p id="removeMe">Remove this paragraph</p>
```

```javascript
const removeParagraph = document.getElementById("removeMe");
removeParagraph.remove();
```

#### Task 6: Remove the Last Child of a Specific HTML Element

```xml
<ul id="anotherList">
  <li>First Item</li>
  <li>Second Item</li>
  <li>Last Item</li>
</ul>
```

```javascript
const anotherUl = document.getElementById("anotherList");
anotherUl.removeChild(anotherUl.lastElementChild);
```

### Activity 4: Modifying Attributes and Classes

#### Task 7: Select an HTML Element and Change One of Its Attributes

Change the `src` attribute of an `img` tag.

```xml
<img id="myImage" src="oldImage.jpg" alt="Old Image">
```

```javascript
const image = document.getElementById("myImage");
image.src = "newImage.jpg";
```

#### Task 8: Add and Remove a CSS Class to/from an HTML Element

```xml
<div id="myDiv">Styled div</div>
```

```css
.highlight {
  border: 2px solid red;
}
```

```javascript
const div = document.getElementById("myDiv");
div.classList.add("highlight");
div.classList.remove("highlight");
```

### Activity 5: Event Handling

#### Task 9: Add a Click Event Listener to a Button That Changes the Text Content of a Paragraph

```xml
<button id="myButton">Click me</button>
<p id="myParagraph">Original Text</p>
```

```javascript
const button = document.getElementById("myButton");
button.addEventListener("click", () => {
  const paragraph = document.getElementById("myParagraph");
  paragraph.textContent = "Text has been changed!";
});
```

#### Task 10: Add a Mouseover Event Listener to an Element That Changes Its Border Color

```xml
<div id="hoverDiv">Hover over me</div>
```

```javascript
const hoverDiv = document.getElementById("hoverDiv");
hoverDiv.addEventListener("mouseover", () => {
  hoverDiv.style.borderColor = "blue";
});
```