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.
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.
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.
<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.
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"));
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.
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.
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.