How to select HTML elements in Javascript
📣 Sponsor
In Javascript, it is possible to select an HTML element through your code. That let's us interact directly with specific elements, and change things about them.
Why would we select HTML elements?
There are a number of reasons we would want to target a specific HTML element. It might be to add an event to it - so we can do soemthing when a user clicks on a button, for example. Another reason, might be to programatically change the CSS of an element. For whatever reason we do it, there are a number of functions we have at our disposal to do this in Javascript.
How to select all matching elements in Javascript
We can find specific elements in Javascript using the same selectors we use in CSS. To select all elements with a specific selector, we can use querySelectorAll
. For example, if we want to target all div
s, we could write the following:
let allDivs = document.querySelectorAll('div');
Now we can target every div
and do something to it. When we target multiple HTML elements like this, it returns a NodeList. We can typically iterate over each of these elements using forEach
, however not all browsers have impelemented this. You can read more about that here.
let allDivs = document.querySelectorAll('div');
allDivs.forEach(function(item) {
// the variable 'item' is each of our divs.
// So we can change it. The code below will make all divs have red text!
item.style.color = 'red';
});
Selecting the first matching element only
Similar to querySelectorAll
, we can use querySelector
to select only the first matching element. That means we don't have to loop over our results with forEach
:
// The below only targets the first div it finds.
let oneDivOnly = document.querySelector('div');
Selecting Elements By ID
We can also select elements by their ID. The reason we might use this is because it is much faster to select something by its ID, rather than searching the document based on a query selector. For example, suppose we've given an HTML element an ID called 'my-id'. We can select it using getElementById
:
<div id="my-id"></div>
let myId = document.getElementById('my-id');
Waiting for the document to load
We sometimes run our Javascript before our HTML loads. This may happen if you have your Javascript in the head of your document. If your Javascript is at the bottom of your page, you probably don't need to worry.
If your Javascript is at the top of your page, however, you will want to wait until the document has loaded. If you don't, the HTML will not have loaded yet, so the Javascript file won't be able to select HTML elements - which will throw an error. We can do that using Event Listeners, and waiting for the DOM content to load. The code for that looks like this:
// Using the below line, we can wait for the HTML to load in the page
document.addEventListener('DOMContentLoaded', function() {
// Everything inside this function, will run after the HTML document has loaded
let allDivs = document.querySelectorAll('div');
allDivs.forEach(function(item) {
// the variable 'item' is each of our divs.
// So we can change it. The code below will make all divs have red text!
item.style.color = 'red';
});
})
Selecting Elements by Class
For most use cases, querySelector
and getElementById
will cover most needs. For some situations, you may prefer to use getElementsByClassName
. The problem with getElementsByClassName
is that it returns a HTMLCollection, which we cannot use forEach
on. As such, we have to use a little bit of Javascript array trickery to do something with each matching elements.
For example, the below will select each element with the class active and set its color to red:
var allActive = document.getElementsByClassName('active');
Array.prototype.filter.call(allActive, function(item) {
item.style.color = 'red';
});
More Tips and Tricks for Javascript
- Demystifying how 'this' works in Javascript
- How the Javascript History API Works
- Javascript Array Some Method
- Javascript Array Reduce Method
- Javascript innerHTML
- Asynchronous Operations in Javascript
- What are the three dots (...) or spread operator in Javascript?
- Creating a NodeJS Push Notification System with Service Workers
- Truthy and Falsy Values in Javascript
- Making a Morphing 3D Sphere in Javascript with Three.js