return elements that match specified CSS selector(s)

How do I use querySelectorAll with specific class names?

Answers:

  • You can use querySelectorAll in JavaScript to select elements in the DOM that have specific class names. The method takes a CSS selector as its argument, allowing you to specify one or more class names.

    Here’s a quick guide on how to use querySelectorAll with specific class names:

    1. Selecting a single class: If you want to select all elements with a specific class, you can use the class selector . followed by the class name. For example, to select all elements with the class example-class:

      const elements = document.querySelectorAll('.example-class');

    2. Selecting multiple classes: If you want to select elements that have multiple specific classes, you can combine class selectors. For example, to select all elements that have both class1 and class2:

      const elements = document.querySelectorAll('.class1.class2');

      This selects elements that contain both classes.

    3. Selecting elements with multiple class names (or): If you want to select elements that have one class or another (using OR logic), you can separate the class selectors with a comma. For example, to select elements that have either class1 or class2:

      const elements = document.querySelectorAll('.class1, .class2');

    4. Using descendant selectors: You can also select elements based on their relationship in the DOM. For example, to select all elements with the class name child-class that are within an element with the class name parent-class:

      const elements = document.querySelectorAll('.parent-class .child-class');

    5. Iterating through the selected elements: querySelectorAll returns a NodeList, which you can iterate through using forEach or other looping constructs:

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

    Example

    Here’s a complete example using multiple classes:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example</title>
</head>
<body>
    <div class="example-class">Item 1</div>
    <div class="example-class example-class-2">Item 2</div>
    <div class="example-class">Item 3</div>
    <div class="example-class-2">Item 4</div>

    <script>
        const elements = document.querySelectorAll('.example-class');
        elements.forEach(element => {
            console.log(element.textContent); // Logs: "Item 1", "Item 2", "Item 3"
        });

        const multipleClasses = document.querySelectorAll('.example-class.example-class-2');
        multipleClasses.forEach(element => {
            console.log(element.textContent); // Logs: "Item 2"
        });
    </script>
</body>
</html>

    In this example, you can see how to select elements using specific class names and how to work with the selected elements in JavaScript.

Related Questions: