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

Select An Element Using ID With getElementById()

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

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

Select The First Element With querySelector()

The querySelector() can be used to select a particular element. But when there are multiple options, it will select the first match.

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 returns a NodeList.

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

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

Likewise, you can also select classes and ids with querySelectorAll.

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

Select All Elements With getElementsByClassName()

The getElementsByClassName() returns an HTMLCollection object. You can use for, forEach and from to loop through elements.

Using for loop.

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

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

Using forEach.

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

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

Using from.

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

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

Select All Elements With getElementsByTagName()

getElementsByTagName() returns an HTMLCollection object. You can use for, forEach and from to loop through elements.

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

Select All Elements With getElementsByName()

getElementsByName() returns an HTMLCollection object. You can use for, forEach and from to loop through elements.

let phone_numbers = document.getElementsByName('phone_numbers');

This is a TLDR short version, visit https://devtonight.com/articles/select-html-elements-by-id-class-tag-name-using-vanilla-javascript for detailed explanations.