# 30 Days of JAVASCRIPT #15/30

DOM Manipulation in JS..

DOM manipulation is an essential part of web development, and JavaScript provides several ways to manipulate the DOM. In this blog post, we will discuss how to select elements, modify element properties, and create and delete elements in JavaScript.

### **Selecting Elements**

Selecting elements is the first step in DOM manipulation. JavaScript provides several methods to select elements, including `getElementById()`, `getElementsByClassName()`, `getElementsByTagName()`, and `querySelector()`.Here is an example code that demonstrates the use of these methods:

```javascript
// Selecting elements by ID
const elementById = document.getElementById("my-element");

// Selecting elements by class name
const elementsByClass = document.getElementsByClassName("my-class");

// Selecting elements by tag name
const elementsByTag = document.getElementsByTagName("p");

// Selecting elements using a CSS selector
const elementBySelector = document.querySelector("#my-element .my-class");
```

In the above code, we use the `getElementById()`, `getElementsByClassName()`, `getElementsByTagName()`, and `querySelector()` methods to select elements by ID, class name, tag name, and CSS selector, respectively.

### **Modifying Element Properties**

Once you have selected an element, you can modify its properties using JavaScript. Some common properties that can be modified include `innerHTML`, `textContent`, `style`, and [`classList`.Here](http://classList.Here) is an example code that demonstrates the use of these properties:

```javascript
// Modifying inner HTML
const element = document.getElementById("my-element");
element.innerHTML = "<p>Hello, world!</p>";

// Modifying text content
const element = document.getElementById("my-element");
element.textContent = "Hello, world!";

// Modifying styles
const element = document.getElementById("my-element");
element.style.color = "red";
element.style.backgroundColor = "yellow";

// Modifying classes
const element = document.getElementById("my-element");
element.classList.add("my-class");
element.classList.remove("other-class");
```

In the above code, we use the `innerHTML`, `textContent`, `style`, and `classList` properties to modify the inner HTML, text content, styles, and classes of an element, respectively.

### **Creating and Deleting Elements**

To make a web page dynamic, you can use JavaScript to create and delete elements from the DOM. JavaScript provides several methods to create and delete elements, including `createElement()`, `appendChild()`, `removeChild()`, and `replaceChild()`.Here is an example code that demonstrates the use of these methods:

```javascript
// Creating a new element
const newElement = document.createElement("p");
newElement.textContent = "Hello, world!";

// Appending a new element to an existing element
const parentElement = document.getElementById("my-element");
parentElement.appendChild(newElement);

// Removing an element from the DOM
const childElement = document.getElementById("my-child-element");
parentElement.removeChild(childElement);

// Replacing an element with a new element
const oldElement = document.getElementById("my-old-element");
const newElement = document.createElement("p");
newElement.textContent = "Hello, world!";
parentElement.replaceChild(newElement, oldElement);
```

In the above code, we use the `createElement()`, `appendChild()`, `removeChild()`, and `replaceChild()` methods to create and delete elements from the DOM.

### **Conclusion**

DOM manipulation is an essential part of web development, and JavaScript provides several ways to manipulate the DOM. By selecting elements, modifying their properties, and creating and deleting elements, developers can create dynamic and interactive web pages.