Advance JavaScript (DOM, BOM, Web API) / Document Object Model

Selecting Elements

📌 What is DOM Selection?

DOM selection means finding HTML elements using JavaScript so that we can read, modify, or manipulate them (change text, style, attributes, etc.).

🔍 1. getElementById()

✔️ Purpose: Selects one element using its unique id.

document.getElementById("id");

🧪 Example

<p id="message">Hello World</p>
const text = document.getElementById("message");
console.log(text);
<p id="message">Hello World</p>

📝 Explanation

  • IDs are unique

  • Returns a single element

  • Fastest and most commonly used

🔍 2. getElementsByClassName()

✔️ Purpose: Selects multiple elements having the same class name.

document.getElementsByClassName("className");

🧪 Example

<p class="item">Apple</p>
<p class="item">Banana</p>
const items = document.getElementsByClassName("item");
console.log(items);
HTMLCollection(2) [p.item, p.item]

📝 Explanation

  • Returns HTMLCollection

  • You must access elements using index

  • Not an array

console.log(items[0].textContent);
Apple

🔍 3. getElementsByTagName()

✔️ Purpose: Selects elements by their HTML tag name.

document.getElementsByTagName("tagName");

🧪 Example

<h1>Title</h1>
<h1>Subtitle</h1>
const headings = document.getElementsByTagName("h1");
console.log(headings.length);
2

📝 Explanation

  • Returns HTMLCollection

  • Useful when selecting all same tag elements

🔍 4. querySelector()

✔️ Purpose: Selects the first matching element using CSS selectors.

document.querySelector("selector");

🧪 Example

<p class="info">First</p>
<p class="info">Second</p>
const para = document.querySelector(".info");
console.log(para.textContent);
First

📝 Explanation

  • Uses CSS selectors

  • Returns only the first match

  • Very flexible and modern

🔍 5. querySelectorAll()

✔️ Purpose: Selects all matching elements using CSS selectors.

document.querySelectorAll("selector");

🧪 Example

<li>One</li>
<li>Two</li>
<li>Three</li>
const listItems = document.querySelectorAll("li");
console.log(listItems);
NodeList(3) [li, li, li]

📝 Explanation

  • Returns a NodeList

  • Can use forEach()

listItems.forEach(item => {
  console.log(item.textContent);
});
One
Two
Three

🔁 HTMLCollection vs NodeList

Feature

HTMLCollection

NodeList

Returned by

getElementsBy*

querySelectorAll

Live update

✅ Yes

❌ No

forEach

❌ No

✅ Yes

📌 Common Use Cases

// Change text
document.getElementById("title").textContent = "New Title";

// Change style
document.querySelector(".box").style.background = "blue";

// Loop through multiple elements
document.querySelectorAll(".item").forEach(el => {
  el.style.color = "red";
});

🧠 Summary

  • getElementById() → Single element

  • getElementsByClassName() → Multiple (HTMLCollection)

  • getElementsByTagName() → Multiple by tag

  • querySelector() → First match

  • querySelectorAll() → All matches (NodeList)