getElementById and getElementsByClassName
Use classic selection methods.
getElementById and getElementsByClassName is a free JavaScript Academy lesson on CoddyKit. This is lesson 2 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, and your progress syncs across the web and the CoddyKit app. The JavaScript Academy course includes 4 lessons in total.
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.
Learn JavaScript with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 59
- Lessons
- 200
Frequently Asked Questions
Is the “getElementById and getElementsByClassName” lesson free?
Yes — any 3 lessons of the JavaScript Academy learning path, including “getElementById and getElementsByClassName”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The JavaScript Academy course includes 4 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.
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