JavaScript QuerySelectorAll Data Attribute with Examples

One of the essential aspects of JavaScript is manipulating the Document Object Model (DOM) to dynamically update web content.

In this post, you are going to learn the JavaScript QuerySelectorAll and data attributes, unlocking their potential with examples.

Whether you are a proficient developer or just starting your journey in coding, this article will provide valuable understanding to enhance your web development skills.

What is JavaScript QuerySelectorAll?

JavaScript QuerySelectorAll is a powerful method that enables you to select multiple elements on a web page using a CSS selector.

It returns a NodeList consisting of all the matching elements, which you can then manipulate or interact with.

Let’s proceed to the details of how to use QuerySelectorAll effectively.

Basic Syntax

To get started, here’s the basic syntax for using QuerySelectorAll:

const elements = document.querySelectorAll('selector');

• const elements is a variable that stores the selected elements.
• document refers to the DOM.
• querySelectorAll is the method.
• ‘selector’ is a CSS selector that specifies which elements to select.

Practical Example in Selecting All Buttons

Suppose you have a webpage with multiple buttons, and you want to select all of them.

Here’s example code:

const buttons = document.querySelectorAll('button');

Now, the buttons variable consists of a NodeList with all the elements on your webpage.

Using Data Attributes

Data attributes are HTML attributes that enable you to store extra information within an element.

They are typically used to attach metadata to HTML elements, making it easier to manipulate them using JavaScript.

Let’s explore how to use data attributes alongside QuerySelectorAll.

Adding Data Attributes

To add a data attribute to an HTML element, you can use the following syntax:

<div data-info="example">This is a div with a data attribute.</div>

In this example code, we have added a data-info attribute with the value “example” to a

element.

Accessing Data Attributes

Now that we have added a data attribute, let’s see how to access it using JavaScript:

const elementSample = document.querySelector('div');
const infoValue = elementSample.getAttribute('data-info');
console.log(infoValue);

We selected the <div> element using querySelector, and then we used getAttribute to retrieve the value of the data-info attribute.

Examples of JavaScript QuerySelectorAll Data Attribute

Example 1: Changing Text with Data Attributes

Assume that you have a list of items with data attributes that store their corresponding descriptions.

You want to update the text of a selected item when a user clicks on it.

Also read: How to Use JavaScript Standard Deviation

Here’s a step-by-step example of how to complete this:

HTML Structure:

<ul>
  <li data-description="Product 1">Product 1</li>
  <li data-description="Product 2">Product 2</li>
  <li data-description="Product 3">Product 3</li>
</ul>

JavaScript Code

const itemsValue = document.querySelectorAll('li');

itemsValue.forEach((item) => {
  item.addEventListener('click', () => {
    const description = item.getAttribute('data-description');
    item.textContent = description;
  });
});

With this example code, when a user clicks on an item, its text will be replaced with the data stored in its data attribute.

Example 2: Highlighting Elements with Data Attributes

Let’s say you have a gallery of images, and each image has a data attribute that show its category. You want to enable users to filter the images by category.

Here’s an example code:

HTML Structure

<div class="gallery">
  <img src="imageSample1.jpg" data-category="nature" alt="Nature">
  <img src="imageSample2.jpg" data-category="animals" alt="Animals">
  <img src="imageSample3.jpg" data-category="architecture" alt="Architecture">
</div>

JavaScript Code

const filterButtonsSample = document.querySelectorAll('.filter-button');
const images = document.querySelectorAll('.gallery img');

filterButtonsSample.forEach((button) => {
  button.addEventListener('click', () => {
    const category = button.getAttribute('data-category');
    
    images.forEach((image) => {
      if (image.getAttribute('data-category') === category) {
        image.classList.remove('hidden');
      } else {
        image.classList.add('hidden');
      }
    });
  });
});

With this example code, users can click on filter buttons to display images based on their data attribute categories.

FAQs

Conclusion

In this exploration of JavaScript QuerySelectorAll and data attributes, you have gained valuable understanding into the world of DOM manipulation.

By mastering these methods, you can create more dynamic and interactive web applications.

Whether you are enhancing user experiences or building powerful features, JavaScript QuerySelectorAll and data attributes are indispensable tools in your web development toolkit.