# JS DOM manipulation
JavaScript DOM manipulation is a fundamental skill for any web developer. The Document Object Model (DOM) is an interface that represents the structure of a web page. By manipulating the DOM, you can dynamically change the content, structure, and style of a web page without reloading it. This blog will walk you through the basics of DOM manipulation, key methods, and some practical examples to get you started.
## Understanding the DOM
The DOM is a tree-like structure where each node represents a part of the document. Nodes can be elements, attributes, or text content. Here's a simple example of HTML and its corresponding DOM structure:
### HTML
```html
DOM Example
Hello, World!
This is a paragraph.
```
### DOM Tree
* `html`
* `head`
* `title`
* `body`
* `h1`
* `p`
## Selecting Elements
To manipulate the DOM, you first need to select the elements you want to change. JavaScript provides several methods for this:
1. `getElementById`: Selects an element by its ID.
2. `getElementsByClassName`: Selects elements by their class name.
3. `getElementsByTagName`: Selects elements by their tag name.
4. `querySelector`: Selects the first element that matches a CSS selector.
5. `querySelectorAll`: Selects all elements that match a CSS selector.
### Example
```html
DOM Manipulation
Hello, World!
This is a paragraph.
```
## Modifying Content
Once you've selected an element, you can modify its content using properties like `innerHTML`, `textContent`, and `innerText`.
* `innerHTML`: Sets or gets the HTML content of an element.
* `textContent`: Sets or gets the text content of an element.
* `innerText`: Similar to `textContent`, but it also respects styling such as `display: none`.
### Example
```html
DOM Manipulation
Original Title
Original Paragraph
```
## Changing Styles
You can dynamically change the styles of elements using the `style` property or by adding/removing CSS classes.
### Example
```html
DOM Manipulation
This is a paragraph.
```
## Adding and Removing Elements
You can create, append, and remove elements dynamically using methods like `createElement`, `appendChild`, and `removeChild`.
### Example
```html
DOM Manipulation
```
## Event Handling
Interacting with the DOM often involves handling user events like clicks, input changes, and form submissions. You can add event listeners to elements using the `addEventListener` method.
### Example
```html
DOM Manipulation
```