The data attribute is an uncommon attribute in small web projects. But it is very often used in large web projects. In this article, we will learn about it and how to check if data attribute exists using JavaScript.
How to check if data attribute exists using JavaScript?
Before answering this question, let’s dive into the data attribute.
What are data attributes?
Data attributes allow us to create our own HTML attributes, these attributes can store a lot of data, and we can work with it directly through JavaScript.
To create our HTML attribute, we need to add the prefix “data-” to the attribute name, for example, data-product, data-id, …
That’s enough for the data attribute. Now, let’s find the best way to check whether the data attribute exists.
Using dataset and in operator
Dataset is a read-only attribute of the HTML element. It allows us to work with the data attribute in HTML through JavaScript. In HTML, data attributes are prefixed with data-. In JavaScript, they are not prefixed with data- and are written in camelCase. For example, data-product-id in HTML will correspond to dataset.productId in JavaScript.
The in operator is used to check if a specified property exists inside an object.
Syntax:
'property' in object
Parameters:
- property: Attribute you want to search for in the object.
- object: Object to check if it contains the property or not.
In this case, we only need to use the in operator with the dataset property of the element we want to check, and we will quickly solve the problem.
Suppose we have an HTML structure like the code sample below.
<ul> <li data-id="1">JavaScript</li> <li data-id="2">Python</li> <li id="3">PHP</li> <li id="4">Java</li> </ul>
And here is how we use the dataset and in operator to check the existence of the data attribute.
const firstLi = document.querySelector("li:first-child");
const lastLi = document.querySelector("li:last-child");
function checkDataAttr(dataAttr, element) {
// Use dataset and in to check the existence of the data attribute
if (dataAttr in element.dataset) {
console.log(`data-${dataAttr} exists`);
} else {
console.log(`data-${dataAttr} does not exist`);
}
}
// Check the existence of the data-id attribute
checkDataAttr("id", firstLi);
checkDataAttr("id", lastLi);Output:
data-id exists
data-id does not existUsing hasAttribute() function
Similar to the in operator, hasAttribute() is used to check the existence of an attribute in an element.
Syntax:
element.hasAttribute(attrName)
Description:
Returns true if the attrName exists inside the element. Otherwise, returns false.
This time, we just need to replace the condition in the if-statement with hasAttribute(), and the problem will be solved. Like this:
const firstLi = document.querySelector("li:first-child");
const lastLi = document.querySelector("li:last-child");
function checkDataAttr(dataAttr, element) {
// Use hasAttribute() to check the existence of the data attribute
if (element.hasAttribute(dataAttr)) {
console.log(`${dataAttr} exists`);
} else {
console.log(`${dataAttr} does not exist`);
}
}
// Check the existence of the data-id attribute
checkDataAttr("data-id", firstLi);
checkDataAttr("data-id", lastLi);Output:
data-id exists
data-id does not existNote that use the name as the attribute name in the HTML tag, do not use the attribute name in the dataset. For instance, use hasAttribute('data-id') instead of hasAttribute('id').
Summary
Congratulations, you already know two simple ways to check if data attribute exists using JavaScript. We recommend using hasAttribute() to make your code easier to understand. But you should also know how to use the dataset because it is a very useful tool.
Thank you for reading!
Maybe you are interested:
- Check if a Div contains specific Text using JavaScript
- Check if an Element is Disabled using JavaScript
- Check if an Element is Required using JavaScript
Hi, I’m Cora Lopez. I have a passion for teaching programming languages such as Python, Java, Php, Javascript … I’m creating the free python course online. I hope this helps you in your learning journey.
Name of the university: HCMUE
Major: IT
Programming Languages: HTML/CSS/Javascript, PHP/sql/laravel, Python, Java
