getElementById and getElementsByClassName
Use classic selection methods.
getElementById and getElementsByClassName is a free JavaScript Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
getElementById
getElementById returns the single element with the matching id, or null. Ids must be unique on a page, so this returns one element.
const header = document.getElementById("header");
console.log(header.tagName);No Hash Symbol
Unlike CSS selectors, you pass the raw id without the #. Passing "#header" would fail to match.
document.getElementById("menu"); // correct
document.getElementById("#menu"); // wrong, returns nullgetElementsByClassName
getElementsByClassName returns a live HTMLCollection of all elements that have the given class.
const cards = document.getElementsByClassName("card");
console.log(cards.length);HTMLCollection Is Live
The collection updates automatically as the DOM changes. If you add a new .card later, cards.length grows without re-querying.
const cards = document.getElementsByClassName("card");
// later, after appending a new .card element
// cards.length reflects the new total automaticallyIndexing a Collection
Access items by index. An HTMLCollection is array-like but is not a real array.
const cards = document.getElementsByClassName("card");
console.log(cards[0].textContent);No forEach Directly
Because it is array-like (not an array), HTMLCollection has no forEach. Convert it first or use a plain for loop.
const cards = document.getElementsByClassName("card");
for (let i = 0; i < cards.length; i++) {
console.log(cards[i].textContent);
}getElementsByTagName
getElementsByTagName returns a live HTMLCollection of every element of a given tag, such as all paragraphs.
const paras = document.getElementsByTagName("p");
console.log(paras.length);Multiple Classes
You can pass several class names separated by spaces. Elements must have all the listed classes to be included.
const items = document.getElementsByClassName("btn primary");Scoped to an Element
These methods also exist on elements, scoping the search to descendants of that element.
const list = document.getElementById("todo-list");
const items = list.getElementsByClassName("done");Converting to an Array
To use array methods like map or filter, spread the collection into a real array.
const cards = document.getElementsByClassName("card");
const titles = Array.from(cards).map((c) => c.textContent);When to Use Which
Use getElementById for fast unique lookups. Prefer querySelectorAll when you want a static snapshot or complex selectors; use the getElementsBy* family when you specifically want a live collection.
Quick Check
Pick the right behavior.
Recap
You learned getElementById (one element by raw id, no #), getElementsByClassName and getElementsByTagName (live HTMLCollections). Live collections need conversion via Array.from to use array methods, and they have no forEach of their own.
Frequently asked questions
Is the “getElementById and getElementsByClassName” lesson free?
Yes — the full text of “getElementById and getElementsByClassName” is free to read here on the web, and the JavaScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the JavaScript Academy course, upgrade to CoddyKit PRO.
What will I learn in “getElementById and getElementsByClassName”?
Use classic selection methods. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start JavaScript Academy?
No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “getElementById and getElementsByClassName” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this JavaScript Academy lesson?
Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Selecting Elements with querySelector
- getElementById and getElementsByClassName
- Traversing Parents, Children and Siblings
- NodeList vs HTMLCollection