#    
## Overview
The **`querySelectorAll()` method** returns all elements from a DOM tree with the same selector.

The method is called on the parent node `document`. 

## Parameter
The parameter for the function is the value of the `class` property. 

## Return value
This function returns all the elements with the specified `class` as an array. 

## Code
The following code selects all elements with the `class` value `demo` and updates the style of the first element only:

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div>
  <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 as we have select index 0.</p>

<button onclick="change()">Try it</button>

<script>
function change() {
  var elem = document.querySelectorAll(".demo");
  elem[0].style.color = "yellow";
}
</script>

</body>
</html>


codemirror

## Explanation

* Line 7: We create a `div` element with two child elements.
* Line 8: We define the first `p` element with the class `demo`.
* Line 9: We define another `p` element with the same class `demo`.
* Line 14: We define a button tag. The `onClick` button is hooked to the function `change()`. 
* Line 17: We define the  `change()`function in the script tag. 
* Line 18: We apply `querySelectorAll()` on the `document` and pass a CSS selector name. Here, it is the `demo` class. It  returns all the elements with the same selector. `elem` is the list of elements with selector `demo`.
* Line 19: We apply `style.color` to `elem[0]`, which is the first element with the `demo` selector.


What is the querySelectorAll() method in HTML DOM?

The `querySelectorAll()` method returns all DOM elements with a specified selector as an array-like list.