Understanding DOM Selection Methods in JavaScript

When working DOM (Document Object Model) in JavaScript multiple ways to select elements.

There are six elements here.

• querySelector
• querySelectorAll
• getElementById
• getElementsByClassName
• getElementsByTagName
• getElementsByName

1. document.querySelector()

Returns the first matching element for a given CSS selector.

Always returns a single element (or null if not found).

<p class="text">Hello</p>
<p class="text">World</p>

<script>
  let results = document.querySelector(".text");
  console.log(results.textContent); // Output: Hello(first element print)
</script>

when you use it only need one element ( first element match).

1. document.querySelectorAll()

Returns all matching elements for a given CSS selector.

Output is a NodeList (you can loop through it).

<p class="text">Hello</p>
<p class="text">World</p>

<script>
  let allParas = document.querySelectorAll(".text");
  allParas.forEach(p => console.log(p.textContent));
  // Output:
  // Hello
  // World
</script>

when you use it need all matches.

1. document.getElementById()

• Selects an element by its unique ID.

• Always returns a single element (or null if not found).

<p id="title">Welcome back!</p>

<script>
  let heading = document.getElementById("title");
  console.log(heading.textContent); // Output: Welcome back!
</script>

1. document.getElementsByClassName()

Returns all elements with the given class name.

Output is an HTMLCollection (similar to NodeList but live).

<p class="note">First</p>
<p class="note">Second</p>

<script>
  let notes = document.getElementsByClassName("note");
  console.log(notes[0].textContent); // Output: First
  console.log(notes[1].textContent); // Output: Second
</script>

• when you use targeting multiple elements with the same class.

1. document.getElementsByTagName()

Returns all elements with the specified tag name.

Output is an HTMLCollection.

<h1>Heading 1</h1>
<h1>Heading 2</h1>

<script>
  let headings = document.getElementsByTagName("h1");
  console.log(headings.length); // Output: 2
</script>

• When you use the elements selecting elements by tag type (div, p, h1, etc.).

1. document.getElementsByName()

Returns all elements with the given name attribute.

• We Mostly used with form inputs in this ByName()

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

<script>
  let genderInputs = document.getElementsByName("gender");
  genderInputs.forEach(input => console.log(input.value));
  // Output:
  // male
  // female
</script>

Here i write the easy-to-understand summary of DOM element selection methods.

1. Method getElementById
   Returns Single element
   Based On id
   Type of Collection Element (or null)
   *Notes * IDs must be unique

2.

Method getElementsByClassName
Returns Multiple elements
Based On class
*Type of Live HTMLCollection
**Notes * Updates if DOM changes

3.

Method getElementsByTagName

Returns Multiple elements
Based On tag
*Type of Live HTMLCollection
**Notes * Example: “p”, “div”

4.

Method getElementsByName
Returns Multiple elements
Based On name attribute
*Type of NodeList-like
**Notes * Mostly used in forms

5.
Method querySelector

Returns First matching element

Based On CSS selector
*Type of Element (or null)
**Notes * Very flexible

6.

Method querySelectorAll

Returns All matching elements

Based On CSS selector
*Type of Static NodeList
**Notes * Does not auto-update