JavaScript DOM

Selecting Elements

Learn how to find and grab any element on your webpage - the first step to making websites interactive!

Find videos you like?

Save to resource drawer for future reference!

Think of Your Webpage as a Treasure Map 🗺️

Every button, image, paragraph, and div is a treasure! But before you can change them, you need to find them first. That's where element selection comes in!

🎯 Point & Select

⚡ Super Fast

🎨 Change Anything

The 3-Step Process

Every time you want to do something with an element, you follow these steps

Find It

Tell JavaScript which element you want by using a selector (ID, class, or tag name)

document.querySelector('.button')

Store It

Save the element in a variable so you can use it multiple times

const btn = element

Use It

Now do whatever you want - change text, colors, add clicks, anything!

btn.textContent = 'Hi!'

3 Ways to Find Elements

Each way is perfect for different situations. Click each card to see it in action!

By ID

#myElement

Best for: Unique elements like header, main button, or logo

// HTML:

// JavaScript:

document.getElementById('submit')

By Class

.button

Best for: Multiple elements that share styling (all buttons, all cards)

// HTML:

// JavaScript:

document.querySelector('.card')

By Tag

button

Best for: Selecting all of one type (all paragraphs, all images)

// HTML:

// JavaScript:

document.querySelector('button')

Interactive Playground

Try selecting elements yourself! Click the buttons to see selection in action

Try It Yourself!

Click the colored buttons in the demo above to see how different selectors work. Watch the elements light up and see the console output!

Quick Reference Cheat Sheet

Copy these patterns - they work every time!

querySelector() - Get First Match

querySelector('#header')

Element with id="header"

querySelector('.btn')

First element with class="btn"

querySelector('p')

First <p> tag

querySelector('[type="email"]')

Element with type="email"

querySelectorAll() - Get All Matches

querySelectorAll('.card')

ALL elements with class="card"

querySelectorAll('button')

ALL <button> tags

querySelectorAll('div.active')

ALL <div> with class="active"

querySelectorAll('ul > li')

ALL <li> inside <ul>

⚠️ Common Mistakes (And How to Fix Them!)

❌ Forgetting the dot or hash

❌ Wrong:

querySelector('button')

✅ Correct:

querySelector('.button')

Tip: Use . for classes, # for IDs!

❌ Not checking if element exists

❌ Wrong:

const btn = querySelector('.btn');
btn.click(); // Error if not found!

✅ Correct:

const btn = querySelector('.btn');
if (btn) btn.click();

Tip: Always check before using!

❌ Selecting before page loads

❌ Wrong:

// Script at top of page
const btn = querySelector('.btn'); // null!

✅ Correct:

// Wait for page to load
document.addEventListener('DOMContentLoaded', () => {\n  const btn = querySelector('.btn');\n});

Tip: Wait for page to be ready!

🎯 Practice Challenge

Can you select these elements correctly?

Question 1: Select the element with id="logo"

Show Answer

document.getElementById("logo")

Question 2: Select ALL elements with class="card"

Show Answer

document.querySelectorAll(".card")

Question 3: Select the FIRST button on the page

Show Answer

document.querySelector("button")

Question 4: Select ALL paragraph tags

Show Answer

document.querySelectorAll("p")

Previous Topic

What is DOM?

Understanding the Document Object Model and its tree structure.

Next Topic

DOM Manipulation

Creating, modifying, and removing elements dynamically.

Ask a Question

Have a question about Selecting Elements? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

JavaScript DOM

Selecting Elements

Learn how to find and grab any element on your webpage - the first step to making websites interactive!

Find videos you like?

Save to resource drawer for future reference!

Think of Your Webpage as a Treasure Map 🗺️

Every button, image, paragraph, and div is a treasure! But before you can change them, you need to find them first. That's where element selection comes in!

🎯 Point & Select

⚡ Super Fast

🎨 Change Anything

The 3-Step Process

Every time you want to do something with an element, you follow these steps

Find It

Tell JavaScript which element you want by using a selector (ID, class, or tag name)

document.querySelector('.button')

Store It

Save the element in a variable so you can use it multiple times

const btn = element

Use It

Now do whatever you want - change text, colors, add clicks, anything!

btn.textContent = 'Hi!'

3 Ways to Find Elements

Each way is perfect for different situations. Click each card to see it in action!

By ID

#myElement

Best for: Unique elements like header, main button, or logo

// HTML:

// JavaScript:

document.getElementById('submit')

By Class

.button

Best for: Multiple elements that share styling (all buttons, all cards)

// HTML:

// JavaScript:

document.querySelector('.card')

By Tag

button

Best for: Selecting all of one type (all paragraphs, all images)

// HTML:

// JavaScript:

document.querySelector('button')

Interactive Playground

Try selecting elements yourself! Click the buttons to see selection in action

Try It Yourself!

Click the colored buttons in the demo above to see how different selectors work. Watch the elements light up and see the console output!

Quick Reference Cheat Sheet

Copy these patterns - they work every time!

querySelector() - Get First Match

querySelector('#header')

Element with id="header"

querySelector('.btn')

First element with class="btn"

querySelector('p')

First <p> tag

querySelector('[type="email"]')

Element with type="email"

querySelectorAll() - Get All Matches

querySelectorAll('.card')

ALL elements with class="card"

querySelectorAll('button')

ALL <button> tags

querySelectorAll('div.active')

ALL <div> with class="active"

querySelectorAll('ul > li')

ALL <li> inside <ul>

⚠️ Common Mistakes (And How to Fix Them!)

❌ Forgetting the dot or hash

❌ Wrong:

querySelector('button')

✅ Correct:

querySelector('.button')

Tip: Use . for classes, # for IDs!

❌ Not checking if element exists

❌ Wrong:

const btn = querySelector('.btn');
btn.click(); // Error if not found!

✅ Correct:

const btn = querySelector('.btn');
if (btn) btn.click();

Tip: Always check before using!

❌ Selecting before page loads

❌ Wrong:

// Script at top of page
const btn = querySelector('.btn'); // null!

✅ Correct:

// Wait for page to load
document.addEventListener('DOMContentLoaded', () => {\n  const btn = querySelector('.btn');\n});

Tip: Wait for page to be ready!

🎯 Practice Challenge

Can you select these elements correctly?

Question 1: Select the element with id="logo"

Show Answer

document.getElementById("logo")

Question 2: Select ALL elements with class="card"

Show Answer

document.querySelectorAll(".card")

Question 3: Select the FIRST button on the page

Show Answer

document.querySelector("button")

Question 4: Select ALL paragraph tags

Show Answer

document.querySelectorAll("p")

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

What is DOM?

DOM Manipulation

JavaScript Code Editor

Building Your Learning Module...

Selecting Elements

Think of Your Webpage as a Treasure Map 🗺️

Find It

Store It

Use It

3 Ways to Find Elements

By ID

By Class

By Tag

Try It Yourself!

querySelector() - Get First Match

querySelectorAll() - Get All Matches

❌ Forgetting the dot or hash

❌ Not checking if element exists

❌ Selecting before page loads

What is DOM?

DOM Manipulation

JavaScript Code Editor

Selecting Elements

Think of Your Webpage as a Treasure Map 🗺️

Find It

Store It

Use It

3 Ways to Find Elements

By ID

By Class

By Tag

Try It Yourself!

querySelector() - Get First Match

querySelectorAll() - Get All Matches

❌ Forgetting the dot or hash

❌ Not checking if element exists

❌ Selecting before page loads