Interview question
What are the different ways to select DOM elements in JavaScript? JavaScript में DOM elements select करने के अलग-अलग तरीके क्या हैं?
Answer
JavaScript provides several methods to select elements from the DOM, each with different return types and use cases.
| Method | Returns | Notes |
|---|---|---|
| getElementById() | Single element | Fastest, returns null if not found |
| getElementsByClassName() | Live HTMLCollection | Updates automatically when DOM changes |
| getElementsByTagName() | Live HTMLCollection | Selects by tag name |
| querySelector() | Single element (first match) | Accepts any CSS selector |
| querySelectorAll() | Static NodeList | Does NOT update automatically, supports forEach |
// getElementById
const header = document.getElementById('header');
// getElementsByClassName - live collection
const items = document.getElementsByClassName('item');
console.log(items.length); // updates if items are added/removed
// getElementsByTagName
const allDivs = document.getElementsByTagName('div');
// querySelector - first match, any CSS selector
const firstButton = document.querySelector('.btn');
const nestedItem = document.querySelector('ul > li.active');
// querySelectorAll - static NodeList, all matches
const allButtons = document.querySelectorAll('.btn');
allButtons.forEach(btn => console.log(btn.textContent)); // NodeList supports forEach directly
// Converting HTMLCollection to array for array methods
const itemsArray = Array.from(items);
itemsArray.map(item => item.textContent);
// Live vs static difference
const liveList = document.getElementsByClassName('box');
const staticList = document.querySelectorAll('.box');
document.body.innerHTML += '<div class="box"></div>';
console.log(liveList.length); // increased automatically
console.log(staticList.length); // stays the same, was a snapshotJavaScript DOM से elements select करने के कई methods देता है, हर एक के अलग return types और use cases हैं।
| Method | Return करता है | Notes |
|---|---|---|
| getElementById() | एक element | सबसे तेज़, न मिलने पर null |
| getElementsByClassName() | Live HTMLCollection | DOM बदलने पर automatically update |
| querySelector() | पहला match | कोई भी CSS selector |
| querySelectorAll() | Static NodeList | Automatically update नहीं होता |
const header = document.getElementById('header');
const items = document.getElementsByClassName('item');
console.log(items.length); // live collection
const firstButton = document.querySelector('.btn');
const nestedItem = document.querySelector('ul > li.active');
const allButtons = document.querySelectorAll('.btn');
allButtons.forEach(btn => console.log(btn.textContent));
// HTMLCollection को array में convert करना
const itemsArray = Array.from(items);
// Live vs static
const liveList = document.getElementsByClassName('box');
const staticList = document.querySelectorAll('.box');
document.body.innerHTML += '<div class="box"></div>';
console.log(liveList.length); // automatically बढ़ता है
console.log(staticList.length); // वही रहता हैWas this answer clear?