JavaScript DOM Selector

Total
0
Shares
JavaScript DOM Selectors
Table of Contents Hide
  1. JavaScript DOM Selector:

JavaScript DOM Selector:

Using JavaScript DOM Selector we can select, manipulate and edit the different types of text.

We have different DOM selectors Here the list of DOM selectors, and let’s use them one by one.

  • getElementsByTagName
  • getElementsByClassName
  • getElementById
  • querySelector
  • querySelectorAll
  • getAttribute
  • setAttribute
  • className
  • classList.add
  • classList.remove
  • classList.toggle

 

1- getElementsByTagName

                    
document.getElementsByTagName("h1");

Using DOM selector (getElementsByTagName) We can get any element using tag name as I write the code above.

 

2- getElementsByClassName

                    
document.getElementsByClassName("myClass");

Using DOM selector (getElementsByClassName) We can get any element using class name as I write the code above.

 

3- getElementById

                    
document.getElementById("myId");

Using DOM selector (getElementById) We can get any element using Id as I write the code above.

 

4- querySelector and querySelectorAll

                    
document.querySelector("li");
document.querySelectorAll("li");
document.querySelectorAll("li, h1");

Now we have querySelector and querySelectorAll they’re more flexible and powerful than other
querySelector always selects the First Element and querySelectorAll select All Elements and more than one.

Here In the above code, for querySelector, I write the code for “li” to select the “li” and in querySelectorAll I write the 2 examples in first we select all “li” elements, and the second example I show how can select more than one element.

 

5- getAttribute and setAttribute

                    
document.querySelector("li").getAttribute("random");
document.querySelector("li").setAttribute("random","22");

For getAttribute and setAttribute we need the item. As you can see in the above code as the item I write “li” and the “random” is a name I use in “li” like that

< li name =”random”> First List </ li >

First I get the “random” and in second-line, I change the value of random this way we can get and set Attribute.

We can change styling using querySelector, getelementsByClassName, getElementById. We can add style like this anywhere on the page but It’s not the right way to do that the best way is that add the class.

 

6- className

                    
var h1 = document.querySelector("h1");
h1.className = "red";

First, we define a variable then we assign h1 or any tag to the variable just for not write the h1 tag every time. Then we can add class to h1 In the above code I add the class red to h1.

 

7- classList.add , classList.remove and classList.toggle

                    
document.querySelector.classList.add(“myClass”);
document.querySelector.classList.remove(“myClass”);
document.querySelector.classList.toggle(“myClass”);

In the list, we can use classList and then add and remove class also we can toggle too.

 

                    
document.querySelector("h1").innerHTML = "This is new text.";

Now move on towards innerHTML Using this we can change the text in real-time.

 

In the end,

We learned that what is JavaScript DOM selectors, how to get HTML elements and perform manipulation with them in real-time using JavaScript DOM selectors. 

 

See you there 🙂

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

You May Also Like
JavaScript DOM events

JavaScript DOM Events

Table of Contents Hide JavaScript DOM Events:Event Attributes: JavaScript DOM Events: Hey did you imagine how to collect analytics, views, clicks on the website page? How to monitor the mouse…
View Post