DOM Selectors in JavaScript

While creating interactive content with JavaScript, you will often find yourself needing to access various HTML elements in order to make changes to them. We'll go through some of the main ways you can grab elements in the DOM, and how you can make use of what they hold.

Different Types of Selectors

ID

If you want to manipulate one single element, the easiest and most straight-forward approach is to find that element by id. Only one HTML element can have a specific id attribute, and each ID is unique to one element.

Class

Multiple elements can be grouped together when they are given the same class name. An example would be if you have multiple buttons that serve the purpose of deleting content, and you want all of those buttons to be manipulated in the same manner.

Tag

Some common tags in HTML are body, h1, p, div, span, and img, though there are numerous others. Another DOM selector is tagName, which selects elements based on the type of element they are.

Accessing an Element by ID

In order to access an element with a specific id, you have a few options. You can either use:

document.getElementById('element-id')

or

document.querySelector('#element-id')

Either option will search the entire document and return the element with a matching id as an object. If no element with the given id is found, null will be returned. If you encounter a TypeError: Cannot read properties of null, it is likely that no element with that id was found.

You can also use these methods to create a variable, and then manipulate the DOM by calling that variable.

let foundElement = document.getElementById('first-header')
foundElement.style.color = 'blue'

If an element does not exist in the HTML file and is created using JavaScript, you can still give that element an id using JavaScript with the following syntax:

let createdWithJsElement = document.createElement('p')
createdWithJsElement.id = 'js-element'

Accessing an Element by ClassName

Similar to accessing an element by id, you have a few choices for selecting elements by class. You can access elements by class name with the following methods.

document.querySelector('.element-class')

This will return only the first element that matches the specified class name.

document.getElementsByClassName('element-class')

The use of getElementsByClassName will return a live HTMLCollection of all the elements matching that class.

document.querySelectorAll('.element-class')

Using the querySelectorAll method will return a static NodeList of all the elements matching that class. Distinguishing between a NodeList and an HTMLCollection is a whole other topic which you can explore here.

Note the use of a dot prior to the class name, as opposed to the hash-tag prior to doing a query selector on an id.

In order to manipulate every element that is returned from the getElementsByClassName or querySelectorAll methods, you'll need to run a for loop to iterate the array-like object and make the desired changes to each element.

let allButtons = document.getElementsByClassName('button')

function testButtons () {
  for (let i = 0; i < allButtons.length; i++) {
    console.log(`I am button ${[i+1]}`);
  }
}

You can create or change an element's class, or other attribute, by accessing that element by its [index].

allButtons[5].className = 'delete-button'

Accessing an Element by TagName

Yet another way to select elements in the DOM is to select the elements by their tag name.

let allParagraphs = document.getElementsByTagName('p')

You can get even more specific with your search for specific elements based on tag name. Suppose you want to change the color of the text in all the paragraphs of a "Skills" section. You can search for elements by tag name within a specific div.

const mySkills = document.getElementById("skills-div");
const skillParagraphs = mySkills.getElementsByTagName("p");

Like when the getElementsByClassName method is called, getElementsByTagName will return a live HTML collection of elements. This can be iterated over with a for loop just like the list of elements gathered with the getElementsByClassName method.

Wrapping It Up

If you can't precisely locate elements, you'll have difficulty making your JavaScript code come to life. These selectors are just the tip of the iceberg for making your creations dynamic.

Photo by Max Duzij on Unsplash