querySelector and querySelectorAll Examples

querySelector

The general syntax for this method is:

let element = document.querySelector("CSS selector");

Uses a CSS selector pattern and CSS selector rules to find a matching element. Returns the FIRST matching element. If NO match is found, null is returned.

CSS Selector Examples

  • class selector: document.querySelector(".class-name");

  • tag selector: document.querySelector("div");

  • id selector: document.querySelector("#main");

Tip

You can use any valid CSS selector with querySelector. The selectors can be simple like querySelector("div") or complex like querySelector("#main div .summary").

Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
   <head>
      <title>DOM Examples</title>
      <style>
            .main {
               font-weight: bold;
            }
      </style>
   </head>
   <body>
      <h1>querySelector Example</h1>
      <p id="description" class="main">
            querySelector's power is exceeded only by it's mystery.
      </p>
      <div id="response">
            It's not that mysterious, querySelector selects elements
            using the same rules as CSS selectors.
      </div>
      <script>
            // selects the <p> using class selector
            let main = document.querySelector(".main");
            console.log(main.innerHTML.trim());
            main.style.color = "blue";

            // Selects the <div> using tag selector
            let response = document.querySelector("div");
            console.log(response.innerHTML.trim());
            response.style.color = "red";
      </script>
   </body>
</html>

Console Output

querySelector's power is exceeded only by it's mystery.
It's not that mysterious, querySelector selects elements
using the same rules as CSS selectors.

querySelectorAll

The general syntax for this method is:

let elements = document.querySelectorAll("CSS selector");

Uses a CSS selector pattern and CSS selector rules to find a matching elements. Returns ALL elements that match the selector. If NO match is found, null is returned.

Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
   <head>
      <title>DOM Examples</title>
      <style>
            .red {
               color: red;
            }
            .purple {
               color: purple;
            }
      </style>
   </head>
   <body>
      <h1>querySelectorAll Example</h1>

      <h2>Red Fruits</h2>
      <ul class="red">
         <li>Strawberry</li>
         <li>Raspberry</li>
         <li>Cherry</li>
      </ul>

      <h2>Purple Fruits</h2>
      <ul class="purple">
         <li>Blackberry</li>
         <li>Plums</li>
         <li>Grapes</li>
      </ul>

      <script>
            // Selects ALL the <li> elements and adds text to each one
            let listItems = document.querySelectorAll("li");
            for (let i=0; i < listItems.length; i++) {
               listItems[i].innerHTML += " is yummy"
            }

            // Selects the PURPLE <li> elements and make them bold
            let purpleItems = document.querySelectorAll(".purple li");
            for (let i=0; i < purpleItems.length; i++) {
               purpleItems[i].innerHTML += "!!!"
         }

         // Console log the contents of the first items in each list
         // Remember that querySelector returns only the FIRST match
         let firstRed = document.querySelector(".red li");
         console.log("contents of first red li:", firstRed.innerHTML);
         let firstPurple = document.querySelector(".purple li");
         console.log("contents of first purple li:", firstPurple.innerHTML);
      </script>
   </body>
   </html>

Console Output

contents of first red li: Strawberry is yummy
contents of first purple li: Blackberry is yummy!!!