How to use querySelectorAll In Javascript

Similar to querySelector, but it returns a NodeList containing all elements that match the specified CSS selector.

Syntax:

document.querySelectorAll('selector')

Example:

HTML

<!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>
</head>

<body>
    <h1 class="selector">w3wiki</h1>
    <p class="selector">
        This is showing how to select DOM element
        using tag name
    </p>

    <script>
        const elements = document.querySelectorAll('.selector');
        elements[0].style.color = "green";
        elements[1].style.color = "red";
        elements[0].style.textAlign = "center";
        elements[1].style.textAlign = "center";
        elements[0].style.marginTop = "60px";
    </script>
</body>

</html>

Output:

Output

How to select DOM Elements in JavaScript ?

Selecting DOM (Document Object Model) elements is a fundamental aspect of web development with JavaScript. It allows developers to interact with and manipulate elements on a webpage dynamically. Proper selection of elements is crucial for tasks such as updating content, adding event listeners, or modifying styles.

Below are the approaches to select DOM elements in JavaScript:

Table of Content

Using getElementById
Using getElementsByClassName
Using getElementsByTagName
Using querySelector
Using querySelectorAll

Tags:

#JavaScript-Questions #JavaScript #Web Technologies

Using querySelector

How to use querySelectorAll In Javascript

Syntax:

How to select DOM Elements in JavaScript ?

Similar Reads