Blogs| javascript | querySelector()

document.querySelector()

For the sake of analogy let’s suppose that you own a Multinational Company situated in India and you have a branch in Japan , you want to command the manager of that specific branch to make some changes in the office building but unfortunately you don’t know Japanese language so you hire a person who not only knows your language but also he has some knowledge of Japanese too and that person will eventually translate your commands into Japanese and the XYZ manager of the branch would execute the same

Here JavaScript is your multi-national company, elements of HTML is your branch and .querySelector() method is your bilingual employee

In simple words document.querySelector() selects an element from your HTML document and then it stores it's reference to a variable which ultimately facilitates you to manipulate DOM and add functionalities to it

image explaining how query selector works

Syntax

var your_var_name = document.querySelector(“selector”);

Things to note

If there are multiple objects connected with the given selector in the HTML document then the first element referencing such selector is returned
If there are no matches then null value would be returned
If you want to select multiple objects with one selector then you must use document.querySelectorAll() method

Examples

1. Referencing an element by its id


              < html > 

              < body >

              <--DOM--> 

              
                < h1 id="text-color">Text color is BLUE </h1> 

              < script>

              
                var textColor = document.querySelector("#text-color"); 

              //storing H1 element reference by its id


              textColor.style.color = "blue";

              // Manipulating element by changing its text node's color


              < /script >

              < /body >

              < /html >

Things to note

To select an element with a specific id, write a hash (#) character, followed by the id of the element inside its quotation marks
Storing reference in a JavaScript variable is a good practice
id must be unique

2.Referencing an element by its class


              <html>

              <body>

              <!-- DOM -->

              
                <h1 class="text-color">Text color is
                GREEN</h1>

              
              <script>

              
                var textColor = document.querySelector(".text-color");
                //storing H1 element 
reference by its class

              textColor.style.color = "green"; // Manipulating element
              by changing its text

              node's color

              </script>

              </body>

              </html>

Things to note

To select an element with a class, write a period (.) character followed by the class of the element inside its quotation marks
As mentioned above querySelector can refer to a single element only thus, if a class has multiple elements , it will refer to the first element only

3.Referencing an element by its itself (tag referencing)


                <html>

                <body>

                  <!-- DOM  -->

                  <h1 >Text color is RED</h1>

                  <script>

                var heading = document.querySelector("h1"); //storing H1 element reference in a JS variable  

                    heading.style.color = "red"; // Manipulating  element by changing its text 
node's color

                  </script>

                </body>

              </html>

Things to note

To select an element with its own tag, write the tag name of the element in querySelector's parenthesis within quotation marks
You don’t have to add any special characters, just plain element name tag according to the HTML standard is required

Conclusion

document.querySelector() method is a versatile method to store references of document(html) elements in JavaScript variables(optional) unlike other referencing methods it is not limited to a specific type of selector