Loading ...

Learn about web development and design.

JavaScript DOM Selector

Javascript DOM selectors
Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

JavaScript DOM Selector:

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

At 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 selector

Leave a Comment

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