JavaScript DOM Selector

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


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


2- getElementsByClassName


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


3- getElementById


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


4- querySelector and querySelectorAll

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


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


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