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
Using querySelectorAll and classList
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.
<!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:
Using getElementsByClassName
In this approach, we are using the getElementsByClassName method in JavaScript to filter <div> elements based on their class name. When a button is clicked, the function approach2Fn(className) displays only the <div> elements with the matching class name while hiding the others.
Example: The below example uses getElementsByClassName to filter a DIV element based on its class name using JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>Using getElementsByClassName</title>
<style>
.fruit {
margin: 10px;
padding: 10px;
border: 1px solid #ccc;
width: 100px;
text-align: center;
}
.apple {
background-color: red;
color: white;
}
.banana {
background-color: yellow;
}
.orange {
background-color: orange;
color: white;
}
</style>
</head>
<body>
<h1 style="color: green;">w3wiki</h1>
<h3>Using getElementsByClassName</h3>
<button onclick="approach2Fn('apple')">
Apples
</button>
<button onclick="approach2Fn('banana')">
Bananas
</button>
<button onclick="approach2Fn('orange')">
Oranges
</button>
<div id="content">
<div class="fruit apple">Apple 1 </div>
<div class="fruit banana">Banana</div>
<div class="fruit orange">Orange</div>
<div class="fruit apple">Apple 2</div>
</div>
<script>
function approach2Fn(className) {
var divs = document.getElementsByClassName('fruit');
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
if (div.classList.contains(className)) {
div.style.display = 'block';
} else {
div.style.display = 'none';
}
}
}
</script>
</body>
</html>
Output: