return elements that match specified CSS selector(s)

How can I use querySelectorAll to select multiple elements?

Answers:

  • The querySelectorAll method in JavaScript allows you to select multiple elements from the DOM based on a CSS selector. This method returns a NodeList of all matching elements. You can use various CSS selectors to target the elements you want, such as class names, IDs, tags, attributes, or combinations of these.

    Here’s how you can use querySelectorAll to select multiple elements:

    Basic Usage

    1. Select all elements of a specific tag:

      const paragraphs = document.querySelectorAll('p'); // Select all <p> elements

    2. Select elements by class name:

      const items = document.querySelectorAll('.my-class'); // Select all elements with the class "my-class"

    3. Select elements by ID (only one element can have an ID, but you can use it with other selectors):

      const element = document.querySelectorAll('#my-id'); // Select element with ID "my-id"

    4. Select elements with multiple classes:

      const elements = document.querySelectorAll('.class1.class2'); // Select elements with both class "class1" and "class2"

    5. Select multiple different elements: You can combine selectors using commas:

      const elements = document.querySelectorAll('div, p, .my-class'); // Select all <div>, <p> elements and elements with class "my-class"

    Working with the NodeList

    querySelectorAll returns a NodeList, which is similar to an array but does not have all array methods. However, you can loop through it or convert it into an array:

    1. Looping through a NodeList:

      const elements = document.querySelectorAll('.my-class');
elements.forEach((element) => {
    console.log(element); // Do something with each selected element
});

    2. Convert NodeList to an Array:

      const elementsArray = Array.from(document.querySelectorAll('.my-class'));
elementsArray.forEach((element) => {
    console.log(element); // Now you can use any array methods
});

    Example

    Here’s a complete example where you can select multiple elements and log their text content:

    <!DOCTYPE html>
<html>
<head>
    <title>Example</title>
</head>
<body>
    <div class="my-class">Item 1</div>
    <div class="my-class">Item 2</div>
    <p class="my-class">Paragraph 1</p>
    <p>Paragraph 2</p>
    
    <script>
        // Select all elements with the class "my-class"
        const elements = document.querySelectorAll('.my-class');

        // Loop through and log their text content
        elements.forEach(element => {
            console.log(element.textContent);
        });
    </script>
</body>
</html>

    In this example, all elements with the class my-class will be selected and their text content will be logged to the console.

Related Questions: