Javascript DOM selectors - Web Development
3 Views

Javascript DOM selectors

In this tutorial you will learn about DOM selectors .

How to select DOM elements in javascript

Javascript is used to get or modify the value of the html elements on website or page .We can apply some effect on webpage like animation , hide or show data . But , these all things happen with help of DOM selectors. If you don’t know how to target HTML element then you cant perform these tasks .

How to select elements

Selecting DOM elements is essential part of javascript . If you have to perform any animation like progress bar that time you would need to use DOM elements . Now we will see some examples .

document.body.style.background = “green”; using this code we can change bg color of body & document.head.firstElementChild.nodeName; this code is used to target <head> elements as you can see there are two elements in HEAD Tag one meta and another is title .

Select HTML elements by id

You can select html element by its id document.elementByID()  so let see one example of it

Output of code

Selecting html element by its id

I am javascript

I am jquery & i am the best library of javascript

document.getElementById(“para1”); if no matching element found null will be returned & the value of attribute id should be unique in the page.

How to select element by class

Using getElementsByClassName() , we can also use class name for select element

Output of code

Select element by class

I am javascript



I am nodejs

I am angularjs

To color both attributes i used for loop using loop we can color thousands of lines .

Leave a Reply

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