Skip to main content

Understanding DOM Selectors

Many of us have encountered the problem of choosing which selector to use from the list of JavaScript selectors. Using the right selector can solve enormous amount of problem and can make the code readable and clean.

To get a clear glimpse of how to use the selectors, let us take a look at what all these selectors are and what is their functionality -

document.getElementById() :  

This selector returns only one element with a specified Id. Also as we know that only one element can poses a specific Id, so the latter is obvious. 

            syntax - document.getElementById("main_item-Id");

There is no requirement to add "#" before mentioning the Id of the element in this selector.

document.getElementsByClassName() :    

This one returns a HTML Collection of all the elements having the specified class as that mentioned in the selector. Notice the "s" after element, it represents the same thing. 

            syntax - document.getElementsByClassName("specified_class_name");

The dot(.) class specifier is not added before class name in this selector.

document.getElementsByTagName() : 

This selector also return an array like format HTML Collection of all elements which have the same tag name as the one specified inside the double quotes(""). Like all the selectors which return a collection/multiple elements, it searches from top to bottom in the html file for the list of elements.

            syntax - document.getElementsByTagName("element-tag-name");

It works for all the html elements like p,div,section etc.

document.querySelector() :

This selector only returns the first element matching the query specified in it.

            syntax - document.querySelector("tag/class/id");

It should be noted that it is required to add the class specifier(.) or id specifier(#) in this selector.

document.querySelectorAll() : 

As the name suggests it returns the list of all elements or which can be called an HTML Collection that match the condition in it. 

            syntax - document.querySelectorAll("tag/class/id");

Just like querySelector, class specifier(.) and id specifier(#) are mandatory to be added before name in this selector.


For more detailed insight about these selectors one can visit the mdn docs.

        

Comments

Post a Comment

Popular posts from this blog

User Interaction in CLI programming: readlineSync

Interacting with user input in CLI is much different than GUI. In a CLI app you need to read the user-input using a node package. One such package is readline-sync. It allows the interaction of user with CLI through console.   How to use readlineSync in your code: First initialize npm(node package manager) in your repo -                npm init      //Some online editor such as repl etc. have this pre-initialized Install the readline package from npm in your repo/folder -             npm install readline-sync      //Some editors automatically execute this part even without mention Require the readline-sync module in your code -             var readlineSync = require('readline-sync'); Now this readlineSync is ready to be used and perform different functions in your code. Different uses of readlineSync  : //Simply Taking user...
Post a Comment
Read more

Variables and Constants - Joy of Life

In Sanskrit language there is a word called " मुदिता" and it is said that the whole life revolves around this small word.  मुदिता means "joy or happiness" which is the farthermost basis and the only goal of the human life or anything which inherits life. The method or road map to achieve the desired output may slightly differ in every case but the end always remains constant. We believe that by acquiring possessions,money,fame and power the purpose can be achieved and the meaning of life can be derived in such a way that another glorifying English word called "success" gets attached to our list of achievements... But in reality nothing seems to fill the void. So what it is that we are seeking and that makes us human. We are only human because we are given the privilege to express, act and specify our own parameters of life. Unlike other life forms in this multiverse, we are the ones who can think both logically and emotionally, and sometimes a combina...
Post a Comment
Read more