# DOM Manipulation in JavaScript — A Beginner's Cheatsheet

* * *

If you are just getting started with javascript,DOM Manipulation is one of the first places where things start to feel real - you write code and something actually changes on the screen.

But it also has a surprising number of small traps that are not obvious until you hit them.

Here's everything I learned today , organized so you don't have to make the same mistake I did.

* * *

### What is DOM ?

DOM stands for "Document Object Model" . it's basically how Javascript sees your HTML page- as a tree of elements that you can select, change,and interact with using code.

* * *

### 1.Selecting Elements

Before you can change anything, you need to grab the element first.

```javascript
// By ID — returns a single element
document.getElementById('title')

// By class name — returns an HTMLCollection (NOT one element!)
document.getElementsByClassName('card')

// By CSS selector — cleanest option, returns first match
document.querySelector('.card')
document.querySelector('#title')
```

* * *

### 2.Changing Styles

Once you have the elements, you can change its CSS directly from JavaScript:

```javascript
const title = document.getElementById('title')

title.style.backgroundColor = 'green'
title.style.padding = '15px'
title.style.borderRadius = '15px'
```

* * *

### 3.Reading Elements properties

```javascript
const title = document.getElementById('title')

title.id          // returns the id value
title.className   // returns class name(s) as a string
```

* * *

### 4.Reading Content

```javascript
title.textContent   // all text including hidden elements, no HTML tags
title.innerText     // only visible text (layout-aware)
title.innerHTML     // full HTML content inside the element (includes tags)
```

* * *

**use case**

*   use `.textContent` when you just want the raw text
    
*   use`.innerText` when you care about what the user actually sees
    
*   use `.innerHTML` when you need to read or write HTMK tags inside an element
    

* * *

![](https://cdn.hashnode.com/uploads/covers/6a24a04985227ad88016da31/f7c1ad52-b1be-4b03-ab3d-9e53a5982de2.png align="center")

If you're also learning JavaScript, I hope this saves you some debugging time. These are small things but they add up fast when you're just starting out.

Let's keep building 🚀