JavaScript

The HTML DOM (Document Object Model) is what allows JavaScript to interact with your webpage. DOM methods are the tools that help you access, modify, add, and remove elements in the HTML document.

This guide will walk you through the most commonly used DOM methods in JavaScript with clear examples.

---

📘 What is the DOM?

• DOM stands for Document Object Model
• When a web page loads, the browser creates a DOM of the page, which is a tree-like structure.
• JavaScript can use this structure to access and change the HTML content, attributes, and even styles.

---

🔍 Accessing HTML Elements (DOM Selectors)

1. getElementById()

This method selects a single element by its id.

<p id="demo">Hello World</p>

<script>
  const element = document.getElementById("demo");
  console.log(element.textContent); // Output: Hello World
</script>

---

2. getElementsByClassName()

Selects all elements with a specific class. Returns an HTMLCollection (like an array).

<div class="item">Item 1</div>
<div class="item">Item 2</div>

<script>
  const items = document.getElementsByClassName("item");
  console.log(items[0].textContent); // Output: Item 1
</script>

---

3. getElementsByTagName()

Selects all elements with a specific tag name.

<p>One</p>
<p>Two</p>

<script>
  const paragraphs = document.getElementsByTagName("p");
  console.log(paragraphs.length); // Output: 2
</script>

---

4. querySelector()

Returns the first element that matches a CSS selector.

<p class="note">Note 1</p>
<p class="note">Note 2</p>

<script>
  const firstNote = document.querySelector(".note");
  console.log(firstNote.textContent); // Output: Note 1
</script>

---

5. querySelectorAll()

Returns all elements that match a CSS selector. It returns a NodeList (can use .forEach).

<p class="note">Note 1</p>
<p class="note">Note 2</p>

<script>
  const notes = document.querySelectorAll(".note");
  notes.forEach((note) => {
    console.log(note.textContent);
  });
</script>

---

✍️ Modifying Elements

1. textContent

Changes only the text inside an element.

document.getElementById("demo").textContent = "New text here";

2. innerHTML

Changes the entire HTML inside an element.

document.getElementById("demo").innerHTML = "<strong>Bold text</strong>";

3. style

Used to apply CSS styles directly from JavaScript.

document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.fontSize = "20px";

---

➕ Creating New Elements

const newPara = document.createElement("p");
newPara.textContent = "This is a new paragraph";
document.body.appendChild(newPara); // Adds it to the end of the body

---

❌ Removing Elements

const el = document.getElementById("demo");
el.remove();

Or with older method:

el.parentNode.removeChild(el);

---

🔄 Updating Attributes

You can get or set attributes like src, href, alt, etc.

const link = document.getElementById("myLink");
link.setAttribute("href", "https://google.com");
link.setAttribute("target", "_blank");

---

🎯 Event Handling with DOM

You can attach functions to run when events happen like clicks or form submissions.

<button id="btn">Click Me</button>

<script>
  const btn = document.getElementById("btn");
  btn.addEventListener("click", () => {
    alert("Button clicked!");
  });
</script>

---

🧠 Common DOM Methods (Quick Summary)

Method	Use
getElementById()	Selects element by ID
getElementsByClassName()	Selects elements by class
getElementsByTagName()	Selects elements by tag name
querySelector()	First element that matches a selector
querySelectorAll()	All elements that match a selector
createElement()	Creates a new element
appendChild()	Adds an element to the DOM
remove()	Deletes an element
setAttribute()	Sets an attribute on an element

---

✅ Conclusion

JavaScript DOM methods are powerful tools that let you:

• Select elements
• Modify content or styles
• Add or delete elements
• Attach events for interactivity

Mastering these methods is essential for building dynamic, interactive websites.

---