document.getElementById('id')       // by ID
document.querySelector('.class')    // first match
document.querySelectorAll('li')     // all matches (NodeList)

Deep Dive Course

**querySelector** and **querySelectorAll** are the modern standard for selecting DOM elements — they accept any CSS selector. **getElementById** is faster for single ID lookups. **getElementsByClassName** and **getElementsByTagName** return **live HTMLCollections** (update when DOM changes), while querySelectorAll returns a **static NodeList**.

1Understanding Element Selection

querySelector and querySelectorAll are the modern standard for selecting DOM elements — they accept any CSS selector. getElementById is faster for single ID lookups. getElementsByClassName and getElementsByTagName return live HTMLCollections (update when DOM changes), while querySelectorAll returns a static NodeList.

💡

querySelectorAll returns a static NodeList, not an array. Use Array.from() or [...nodeList] to use array methods.

editor.html

// Modern selection methods
const title = document.querySelector('h1');
const buttons = document.querySelectorAll('.btn');
const nav = document.getElementById('main-nav');

console.log(title.textContent);
console.log(buttons.length);

// Convert NodeList to array
const btnArray = Array.from(buttons);
btnArray.filter(btn => btn.disabled).forEach(btn => {
  console.log(btn.id + ' is disabled');
});

localhost:3000

2Practical Example

Here is a real-world application of Element Selection showing how it is used in production JavaScript code.

editor.html

// Context-based selection (scope to a parent)
const form = document.querySelector('#loginForm');
const inputs = form.querySelectorAll('input');
// Only searches within #loginForm!

localhost:3000

3Best Practices

Follow these guidelines when working with Element Selection:

1. Use querySelector/querySelectorAll for flexible CSS selector queries

2. Use getElementById for the fastest single-element ID lookup

3. Convert NodeList to array with Array.from() for filtering

⚠️

Tip: querySelectorAll returns a static NodeList, not an array. Use Array.from() or [...nodeList] to use array methods.

editor.html

// Modern selection methods
const title = document.querySelector('h1');
const buttons = document.querySelectorAll('.btn');
const nav = document.getElementById('main-nav');

console.log(title.textContent);
console.log(buttons.length);

// Convert NodeList to array
const btnArray = Array.from(buttons);
btnArray.filter(btn => btn.disabled).forEach(btn => {
  console.log(btn.id + ' is disabled');
});

localhost:3000

Examples

Example 01Basic Usage

// Modern selection methods
const title = document.querySelector('h1');
const buttons = document.querySelectorAll('.btn');
const nav = document.getElementById('main-nav');

console.log(title.textContent);
console.log(buttons.length);

// Convert NodeList to array
const btnArray = Array.from(buttons);
btnArray.filter(btn => btn.disabled).forEach(btn => {
  console.log(btn.id + ' is disabled');
});

Example 02Advanced Example

// Context-based selection (scope to a parent)
const form = document.querySelector('#loginForm');
const inputs = form.querySelectorAll('input');
// Only searches within #loginForm!

Best Practices

Use querySelector/querySelectorAll for flexible CSS selector queries
Use getElementById for the fastest single-element ID lookup
Convert NodeList to array with Array.from() for filtering

Interview Question

What is the difference between querySelectorAll and getElementsByClassName?▼

Hint: Static vs live collection.

querySelectorAll returns a STATIC NodeList — a snapshot at query time that doesn't update when the DOM changes. getElementsByClassName returns a LIVE HTMLCollection — it auto-updates when elements are added/removed. Static is usually safer; live can cause infinite loops if you add/remove elements while iterating.

Exercises

MediumPractice using Element Selection in a real scenario.

View Solution

// Modern selection methods
const title = document.querySelector('h1');
const buttons = document.querySelectorAll('.btn');
const nav = document.getElementById('main-nav');

console.log(title.textContent);
console.log(buttons.length);

// Convert NodeList to array
const btnArray = Array.from(buttons);
btnArray.filter(btn => btn.disabled).forEach(btn => {
  console.log(btn.id + ' is disabled');
});

Frequently Asked Questions

What is the difference between querySelectorAll and getElementsByClassName?▼

Related Functions

Selection-MethodsElements-ManipulationWhat-is-DOM