# JavaScript DOM (Document Object Model) - Complete Guide

The **DOM** (Document Object Model) represents the structure of a web page and allows JavaScript to **manipulate** HTML and CSS dynamically.

## **What is the DOM?**

* The **DOM** is a tree-like structure where each HTML element is represented as an object.
    
* It allows JavaScript to interact with and modify the web page.
    
* The `document` object is the entry point to the DOM.
    

---

## **1\. Accessing Elements in the DOM**

### **1\. getElementById()** (Select a single element by `id`)

```html
<h1 id="main-title">Hello World</h1>
<script>
let title = document.getElementById("main-title");
console.log(title.textContent); // Output: Hello World
</script>
```

✅ **Output:** `Hello World`

---

### **2\. getElementsByClassName()** (Select multiple elements by `class`)

```html
<p class="description">This is a paragraph.</p>
<p class="description">Another paragraph.</p>

<script>
let paragraphs = document.getElementsByClassName("description");
console.log(paragraphs[0].textContent); // Output: This is a paragraph.
console.log(paragraphs.length); // Output: 2
</script>
```

✅ **Output:**

```c
This is a paragraph.
2
```

---

### **3\. getElementsByTagName()** (Select elements by `tag`)

```html
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<script>
let allParagraphs = document.getElementsByTagName("p");
console.log(allParagraphs[0].textContent); // Output: This is a paragraph.
</script>
```

✅ **Output:** `This is a paragraph.`

---

### **4\. querySelector()** (Selects the first matching element)

```html
<p class="description">This is a paragraph.</p>
<p class="description">Another paragraph.</p>

<script>
let firstParagraph = document.querySelector(".description");
console.log(firstParagraph.textContent); // Output: This is a paragraph.
</script>
```

✅ **Output:** `This is a paragraph.`

---

### **5\. querySelectorAll()** (Selects all matching elements)

```html
<button>Button 1</button>
<button>Button 2</button>

<script>
let allButtons = document.querySelectorAll("button");
console.log(allButtons.length); // Output: 2
</script>
```

✅ **Output:** `2`

---

## **2\. Modifying DOM Elements**

### **1\. Changing Text Content**

```html
<h1 id="main-title">Old Title</h1>

<script>
document.getElementById("main-title").textContent = "New Title";
console.log(document.getElementById("main-title").textContent); 
// Output: New Title
</script>
```

✅ **Output:** `New Title`

---

### **2\. Changing Inner HTML**

```html
<h1 id="main-title">Old Title</h1>

<script>
document.getElementById("main-title").innerHTML = "<span style='color: red;'>New Title</span>";
</script>
```

✅ **Output:** **New Title** (in red color)

---

### **3\. Changing CSS Styles**

```html
<h1 id="main-title">Styled Title</h1>

<script>
document.getElementById("main-title").style.color = "blue";
document.getElementById("main-title").style.fontSize = "30px";
</script>
```

✅ **Output:** The text "Styled Title" appears in **blue color and larger size.**

---

### **4\. Adding and Removing Classes**

```html
<h1 id="main-title">Hello</h1>

<style>
.highlight { color: red; font-size: 25px; }
</style>

<script>
let title = document.getElementById("main-title");
title.classList.add("highlight"); // Adds the class
console.log(title.classList.contains("highlight")); // Output: true
title.classList.remove("highlight"); // Removes the class
console.log(title.classList.contains("highlight")); // Output: false
</script>
```

✅ **Output:**

```c
true
false
```

---

## **3\. Creating and Removing Elements**

### **1\. Creating a New Element**

```html
<script>
let newDiv = document.createElement("div");
newDiv.textContent = "This is a new div";
document.body.appendChild(newDiv); // Adds it to the body
</script>
```

✅ **Output:** A new `<div>` appears with the text **"This is a new div".**

---

### **2\. Removing an Element**

```html
<h1 id="main-title">I will be removed</h1>

<script>
document.getElementById("main-title").remove();
</script>
```

✅ **Output:** The `<h1>` element disappears.

---

### **3\. Replacing an Element**

```html
<h1 id="main-title">Old Heading</h1>

<script>
let newHeading = document.createElement("h2");
newHeading.textContent = "New Heading";
let oldHeading = document.getElementById("main-title");
document.body.replaceChild(newHeading, oldHeading);
</script>
```

✅ **Output:** "Old Heading" is replaced with **"New Heading"** (in `<h2>` tag).

---

## **4\. Event Listeners in the DOM**

### **1\. Using addEventListener()**

```html
<button id="myButton">Click Me</button>

<script>
document.getElementById("myButton").addEventListener("click", function() {
    alert("Button Clicked!");
});
</script>
```

✅ **Output:** Clicking the button shows an **alert saying "Button Clicked!"**.

---

## **5\. Form Handling**

```html
<form id="myForm">
    <input type="text" id="username" placeholder="Enter name">
    <button type="submit">Submit</button>
</form>
<p id="output"></p>

<script>
document.getElementById("myForm").addEventListener("submit", function(event) {
    event.preventDefault(); // Prevents page reload
    let name = document.getElementById("username").value;
    document.getElementById("output").textContent = "Hello, " + name;
});
</script>
```

✅ **Output:** Entering "John" and clicking Submit displays **"Hello, John"**.

---

## **6\. setTimeout and setInterval**

### **1\. setTimeout**

```js
setTimeout(function() {
    console.log("This appears after 3 seconds");
}, 3000);
```

✅ **Output:** `"This appears after 3 seconds"` (after 3 sec).

---

### **2\. setInterval**

```js
setInterval(function() {
    console.log("Repeating every 2 seconds");
}, 2000);
```

✅ **Output:** Prints `"Repeating every 2 seconds"` repeatedly.

---

## **7\. Local Storage**

```js
localStorage.setItem("username", "JohnDoe");
console.log(localStorage.getItem("username")); // Output: JohnDoe
localStorage.removeItem("username");
console.log(localStorage.getItem("username")); // Output: null
```

✅ **Output:**

```c
JohnDoe
null
```

---

## **Conclusion**

* The **DOM** enables JavaScript to manipulate HTML and CSS dynamically.
    
* We can **access, modify, add, remove, and traverse** elements.
    
* **Event listeners** allow interaction.
    
* **Form handling & storage** enhance functionality.