The following code shows an Example of querySelector() Method in JavaScript.

Programmingempire

Illustrating an Example of querySelector() Method in JavaScript

<html>
<head>
  <title>querySelector Method Demo</title>
  <script>
     function f1()
     {
	document.querySelector(".c1").style.background="#ffaa22";
     }
     function f2()
     {
	document.querySelector("#d1").style.background="#aaff22";
     }
  </script>
  <style>
    .c1{
       border: 4px solid #33ff99;
       border-radius: 10px;
       background-color: #5566aa;
       color: #aaffff;
       font-size: 20px;
       text-align: center;
       margin:5px;
       padding: 10px;
      }
    .a1{
		margin: 50px;
	}
    .c2{
       background-color: #ddeeff;
       color: #ff5566;
       font-size: 25px;
       text-align: left;
       margin:40px;
       padding: 5px;
       width: 800px;
      }
  </style>
</head>
<body>
  <div id="d1" class="c2"><br/><br/>
     Example of querySelector() Method<br/>
     <br/><br/>
     <button id="b1" class="c1">Button 1</button>
     <button id="b2" class="c1">Button 2</button>
     <button id="b3" class="c1">Button 3</button>
     <br/><br/>
     <button id="b4" class="c1">Button 4</button>
     <button id="b5" class="c1">Button 5</button>
     <button id="b6" class="c1">Button 6</button><br/><br/>
     <button id="b7" class="c1" onclick="f1()">Change Background of Button</button>
     <button id="b8" class="c1" onclick="f2()">Change Background of Div</button>
 </div>
</body>
</html>

Output

The Output of Example of querySelector() Method in JavaScript
The Output of Example of querySelector() Method in JavaScript

Further Reading

Evolution of JavaScript from ES1 to ES2020

Introduction to HTML DOM Methods in JavaScript

JavaScript Practice Exercise

Creating User-Defined Functions in javaScript

Popup Boxes in JavaScript

programmingempire