What Are DOM selectors

What are DOM selectors and its types ?

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.

1. Single element selector(Singular selector)
2. 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";
}