The blog shows how to use document.querySelector() method to select or give reference of HTML elements in JavaScript .

Document.querySelector() :-

The querySelector() method returns the first element that matches a specified CSS Selector(s) in the document .

Document.querySelectorAll() :-

The querySelectorAll() method return all the matches in a specified CSS selector(S) in the document .

It can be used the way you want . But for example , let's see how it actually works .

Document.querySelector example-

The following example demonstrates the usage of querySelector() and querySelectorAll() methods.

Here , we have placed a text input box in html and done some styling and a button to process further and show the output , i.e. that's the basic logic for all the projects we see these days .

so to take input , processing and showing output is secondary part but to use these text input box for userInput , button and output space , we have to give reference of these things in javascript .

And , Here we have stored Input area , button and output in an id to maintain its uniqueness and no such problem occurs while giving its reference in JavaScript.

Here's how we use querySelector() method to give reference in javascript .

Moving Further with the taking user Input and processing part to see if this actually works ..

Now , for processing we are using the event listener for button and to show output with id #output i.e. output.innerText .

I hope , you got to learn something new today .

P.S- This blog is only for beginners in javascript .

Will see you in the next blog :)

#javascript #js #selector #javascriptforbeginners #development