return elements that match specified CSS selector(s)

How do I use querySelectorAll() to select multiple elements for modification?

Answers:

  • The querySelectorAll() method is a powerful feature in the Document Object Model (DOM) that allows you to select multiple elements from the document. It accepts a string containing one or more CSS selectors and returns a static NodeList of elements that match the specified selectors.

    To use querySelectorAll() for selecting multiple elements for modification, follow these steps:

    1. Use document.querySelectorAll() to select the elements you want to modify.
    2. Convert the NodeList returned by querySelectorAll() to an array (if necessary), allowing you to use array methods for ease of manipulation.
    3. Iterate through the returned elements and apply the desired modifications.

    Here’s an example to demonstrate this process:

    Example: Changing the background color of multiple paragraphs

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>querySelectorAll Example</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>

    <p class="text">Paragraph 1</p>
    <p class="text">Paragraph 2</p>
    <p class="text">Paragraph 3</p>
    <p class="other">Paragraph 4</p>
    <p class="text">Paragraph 5</p>

    <button id="highlight-button">Highlight Paragraphs</button>

    <script>
        // Select all paragraphs with the class "text"
        const paragraphs = document.querySelectorAll('.text');

        // Function to highlight paragraphs
        function highlightParagraphs() {
            // Iterate through the NodeList and apply modifications
            paragraphs.forEach(function(paragraph) {
                paragraph.classList.add('highlight'); // Add the highlight class
            });
        }

        // Attach an event listener to the button
        document.getElementById('highlight-button').addEventListener('click', highlightParagraphs);
    </script>

</body>
</html>

    Explanation:

    1. HTML Structure: The HTML contains several paragraphs, some of which have the class text.
    2. CSS: A simple CSS class called highlight adds a yellow background.
    3. JavaScript:
      • The querySelectorAll('.text') selects all paragraphs with the class text.
      • The highlightParagraphs function iterates over each selected paragraph and adds the highlight class, changing their background color when the button is clicked.
      • An event listener is attached to a button that triggers the highlightParagraphs function when clicked.

    Key Points:

    • querySelectorAll() returns a static NodeList, but you can convert it to an array if you want to use array-specific methods.
    • You can modify selected elements individually using loops, such as forEach, for, etc.
    • Make sure the selectors you use are valid CSS selectors to ensure you are selecting the correct elements.

Related Questions: