#    
## Overview
In this shot, we will learn to get the element object using the **`querySelector()` method**. This method is applied to the parent element and returns the first child that matches the specified selector, which was passed in the method.

The `querySelector()` method can be applied on any parent node in the document and passed with a parameter, which is the value that is assigned to a selector. For example, the class has the value `test` and then passes `.test` in it. This method returns only the first child that matches with the selector.

There is a slight difference between the `querySelectorAll()` and the `querySelector()` methods. The **`querySelectorAll()` method** returns the list with all elements that have the specified selector, whereas the `querySelector()` method only returns the first element that has the specified selector. 

## Code
We will write a code to find an element with a specified selector, and then we will style the element with the same selector.

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div id='elem'>
  <p class="demo">First element with class="example"</p>
  <p class="demo">Second element with class="example"</p> 
</div>

<p>Click the button and see that only first element is styled with color yellow.</p>

<button onclick="change()">Click Here!!!</button>

<script>
function change() {
  var elem = document.getElementById("elem");
  elem.querySelector('.demo').style.color = "yellow";
}
</script>

</body>
</html>


codemirror

## Explanation

* In line 7, we can see a `div` element with the ID `elem` and two child elements.

* In line 8, we define the first `p` element with the `demo` class.
* In line 9, we define another `p` element with the same `demo` class.

* In line 14, we write a button tag with a `change()` function. This function is called when the user clicks its button tag.

* In line 17, we define the `change()` function in the script tag.
* In line 18, we get the parent `div` element, using `getElementById()`, and pass the `div` ID in it.
 
* In line 19, we apply the `querySelector()` method on the `div` element and pass the selector in it. This returns the first child with the class `demo` selector. We also apply `style.color` to change the color of the text.

## Output
When we click the button, the text color of the first `p` element with the CSS class `demo` is changed, and the other element with the same CSS class remains unchanged.

What is the querySelector() method in Dom?

querySelector() returns the first child element matching a specified selector, unlike querySelectorAll(), which returns all matching elements.