-::New technologies::-: queryselector() method

The querySelector() method selects a specific element from an HTML Web pages and apply a query to these elements.
Create a Web page named querySelector.html

<!doctype html>
<head>
<title>Working with querySelector method</title>
</head>
<body>
<h1> Working With querySelector</h1>
<div id="div1" style="padding:50px;width:100px;height:100px;border:1px solid green">
</div>
<p>Move the mouse cursor over the color name</p>
<LABEL id="label1">Blue</LABEL>==
<LABEL id="label2">red</LABEL>==
<LABEL id="label3">yellow</LABEL>==
<INPUT id="text">
<script type="text/javascript">
if(document.querySelector)
{
var lbl1=document.querySelector('#label1')
var lbl2=document.querySelector('#label2')
var lbl3=document.querySelector('#label3')

lbl1.onmouseover=function() {
document.querySelector('#text').value="This is blue color";
document.querySelector('#text').style.color="blue";
document.querySelector('#div1').style.background="blue"
}

lbl2.onmouseover=function() {
document.querySelector('#text').value="This is red color";
document.querySelector('#text').style.color="red";
document.querySelector('#div1').style.background="red"
}
lbl3.onmouseover=function() {
document.querySelector('#text').value="This is yellow color";
document.querySelector('#text').style.color="yellow";
document.querySelector('#div1').style.background="yellow"
}
}
</script>
</body>
</html>

Browser View: The output of the querySelector when mouse on color blue.