How to Filter a DIV Element Based on its Class Name using JavaScript?
Last Updated :
30 Jul, 2024
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.
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.
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>GeeksforGeeks</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.
HTML
<!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;">GeeksforGeeks</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:
Similar Reads
How to remove a Class name from an Element using JavaScript ? Removing a class name from an HTML element using JavaScript is often used to dynamically modify the styling or behavior of an element based on user interactions, events, or other conditions. The operation can be achieved using classList property, that allows you to add, remove, or toggle classes. Sy
3 min read
How to Hide an HTML Element by Class using JavaScript? To hide an HTML element by class using JavaScript, the CSS display property can be manipulated.Below are the approaches to hide an HTML element by class:Table of ContentUsing getElementsByClassName() selectorUsing querySelectorAll() selectorApproach 1: Using getElementsByClassName() selectorIn this
3 min read
How To Get Element By Class Name In JavaScript ? When working with the DOM in JavaScript, selecting elements by their class names is a common task. JavaScript provides several methods to achieve this, whether we need to select one or multiple elements. In this article, we will cover different approaches to get elements by class name in JavaScript.
3 min read
How to Add a Class to DOM Element in JavaScript? Adding a class to a DOM (Document Object Model) element in JavaScript is a fundamental task that enables developers to dynamically manipulate the appearance and behavior of web pages. Classes in HTML provide a powerful way to apply CSS styles or JavaScript functionality to multiple elements at once.
2 min read
How to Check if an element is a child of a parent using JavaScript? In this article, we are going to see the methods by which we can Check if an element is a child of a parent using JavaScript. These are the following methods: Table of Content Using the Node.contains() methodLooping through the parents of the given childUsing the hasChildNodes() methodMethod 1: Usin
5 min read
How to Get Value by Class Name using JavaScript ? This article will show you how to use JavaScript to get value by class name. To get the value of an element by its class name in JavaScript, you can use the getElementsByClassName() method. This method returns an array-like object of all elements with the specified class name. You can then access th
2 min read