Selectors in JavaScript - How to access DOM


This article is about the selectors in JavaScript, you might already have seen the selectors in CSS, here we illustrate the selectors and from starting to end and what has been made of their future. These selectors are what has been used in JQuery also.

This tutorial is all about the JavaScript selectors, we will illustrate with the help of working example, how you can use JavaScript selectors to make your life easy. This tutorial is for the beginners who are learning JavaScript. For advance level users this could be a good way to gain some more knowledge. As many of these selectors have become the base for the initiation of well know JQuery, Of course major role there is of sizzler.js.

Let's give our chit chat a rest and get started with some good work. In this tutorial we are using, Firebug to run the code on the go, you can install firebug extension in Firefox or chrome. We specially suggest using Firefox or Google Chrome browsers for the practice and development purpose. IE has always been a trouble for the developers, so let us leave it for hard time only.

We are going to use following HTML code to test our work, as we will be applying the selectors to this page elements.


<!doctype html>
<html>
<head>
	<title>Selectors Demo Page</title>
</head>
<body>
	<h1 id="mainHeading" class="heading">JavaScript Selectors</h1>
	<p class="content">
		Hi There! This is a demp page to illustrate the use of JavaScript Selectors.
	</p>
	<h2 id="subHeading" class="heading">Look for your Need</h2>
	<p class="content">Not Only we will tell you about the JavaScript selectors but will show you how you can make good use out of them.</p>
	<p>Please Note that The examples we are showing you here are worked in the Firebug Console, Firebug is a great extension to Firefox and Chrome which gives a developer flexibility of testing the code on the go.</p>
</body>
</html>

Go ahead and create an HTML page out of the code above and open your firebug console for the practice. We are starting with a method very basic, common and most popular of all time.

getElementById

On a page each element has a unique ID(if user provide an ID). DOM does not allows two elements having same ID, However most browser does not give any warning or error out there but in that case every time the method returns the reference to first element that meets the need. For example if in the HTML above we give both the headings same ID and try to access them with getElementById() it will return the reference to first one always.


console.log(document.getElementById("mainHeading"));
console.log(document.getElementById("subHeading"));

<h1 id="mainHeading" class="heading">
<h2 id="subHeading" class="heading">

The code and output above shows the basic work of getElementById. This is applied at the document level so it covers all the nodes out there.

getElementsByTagName

This is another selector method we have got, it is also quite old by now and gives little more flexibility than the previous one. Here we can select multiple elements of same type. As the name suggests it uses the name of an element to select it. It returns the NodeList which is an array of the Nodes, so you can use either two ways to access the element as we show in the following code.


console.log(document.getElementsByTagName("p").length);
console.log(document.getElementsByTagName("p").item(0));
console.log(document.getElementsByTagName("p")[2]);

 3
<p class="content">
<p>

In the code above we have first applied method with the paramenter as "p", which stands for "p" tag. So the methods get us a list of Para nodes, which you can see in the HTML as well as by the first line of output are 3 in number. Second two line of code demonstrate two ways to access the single result from the node list.

Please note that In getElementById and getElementsByTagName there is difference of singular and plural of the Elements, this little mistake may put you into trouble, so keep the difference in mind.

getElementsByClassName

This is way too similar to the getElementsByTagName except for its work target is on the class assigned to the elements rather than their tag names.


console.log(document.getElementsByClassName("content").length);
console.log(document.getElementsByClassName("content")[0]);

2
<p class="content">

hoping that there is no need to explain this one, it is similar to last one except that It has only picked up the elements which has "content" class assigned to it.

querySelector and querySelectorAll

These methods came very late as compared to the earlier methods we discussed. And Moreover there is a bigger advantage of these methods over the older ones. These allows us to use the CSS selectors to access the DOM. If you are any experienced in JQuery, you may guess that JQuery also use these methods for its excellence. These comes into existence after the creation of Sizzler.js. Well there is one major difference in both these that, querySelector only returns the first result but querySelectorAll returns all as NodeList.


console.log(document.querySelector("p:last-child"));
console.log(document.querySelector("#subHeading"));
console.log(document.querySelectorAll("p").length);

 <p>
<h2 id="subHeading" class="heading">
3

In this example, first one is using CSS last-child selector to get a DOM reference, second one using CSS ID selector and last one using tag selection to get them, we are only taking its length to get you an idea.

This is all for this illustration, if you have any query or correction in this regard please comment.