JavaScript

In JavaScript, when working with the DOM (Document Object Model), you often need to select multiple elements. The results of these selections are stored in DOM Collections — special array-like objects that allow you to work with groups of DOM elements.

---

🧾 What are DOM Collections?

A DOM Collection is a list (like an array) of HTML elements returned by DOM methods like:

• getElementsByTagName()
• getElementsByClassName()
• getElementsByName()
• document.forms, document.images, document.links, etc.

DOM collections look like arrays but are not true arrays — you can loop through them, but they don’t support array methods like .map() or .filter().

---

🔸 Common DOM Collection Methods

Method	Description
getElementsByTagName()	Selects all elements with a specific tag
getElementsByClassName()	Selects all elements with a specific class
getElementsByName()	Selects all elements with a specific name
document.forms	All <form> elements
document.images	All <img> elements
document.links	All <a> tags with href attribute

---

🧪 Example 1: getElementsByTagName()

<p>Paragraph 1</p>
<p>Paragraph 2</p>

<script>
  const paragraphs = document.getElementsByTagName("p");

  console.log(paragraphs);         // HTMLCollection
  console.log(paragraphs.length);  // 2

  // Loop through the collection
  for (let i = 0; i < paragraphs.length; i++) {
    console.log(paragraphs[i].textContent);
  }
</script>

---

🧪 Example 2: getElementsByClassName()

<div class="box">Box 1</div>
<div class="box">Box 2</div>

<script>
  const boxes = document.getElementsByClassName("box");

  for (let box of boxes) {
    box.style.backgroundColor = "lightblue";
  }
</script>

---

🔄 Looping Through DOM Collections

You can loop through HTMLCollections using:

1. for loop

for (let i = 0; i < elements.length; i++) {
  console.log(elements[i]);
}

2. for...of loop

for (let el of elements) {
  console.log(el);
}

❌ DOM Collections do not support forEach() directly.
✅ You can convert them to arrays using Array.from() if needed.

const array = Array.from(document.getElementsByTagName("p"));
array.forEach(el => console.log(el));

---

🧪 Example 3: getElementsByName()

<input type="radio" name="gender" value="Male">
<input type="radio" name="gender" value="Female">

<script>
  const genderInputs = document.getElementsByName("gender");
  
  genderInputs.forEach(input => {
    console.log(input.value); // ❌ Will throw error
  });

  // ✅ Correct way:
  for (let input of genderInputs) {
    console.log(input.value);
  }
</script>

---

🧪 Example 4: Built-in Collections

<form id="myForm">
  <input type="text" name="username">
  <input type="submit">
</form>

<script>
  const forms = document.forms;  // HTMLCollection of all forms
  console.log(forms[0].elements["username"].value); // Access input inside form
</script>

---

✅ Summary Table

Property/Method	Returns
getElementsByTagName()	HTMLCollection of matching elements
getElementsByClassName()	HTMLCollection of matching elements
getElementsByName()	NodeList of elements with given name
document.forms	HTMLCollection of all forms
document.images	HTMLCollection of all images
document.links	HTMLCollection of links with href

---

🧠 Tips to Remember

• DOM Collections are not arrays.
• Use for or for...of loops for iteration.
• Convert to arrays using Array.from() for modern methods like .map() or .filter().

---