What Are DOM selectors

What are DOM selectors?

DOM selectors are used to select HTML elements or nodes or objects.
Or, DOM selectors are used to select HTML elements within a document using JavaScript.

Types of DOM Selectors

There are 2 types of DOM selectors.

Single element selector(Singular selector)
Multiple elements selector(Plural selector)

1. Single element selector (Singular selector)

That means we can select only one node/element/object of the HTML within a document using a single element selector.

These are the single element selectors:

getElementById
querySelector

2. Multiple elements selector (Plural selector)

That means we can select multiple nodes/objects/elements of the HTML within a document.

These are the multiples element selector

getElementsByClassName
getElementsByTagName
querySelectorAll

Select by Id (getElementById)

We can select an element with its unique ID using the getElementById selector.
This selector returns "null" if there is no match.

Syntax:
- document.getElementById("ID")

Here I have selected an HTML element that has a unique id that is "text".Now the color of that element will be changed to red.

document.getElementById("text").style.color="red";

Select by query selector (querySelector)

This is also a single element sector, which is used to select any HTML element it can be ID, Class, Element.It returns only the first element.

Syntax:
- document.querySelector(".class")
- document.querySelector("#Id")
- document.querySelector("tag")

Now the element with the class name "text" will be green.

document.querySelector(".text").style.color="green";

Select by the class name (getElementsByClassName)

It returns the list of elements like an array. Or, it returns the HTML Collection.
We can access those elements using an index similar to an array.
And of course, we can add multiple classes separated by space.

let items = document.getElementsByClassName("class");
console.log(items)  // return the list of items
items[3].textContent= "hello world"; // text changed
items[3].style.color = "red"; // color changed to red

We can not apply a style to the array but if we want to apply then we have to select a specific element using the "index" or using loops.Now all items inside the HTML collection will be green.

for(let a = 0;a<=items.length;a++){
    items[a].style.color = "green";
}

Select by tag name (getElementsByTagName)

This is also used to select the HTML elements using the tag names.
It also returns the HTML Collection.
Now the element that has 4 indexes will be red.

let tagName = document.getElementsByTagName("li");
console.log(tagName)  // returns html collection
tagName[3].style.color = "red";

We can not apply a style to the array but if we want to apply then we have to select a specific element using the "index" or using loops.Now all items inside the HTML collection will be green.

for(let a = 0;a<=tagName.length;a++){
    tagName[a].style.color = "green";
}

Select by query selector all (querySelectorAll)

This is also a multiple selector which is used to select multiple elements within a document.
It returns the list of nodes/elements/objects similar to the array.

Syntax:

- document.querySelectorAll(".class");
- document.querySelectorAll("element");

let listItems = document.querySelectorAll(".class");
console.log(listItems)  // returns html collection
listItems[3].style.color = "red";

We can not apply a style to the array but if we want to apply then we have to select a specific element using the "index" or using loops. Now all items inside the HTML collection will be green.

for(let a = 0;a<=listItems.length;a++){
    listItems[a].style.color = "green";
}