# DOM Manipulation: Selecting and Modifying HTML Element

## Introduction

* The Document Object Model (DOM) is represents the structure of an HTML document as a tree of objects, allowing developers to **interact** with and modify the content, structure, and style of a web page using JavaScript.
    
* Mastering DOM manipulation helps create dynamic and interactive websites.
    
* The **HTML DOM** model is constructed as a tree of **Objects.**
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1740517595612/7cbbd372-0983-4ec8-9375-4ead24542ecd.png align="center")

Using DOM you can

* change all the HTML elements in the page
    
* change all the HTML attributes in the page
    
* change all the CSS styles in the page
    
* remove existing HTML elements and attributes
    
* add new HTML elements and attributes
    
* react to all existing HTML events in the page
    
* create new HTML events in the page
    

---

### Selecting HTML Elements

Before modifying an HTML element, you first need to select it. JavaScript provides several methods to select elements from the DOM:

1. **getElementById()**: Selects an element by its unique `id`. This is one of the fastest ways to access a specific element because IDs are unique in an HTML document.
    

```javascript
const title = document.getElementById('main-title');
console.log(title);
```

2. **getElementsByClassName()**: Selects elements by their class name, returning an HTMLCollection. An HTMLCollection is a live collection, meaning it updates automatically when the document changes.
    

```javascript
const items = document.getElementsByClassName('list-item');
console.log(items);
```

3. **getElementsByTagName()**: Selects elements by their tag name, returning an HTMLCollection. This method is useful when you want to manipulate all elements of a particular type, like all `<p>` tags.
    

```javascript
const paragraphs = document.getElementsByTagName('p');
console.log(paragraphs);
```

4. **querySelector()**: Selects the first element that matches a CSS selector. It’s flexible and allows you to use any valid CSS selector.
    

```javascript
const firstItem = document.querySelector('.list-item');
console.log(firstItem);
```

5. **querySelectorAll()**: Selects all elements that match a CSS selector, returning a NodeList. Unlike an HTMLCollection, a NodeList is a static collection and does not update automatically when the document changes.
    

```javascript
const allItems = document.querySelectorAll('.list-item');
console.log(allItems);
```

---

### Modifying HTML Elements

Once an element is selected, you can modify its content, attributes, and style.

1. **Changing Text Content**: This modifies the text inside an element without affecting any nested HTML.
    

```javascript
title.textContent = 'Updated Title';
```

2. **Changing HTML Content**: This modifies the HTML inside an element, allowing you to add HTML tags.
    

```javascript
title.innerHTML = '<span>New Title with HTML</span>';
```

3. **Modifying Attributes**: You can change, add, or remove attributes like `href`, `src`, or `class`.
    

```javascript
const link = document.querySelector('a');
link.setAttribute('href', 'https://www.example.com');
link.removeAttribute('target');
```

4. **Changing Styles**: This modifies inline styles directly on the element.
    

```javascript
title.style.color = 'blue';
title.style.fontSize = '24px';
```

5. **Adding and Removing Classes**: Use classList methods to easily manage CSS classes.
    

```javascript
title.classList.add('highlight');
title.classList.remove('highlight');
```

6. **Creating and Appending Elements**: Dynamically create new HTML elements and add them to the DOM.
    

```javascript
const newItem = document.createElement('li');
newItem.textContent = 'New List Item';
const list = document.querySelector('ul');
list.appendChild(newItem);
```

7. **Removing Elements**: Remove an existing child element from its parent.
    

```javascript
list.removeChild(newItem);
```

---

Now, you can create a variety of practice projects like a digital clock, task manager, theme changer, accordion, and image carousel and many more.

👍🏼 Keep Learning and Growing!