A Beginner’s Guide to Selecting HTML Elements in JavaScript

JavaScript is a powerful programming language used to add interactivity and functionality to webpages. A fundamental skill in web development is selecting and manipulating HTML elements using JavaScript. In this guide, we’ll walk through the basics of selecting elements, providing examples to help students learn this essential skill.

Getting Started

Before we dive into selecting elements, make sure you have a basic understanding of HTML and JavaScript. You should have a working HTML file where you can add your JavaScript code. Here’s a simple HTML structure to get you started:

<!DOCTYPE html>
<html>
<head>
    <title>Element Selection</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>

    <script src="your-script.js"></script>
</body>
</html>

Now, create a JavaScript file named your-script.js and let’s begin selecting elements!

Selecting Elements by Tag Name

You can select elements by their HTML tag name using the document.getElementsByTagName() method. This method returns an array-like collection of elements with the specified tag name.

// Select all <p> elements on the page
const paragraphs = document.getElementsByTagName('p');

// Loop through the collection and do something with each element
for (var i = 0; i < paragraphs.length; i++) {
    paragraphs[i].textContent = "Changed!";
}

Selecting Elements by Class Name

To select elements by their class name, use the document.getElementsByClassName() method. This method returns an array-like collection of elements with the specified class name.

// Select all elements with the class "highlight"
const highlightedElements = document.getElementsByClassName('highlight');

// Loop through the collection and apply a style or make changes
for (var i = 0; i < highlightedElements.length; i++) {
    highlightedElements[i].style.backgroundColor = 'yellow';
}

Selecting Elements by ID

You can select a single element by its unique ID using the document.getElementById() method. This is particularly useful when you need to target a specific element.

// Select an element with the ID "my-element"
const myElement = document.getElementById('my-element');

// Change its text content
myElement.textContent = 'Updated text!';

Query Selector

The querySelector() method allows you to select elements using CSS-like selectors. It returns the first matching element it finds.

// Select the first <li> element within a <ul>
const firstListItem = document.querySelector('ul li');

// Change its text content
firstListItem.textContent = 'New Item';

Query Selector All

The querySelectorAll() method returns all matching elements in a NodeList. You can use it with CSS selectors to select multiple elements.

// Select all <li> elements within a <ul>
const listItems = document.querySelectorAll('ul li');

// Loop through the NodeList and make changes to each element
listItems.forEach(function(item) {
    item.textContent = 'Updated Item';
});

Conclusion

Selecting elements in JavaScript is a fundamental skill for web development. Whether you want to manipulate the content, apply styles, or add interactivity to your webpage, understanding how to select elements is crucial. Practice with different examples and gradually build your expertise in working with elements using JavaScript.

Hello, I’m Anuj. I make and teach software.

My website is free of advertisements, affiliate links, tracking or analytics, sponsored posts, and paywalls.
Follow me on LinkedIn, X (twitter) to get timely updates when I post new articles.
My students are the reason this website exists, crafted with the affection and dedication they’ve shown. ❤️

More is coming Soon
Feedback Display