JavaScript DOM (Document Object Model)

🔹 What is the DOM?

The DOM (Document Object Model) is a programming interface for web documents. It represents an HTML or XML document as a tree structure, where each element is a node.

JavaScript can interact with the DOM to:
✔ Change HTML content
✔ Modify CSS styles
✔ Add or remove elements
✔ Handle event.

🔹 How the DOM Works?

When a web page loads, the browser creates a DOM tree of the page. JavaScript can access this tree and modify elements dynamically.

🔹 Accessing the DOM Elements

JavaScript provides several methods to select elements:

1️⃣ Using `getElementById`

Selects an element by its ID.

let heading = document.getElementById("title");
heading.innerHTML = "New Title";

2️⃣ Using `getElementsByClassName`

Selects multiple elements by their class name.

let items = document.getElementsByClassName("item");
items[0].style.color = "red";

3️⃣ Using `getElementsByTagName`

Selects multiple elements by their tag name.

let paragraphs = document.getElementsByTagName("p");
paragraphs[0].innerText = "Updated paragraph!";

4️⃣ Using `querySelector`

Selects the first matching element using CSS selectors.

let firstDiv = document.querySelector("div");
firstDiv.style.backgroundColor = "yellow";

5️⃣ Using `querySelectorAll`

Selects all matching elements using CSS selectors.

let allItems = document.querySelectorAll(".item");
allItems.forEach(item => item.style.fontWeight = "bold");

🔹 Modifying the DOM Elements

Once selected, you can change the content, style, and attributes of elements.

🔹 Changing Content

document.getElementById("title").innerHTML = "Hello, DOM!";
document.getElementById("title").textContent = "New Text";

🔹 Changing CSS Styles

document.getElementById("title").style.color = "blue";
document.getElementById("title").style.fontSize = "24px";

🔹 Changing Attributes

document.getElementById("link").setAttribute("href", "https://example.com");

🔹 Adding and Removing Elements

JavaScript can create, insert, and remove elements dynamically.

🔹 Creating an Element

let newPara = document.createElement("p");
newPara.innerText = "This is a new paragraph.";
document.body.appendChild(newPara);

🔹 Removing an Element

let element = document.getElementById("title");
element.remove();

🔹 Handling Events in the DOM

JavaScript allows handling user interactions like clicks, typing, and more.

🔹 Adding a Click Event

document.getElementById("btn").addEventListener("click", function() {
    alert("Button Clicked!");
});

🔹 Mouse Over Event

document.getElementById("box").addEventListener("mouseover", function() {
    this.style.backgroundColor = "lightblue";
});

🔹 Conclusion

The DOM represents the structure of an HTML document.
JavaScript allows selecting, modifying, and removing elements dynamically.
Events help to interact with users.
The querySelector and addEventListener methods provide modern ways to manipulate the DOM.

JAVASCRIPT