When working with the DOM, what we want is to be able to modify the elements of the document (its content, add them, remove them).
Therefore, the first thing we need to do is learn how to select the elements we want.
JavaScript offers several methods for selecting elements in the DOM. These methods can be classified into two main categories:
- Methods based on identifiers, classes, and tags
- Methods based on CSS selectors.
Selection Result
Selection methods will return you a result, with the selection (obviously). Depending on the method you use, the result can be,
| Type | Selects | Returned Quantity | Static or Not |
|---|---|---|---|
HTMLElement | Element | 1️⃣ (or null) | (not applicable) |
HTMLCollection | Element | ♾️ (same type) | Dynamic |
NodeList | Node | ♾️ (can be different types) | Static |
Let’s look at each of them,
It is a single node, for example, a single <div>.
It is returned by methods like getElementsByTagName() and getElementsByClassName().
It is dynamic, which means that if you add or remove elements in the DOM, the HTMLCollection will automatically reflect those changes.
It can be returned by various methods, such as querySelectorAll().
It is static, which means it does not update if the DOM changes after the selection.
The distinction between static and dynamic can be a bit tricky to understand.
Do you want to check it for yourself?
If you want to check it for yourself, open the DevTools on this page, and paste the following into the console:
// Dynamic HTMLCollection
let htmlCollection = document.getElementsByTagName('div');
console.log(htmlCollection.length); // Initial number of divs
let nodeList = document.querySelectorAll('div');
console.log(nodeList.length); // Initial number of divs
let newDiv = document.createElement('div');
document.body.appendChild(newDiv);
console.log(htmlCollection.length); // Number of divs after adding a new div (you will see the change)
console.log(nodeList.length); // Number of divs (you will NOT see the change, as it is static)You will see that
- We count the number of
divon the page - We add a new one (we will see how to do this in due time)
- We access back the value we loaded earlier
htmlCollectiondoes NOT change (it is static)nodeListdoes change (it is dynamic).
Methods Based on Identifiers, Classes, and Tags
These methods are the first ones that existed. They allow us to select a single element or a set of elements based on their identifiers, classes, or element tags.
| Command | Description | Return |
|---|---|---|
getElementById() | One element by its id attribute. | Single element |
getElementsByClassName() | All elements that have a class. | HTMLCollection |
getElementsByTagName() | All elements with a specific tag. | HTMLCollection |
getElementById()
The getElementById() method is used to select a single element based on its id attribute. Since id must be unique within an HTML document, this method will always return a single element.
const myElement = document.getElementById('my-id');getElementsByClassName()
The getElementsByClassName() method returns a collection of elements with the specified class. Unlike getElementById(), this method can return multiple elements if several have the same class.
const elements = document.getElementsByClassName('my-class');getElementsByTagName()
The getElementsByTagName() method returns a collection of all elements with a specific tag. Like getElementsByClassName(), this method can return multiple elements.
const elements = document.getElementsByTagName('p');Methods Based on CSS Selectors
Methods based on CSS selectors are newer (added with HTML5). They offer a more flexible way to select elements, as they allow for the use of the vast variety of available selectors.
| Command | Description | Return |
|---|---|---|
querySelector() | First element that matches the CSS selector. | Element |
querySelectorAll() | All elements that match the CSS selector. | NodeList |
querySelector()
The querySelector() method returns the first element that matches the specified CSS selector. This method is useful when you need to select a single element that matches a selector.
const element = document.querySelector('.my-class');querySelectorAll()
The querySelectorAll() method returns a NodeList of all elements that match the CSS selector. Unlike querySelector(), this method returns all matching elements, not just the first one.
const elements = document.querySelectorAll('div.my-class');