How to use querySelectorAll and classList In Javascript

Q: How to use querySelectorAll and classList In Javascript

In this approach, we are using querySelectorAll to select all elements with the class name ‘box’, and classList.contains to check if each box has the specified class name. If it does, we set its display style to ‘block’, otherwise to ‘none’, achieving the filtering effect based on the class name.

Using getElementsByClassName

In this approach, we are using querySelectorAll to select all elements with the class name ‘box’, and classList.contains to check if each box has the specified class name. If it does, we set its display style to ‘block’, otherwise to ‘none’, achieving the filtering effect based on the class name.

Example: The below example uses querySelectorAll and classList to filter a DIV element based on its class name using JavaScript.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
      Using querySelectorAll and classList
      </title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
        }

        h1 {
            color: green;
        }

        .box {
            width: 200px;
            padding: 10px;
            margin: 5px;
            text-align: center;
            border: 1px solid #000;
        }

        .red {
            background-color: red;
        }

        .green {
            background-color: green;
        }

        .blue {
            background-color: blue;
        }

        .button-row {
            display: flex;
            justify-content: center;
            margin: 10px 0;
        }

        button {
            margin: 0 5px;
            padding: 5px 10px;
            border: none;
            background-color: #333;
            color: #fff;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <h1>w3wiki</h1>
    <h3>Using querySelectorAll and classList</h3>
    <div class="box red">Red Box</div>
    <div class="box green">Green Box</div>
    <div class="box blue">Blue Box</div>
    <div class="button-row">
        <button onclick="approach1Fn('red')">
          Show Red Boxes
          </button>
        <button onclick="approach1Fn('green')">
          Show Green Boxes
          </button>
    </div>
    <div class="button-row">
        <button onclick="approach1Fn('blue')">
          Show Blue Boxes
          </button>
        <button onclick="showFn()">
          Show All Boxes
          </button>
    </div>
    <script>
        function approach1Fn(className) {
            const boxes = document.querySelectorAll('.box');
            boxes.forEach(box => {
                if (box.classList.contains(className)) {
                    box.style.display = 'block';
                } else {
                    box.style.display = 'none';
                }
            });
        }
        function showFn() {
            const boxes = document.querySelectorAll('.box');
            boxes.forEach(box => {
                box.style.display = 'block';
            });
        }
    </script>
</body>

</html>

Output:

How to Filter a DIV Element Based on its Class Name using JavaScript?

Div Element can be filtered based on class name for displaying specific content using JavaScript. Here, we will explore two different approaches to filtering a DIV element.

Table of Content

Using querySelectorAll and classList
Using getElementsByClassName

How to use querySelectorAll and classList In Javascript

How to Filter a DIV Element Based on its Class Name using JavaScript?

Similar Reads