JavaScript DOM: A Beginner’s Guide to Selecting HTML Elements

When you build web pages, the content you see in the browser is represented as the Document Object Model (DOM). Think of the DOM as a tree-like structure where every tag in your HTML, like headings, paragraphs, buttons, and lists, becomes an object that JavaScript can interact with.

But before you can change anything on the page, you first need to select the element you want to work with. That’s what this guide is all about.

What you’ll learn

By the end of this article, you’ll understand:

• What the DOM is and why it matters.
• The main ways to select single or multiple elements.
• The difference between live collections and static lists.
• How to use these selections in real-world examples.
• Common mistakes to avoid as a beginner.

Understanding the DOM

The DOM acts as a connection between your HTML structure and the JavaScript code that interacts with it. It provides JavaScript with access to every element on the page, allowing you to read, update, or respond to user actions.

For example:

• Change the text of a heading.
• Hide or show a section.
• Add a click event to a button.

All of this starts with selecting elements correctly.

Selecting a single element

getElementById

The easiest and fastest way to grab an element with a unique ID.

const title = document.getElementById('site-title');
title.textContent = 'Hello, world!';

querySelector

More powerful because it accepts any CSS selector. It returns the first match it finds.

const firstLink = document.querySelector('.nav a');
firstLink.setAttribute('aria-current', 'page');

Tip: Use getElementById for quick lookups, and querySelector when you need more flexibility.

Selecting multiple elements

getElementsByClassName

Finds all elements with a specific class. Returns a live collection.

const cards = document.getElementsByClassName('card');
console.log(cards.length); // updates if new cards are added

getElementsByTagName

Finds all elements of a certain tag (like p or div).

querySelectorAll

Uses CSS selectors to find all matches. Returns a static NodeList.

const items = document.querySelectorAll('.item');
items.forEach((el, i) => {
el.textContent = Item ${i + 1};
});

Key difference: HTMLCollections update automatically (live), while NodeLists stay the same (static).

Live vs. Static Example

<ul id="list">
<li class="item">A</li>
<li class="item">B</li>
</ul>

const live = document.getElementsByClassName('item'); // live
const staticList = document.querySelectorAll('.item'); // static
// Add new list item
const li = document.createElement('li');
li.className = 'item';
li.textContent = 'C';
document.getElementById('list').appendChild(li);
console.log(live.length);     // 3
console.log(staticList.length); // 2

Putting it all together (mini project)

Here’s a simple example that ties everything together.

HTML:

<h1 id="site-title">Welcome</h1>
<ul class="items">
<li class="item">One</li>
<li class="item">Two</li>
</ul>
<button id="changeBtn">Change Title</button>

JavaScript:

// Select elements
const title = document.getElementById('site-title');
const btn = document.querySelector('#changeBtn');
const listItems = document.querySelectorAll('.item');
// Change title when button is clicked
btn.addEventListener('click', () => {
title.textContent = 'Title changed!';
});
// Update list items
listItems.forEach((li, index) => {
li.textContent = ${index + 1}. ${li.textContent};
});

Best practices for beginners

• Check before using: Always confirm an element exists (if (element) { ... }).
• Use data attributes: For JavaScript hooks, use data-js instead of CSS classes.
• Cache selectors: Store elements in variables if you’ll use them multiple times.
• Avoid deep selectors: Keep them simple and easy to read.
• Use event delegation: Instead of attaching many event listeners, attach one to a parent element and handle clicks inside.

Conclusion

Selecting elements in the DOM is the foundation of making any web page interactive. With the methods you have learned, such as getElementById, querySelector, and `querySelectorAll ', you can now target specific elements and work with them confidently. You also understand the difference between live collections and static lists, which helps you decide the right approach when working with groups of elements.
By practicing these concepts in small projects like changing text, updating lists, or responding to button clicks, you’ll build the skills needed to move on to more advanced topics like DOM manipulation, styling, and event handling. The more you explore, the more natural selecting and working with elements will feel, and that is a big step toward becoming comfortable with JavaScript.

You can reach out to me via LinkedIn