How to use JavaScript querySelector()? [SOLVED]


JavaScript

Introduction

In JavaScript, the querySelector method is a built-in method of the Document and Element prototypes that is used to select an element from an HTML document based on its CSS selector. This method is often used to access specific elements in an HTML document, such as a button, a form, or a table, and to perform operations on those elements, such as changing their content, styles, or attributes.

This article explains the querySelector and querySelectorAll method and how to use them.

 

Using the querySelector method

Select element by element name

The querySelector method accepts a single argument: a string containing a CSS selector that specifies the element or elements that you want to select. This selector can be any valid CSS selector, such as an element name, an ID, a class name, or a combination of these. Here is an example of how to use the querySelector method to select an element from an HTML document:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <h2>Welcome to GoLinux</h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis
            expedita iure, non pariatur ratione amet atque odit accusamus quam,
            officia velit sunt modi autem, sint eum voluptatum. Deserunt,
            dolorum molestiae!
        </p>
        <button class="big">Click Here to Get Started</button>

        <h2>Get all the info in your inbox</h2>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum dicta
            enim architecto laborum earum nostrum. Voluptates repellendus
            consectetur in cupiditate tenetur ex voluptatibus accusantium
            repudiandae nemo, fugiat, inventore doloribus nostrum?
        </p>
        <button id="full">Subscribe to GoLinux</button>
    </body>

    <script>
        let myButton = document.querySelector("button");
        console.log(myButton);
    </script>
</html>

Output

<button class="big">Click Here to Get Started</button>

In this example, the querySelector method is called on the document object, and it is passed a string containing the CSS selector for a button element. This selects the first button element in the document, and it returns the Element object representing that element. The result is then assigned to the myButton variable, and it is logged to the console.

 

Select element by class or id name

We can select the elements using the class or id by using the . and # characters with the class name or id name respectively. Here is an example where we select the elements with the big class and the full id and log the element to the console.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <h2>Welcome to GoLinux</h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis
            expedita iure, non pariatur ratione amet atque odit accusamus quam,
            officia velit sunt modi autem, sint eum voluptatum. Deserunt,
            dolorum molestiae!
        </p>
        <button class="big">Click Here to Get Started</button>

        <h2>Get all the info in your inbox</h2>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum dicta
            enim architecto laborum earum nostrum. Voluptates repellendus
            consectetur in cupiditate tenetur ex voluptatibus accusantium
            repudiandae nemo, fugiat, inventore doloribus nostrum?
        </p>
        <button id="full">Subscribe to GoLinux</button>
    </body>

    <script>
        let classButton = document.querySelector(".big");
        let idButton = document.querySelector("#full");
        console.log(classButton);
        console.log(idButton);
    </script>
</html>

Output

<button class="big">Click Here to Get Started</button>
<button id="full">Subscribe to GoLinux</button>

 

Using the querySelectorAll method

In addition to using the querySelector method to select a single element from an HTML document, you can also use the querySelectorAll method to select multiple elements that match a specified CSS selector. This method is similar to the querySelector method, but it returns a NodeList object containing all of the elements in the document that match the specified selector, rather than just the first matching element. Here is an example of how to use the querySelectorAll method to select multiple elements from the same HTML document as in the previous section:

<script>
    let buttons = document.querySelectorAll("button");
    console.log(buttons);
</script>

Output

NodeList(2) [button.big, button#full]

In this example, the querySelectorAll method is called on the document object, and it is passed a string containing the CSS selector for button elements. This selects all of the button elements in the document, and it returns a NodeList object containing these elements. The result is then assigned to the buttons variable, and it is logged to the console

 

Summary

The querySelector and querySelectorAll methods are built-in methods of the "Document" and Element prototypes in JavaScript that are used to select elements from an HTML document based on their CSS selector. These methods accept a single argument: a string containing a CSS selector that specifies the element or elements that you want to select.

The querySelector method returns the first element in the document that matches the specified selector, and the querySelectorAll method returns a NodeList object containing all of the elements in the document that match the specified selector. These methods are useful for accessing specific elements in an HTML document and for performing operations on those elements.

 

References

Document.querySelector() - Web APIs | MDN (mozilla.org)
Document.querySelectorAll() - Web APIs | MDN (mozilla.org)

 

Views: 64
Olorunfemi Akinlua

Olorunfemi Akinlua

He is boasting over five years of experience in JavaScript, specializing in technical content writing and UX design. With a keen focus on programming languages, he crafts compelling content and designs user-friendly interfaces to enhance digital experiences across various domains. You can connect with him on his LinkedIn profile.

Can't find what you're searching for? Let us assist you.

Enter your query below, and we'll provide instant results tailored to your needs.

If my articles on GoLinuxCloud has helped you, kindly consider buying me a coffee as a token of appreciation.

Buy GoLinuxCloud a Coffee

For any other feedbacks or questions you can send mail to admin@golinuxcloud.com

Thank You for your support!!

Leave a Comment