Back to Exercises
Example Elements
Card 1#card-1 .card
Card 2#card-2 .card
Card 3#card-3 .card
Selection Methods
// ID (single)
const header = document.getElementById('card-1');
// Class (HTMLCollection)
const cards = document.getElementsByClassName('card');
// First match (CSS selector)
const firstCard = document.querySelector('.card');
// All matches (NodeList)
const allCards = document.querySelectorAll('.card');
// Accessing individuals
cards[0];
allCards[1];
Full Code Used in This Demo
HTML
<div id="card-1" class="card">Card 1</div>
<div id="card-2" class="card">Card 2</div>
<div id="card-3" class="card">Card 3</div>
CSS
.card { border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; }
JavaScript
function runSelections() {
const idOne = document.getElementById('card-1');
const byClass = document.getElementsByClassName('card');
const first = document.querySelector('.card');
const all = document.querySelectorAll('.card');
}