Select HTML Elements by ID, Class, Tag Name Using Vanilla JavaScript

Most of the time we tend to use one or two popular JavaScript methods to select HTML DOM (Document Object Model) element objects, so let’s see what else we can use.

Select An Element Using ID With getElementById()

getElementById() is the most common method which can be used to select a unique element ID. The following code will select the HTML element which has the pid3 id attribute.

let para3 = document.getElementById("pid3");

para3.onclick = () => {
    para3.style.backgroundColor = '#ccff00';
}

Select The First Element With querySelector()

querySelector() can be considered as another most used method to select an HTML element. Its notable difference is, the querySelector() method can be used to select an element using an ID, classes or tag name.

document.querySelector('#pid4').style.backgroundColor = '#ccff00';
document.querySelector('.para').style.backgroundColor = '#ccff00';
document.querySelector('p span').style.backgroundColor = '#ccff00';

Select All Elements With querySelectorAll()

The querySelectorAll() method selects all the matching elements in the HTML document. The following code will select all the p paragraph tags.

let paragraphs = document.querySelectorAll('p');

paragraphs.forEach(paragraph => {
    paragraph.style.backgroundColor = '#ccff00';
});

In addition to selecting tags, querySelectorAll can be used to select classes and IDs like below.

document.querySelectorAll('.para');
document.querySelectorAll('#pid4');

Select All Elements With getElementsByClassName()

The getElementsByClassName() can be used to select all the elements by mentioned classes. It returns an HTMLCollection object, so when you access the elements you must either use the element index or convert it into an array.

The following code will select the second HTML element which has the para class. Remember, the index starts from 0 and not from 1.

document.getElementsByClassName('para')[1].style.backgroundColor = '#ccff00';

All the following code blocks will select all the elements with the para class. Use any from the following 3 samples.

let paragraphs = document.getElementsByClassName('para');

for(paragraph of paragraphs) {
    paragraph.style.backgroundColor = '#ccff00';
}

or

let paragraphs = document.getElementsByClassName('para');

[].forEach.call(paragraphs, function (paragraph) {
    paragraph.style.backgroundColor = '#ccff00';
});

or

let paragraphs = document.getElementsByClassName('para');

Array.from(paragraphs).forEach(paragraph => {
    paragraph.style.backgroundColor = '#ccff00';
});

Select All Elements With getElementsByTagName()

The getElementsByTagName() method can be used to select element tags in an HTML document. This method returns an HTMLCollection and can be useful when there are no IDs and classes or for dynamically generated IDs and classes.

The following code will select the first paragraph tag in the HTML document.

document.getElementsByTagName('p')[0].style.backgroundColor = '#ccff00';

Use the same for(), [].forEach.call() and Array.from() used in the previous example to iterate through multiple elements.

In addition to that, the getElementsByTagName() method can be used to select all the items in the HTML document.

document.getElementsByTagName("*")

Select All Element With getElementsByName()

This is a bonus tip! The getElementsByName() can be used to select HTML elements by their name attribute. It returns an HTMLCollection.

document.getElementsByName('fname')[0].style.backgroundColor = '#ccff00';