JavaScript - querySelector() method

revision:

Category : document

The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned..

Syntax : 

        document.querySelector(selectors)

Parameters:

selectors : a string containing one or more selectors to match. This string must be a valid CSS selector string; if it isn't, a SyntaxError exception is thrown.

Examples : 

          const el = document.querySelector(".myclass");
          const el = document.querySelector("div.user-panel.main input[name='login']");
          const el = document.querySelector(
            "div.user-panel:not(.main) input[name='login']"
          );

Category: element

The querySelector() method of the Element interface returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors.

Syntax : 

        querySelector(selectors)

Parameters:

selectors : required. a group of selectors to match the descendant elements of the Element baseElement against; this must be valid CSS syntax, or a SyntaxError exception will occur. The first element found which matches this group of selectors is returned. For multiple selectors, separate each selector with a comma.

Examples: 

            const el = document.body.querySelector("style[type='text/css'], style:not([type])");
            
            var x = document.getElementById("myDIV");
            x.querySelector(".example").innerHTML = "Hello World!";

Practical examples

example: get direct descendants using the "":scope" pseudo-class.
Page Title
Love is Kind. Love is Patient. Love is Selfless.
code: 
                  <div>
                      <div>
                          <h6>Page Title</h6>
                          <div id="parent">
                            <span>Love is Kind.</span>
                            <span>
                              <span>Love is Patient.</span>
                            </span>
                            <span>
                              <span>Love is Selfless.</span>
                            </span>
                          </div>
                        </div>
                  </div>
                  <style>
                      span { display: block; margin-bottom: 0.5vw;}
                      .red span {background-color: red;  padding: 0.5vw;}
                  </style>
                  <script>
                      const parentElement = document.querySelector("#parent");
                      let allChildren = parentElement.querySelectorAll(":scope > span");
                      allChildren.forEach((item) => item.classList.add("red"));
                      
                  </script>

example: the entire hierarchy counts!
Original content

inside paragraph inside span inside paragraph

Output
code: 
                  <div>
                      <div>
                        <h5>Original content</h5>
                        <p class="select-1">
                          inside paragraph
                          <span>inside span</span>
                          inside paragraph
                        </p>
                      </div>
                      <div>
                        <h5>Output</h5>
                        <div id="output"></div>
                      </div>
                    </div>
                    <script>
                        const baseElement = document.querySelector(".select-1");
                        document.getElementById("output").innerHTML = baseElement.querySelector("div span").innerHTML;
                    </script>

example: select various elements in a specified manner.
Select the first h4 or the first h5

A h4 element

A h5 element
Select the first h5 or the first h6
A h6 element
A h5 element
code: 
                <div>
                  <div id="div1">Select the first h4 or the first h5
                      <h4 class="h4">A h4 element</h4>
                      <h5 class="h5">A h5 element</h5>
                  </div>
                  <div id="div2">Select the first h5 or the first h6
                    <h6 class="h6">A h6 element</h6>
                    <h5 class="h5">A h5 element</h5>
                  </div>
                </div>
                <script>
                    document.getElementById("div1").querySelector(".h4, .h5").style.backgroundColor = "red";
                    document.getElementById("div2").querySelector(".h5, .h6").style.backgroundColor = "green";
                </script>

example: change the text of the first child element with class="example" in a <div> element.

A heading with class="example" in div.

A paragraph with class="example" in div.

Click the button to change the text of the first element with class="example" in div.

code: 
                <div>
                  <div id="DIV-A">
                    <h4 class="example">A heading with class="example" in div.</h4>
                    <p class="example">A paragraph with class="example" in div.</p> 
                  </div>
                  <p>Click the button to change the text of the first element with class="example" in div.</p>
                  <button onclick="selectFunction()">change heading text</button>
                  <button onclick="selectFunc()">change p element text it</button>
        
                </div>
                <style>
                  #DIV-A {border: 1px solid black;}
                </style>
                <script>
                    function selectFunction() {
                        var x = document.getElementById("DIV-A");
                        x.querySelector(".example").innerHTML = "Hello World!";
                    }
        
                    function selectFunc() {
                        var x = document.getElementById("DIV-A");
                        x.querySelector("p").innerHTML = "Hello World!";
                    }
                </script>
              </pre>