Using Custom Data Attributes with jQuery and Vanilla JavaScript

In modern web development, custom data attributes have become a powerful tool for storing and retrieving data associated with HTML elements. These attributes, introduced in HTML5, allow developers to embed custom data into their markup, making it easier to manipulate and interact with the DOM using JavaScript. In this tutorial, we will explore how to use jQuery and vanilla JavaScript to select and manipulate elements based on these custom data attributes.

Understanding Custom Data Attributes

Custom data attributes are defined using the data- prefix followed by a custom name. For example:

<ul data-group="Companies">
  <li data-company="Microsoft"></li>
  <li data-company="Google"></li>
  <li data-company="Facebook"></li>
</ul>

In this example, we have an unordered list with a data-group attribute set to "Companies", and each list item has a data-company attribute set to the name of a company.

Selecting Elements using jQuery

To select elements based on custom data attributes using jQuery, you can use the following syntax:

$("[data-attribute='value']");

Replace data-attribute with the actual name of your custom data attribute and value with the desired value. For example:

// Select all elements with data-company="Microsoft" below "Companies"
$("ul[data-group='Companies'] li[data-company='Microsoft']");

// Select all elements with data-company!="Microsoft" below "Companies"
$("ul[data-group='Companies'] li:not([data-company='Microsoft'])");

You can also use other selectors like :contains, ^=, *= , and $= to select elements based on the value of the custom data attribute. For example:

// Select all elements whose data-company starts with "G"
$("[data-company^='G']");

// Select all elements whose data-company contains "soft"
$("[data-company*='soft']");

// Select all elements whose data-company ends with "book"
$("[data-company$='book']");

Selecting Elements using Vanilla JavaScript

To select elements based on custom data attributes using vanilla JavaScript, you can use the querySelectorAll method:

document.querySelectorAll("[data-attribute='value']");

Replace data-attribute with the actual name of your custom data attribute and value with the desired value. For example:

// Select all elements with data-company="Microsoft" below "Companies"
let a = document.querySelectorAll("[data-group='Companies'] [data-company='Microsoft']");

// Select all elements with data-company!="Microsoft" below "Companies"
let b = document.querySelectorAll("[data-group='Companies'] :not([data-company='Microsoft'])");

Note that querySelectorAll returns a NodeList, which you can then iterate over using a loop or convert to an array using the Array.from() method.

Performance Comparison

In terms of performance, vanilla JavaScript is generally faster than jQuery. According to a speed test performed on various browsers, pure JavaScript was faster than jQuery by around 12% on Chrome, 21% on Firefox, and 25% on Safari. You can perform your own tests using the jsPerf tool.

Conclusion

In conclusion, custom data attributes are a powerful tool for storing and retrieving data associated with HTML elements. By using jQuery or vanilla JavaScript, you can easily select and manipulate elements based on these custom data attributes. Whether you prefer the simplicity of vanilla JavaScript or the convenience of jQuery, understanding how to use custom data attributes can greatly enhance your web development workflow.