Thread by @ATechAjay

💛 Day 3️⃣2️⃣ / 3️⃣0️⃣ days of basics in JavaScript series!

📌 What are DOM selectors?

📌 Types of DOM selectors?

📌 Select by Id?

📌 Select by query selector?

📌 Select by class name?

📌Select by tag name?

📌Select by query selector all?

#javascript30

Let me explain🧵👇

📌 What are DOM selectors?

➟ DOM selectors are used to select HTML elements or nodes or objects.

➟ Or, DOM selectors are used to selecting HTML elements within a document using JavaScript.

📌 Types of DOM selectors?

➟ There are 2 types of DOM selectors.

1️⃣ Single element selector(Sigular selector)
2️⃣ Multiple elements selector(Plural selector)

1️⃣ Single element selector(Sigular 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 selector

◩ 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

💡 Remember in this selector we have to write "Elements" not "Element"

Or,

⛔ Element = Singular Selector
⛔ Elements = Plural Selector

📌 Select by Id?

➟ We can select an element with its unique ID using the getElementById selector.

➟ This selector returns "null" if there is no match.

👀 Syantax:
- 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.

📌 Select by query selector?

➟ This is also a single element sector, which is used to select any HTML element it can be ID, Class, Element.

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

➟ Or, it returns only the first element.

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

📌 Select by the class name?

➟ 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.

➟ 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.

📌Select by tag name?

➟ 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.

➟ 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 red.

📌Select by query selector all?

➟ 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");

➟ 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.

💚 That's all for now, we will meet in the next thread!

But if you like make sure to:

1. Follow me @ATechAjay

2. Retweet the first tweet.

3. Turn on the notification to never miss these amazing tweets.

Thank you so much for staying to the end of this thread.