How to check if data attribute exist with plain javascript?

Question

I want to check if an HTML5 data attribute exists using plain javascript. I have tried the below code snippet, but it doesn't work.

if(object.getAttribute("data-params")==="undefined") {
   //data-attribute doesn't exist
}

Answer 1

Element.getAttribute returns null or empty string if the attribute does not exist.

You'd use Element.hasAttribute :

if (!object.hasAttribute("data-example-param")) {
    // data attribute doesn't exist
}

or Element.dataset (see also: in operator ):

if (!("exampleParam" in object.dataset)) {
    // data attribute doesn't exist
}

or even

if (!object.getAttribute("data-example-param")) {
    // data attribute doesn't exist or is empty
}

Answer 2

Checking against null also yielded the solution.

if (object.getAttribute("data-example-param") === null) {
//data attribute doesn't exist
 }else{
 //data attribute exists
 }

Answer 3

The code you posted doesn't won't work as you expect, what you're doing here is checking if the attribute-value of the named attribute ( "data-params" ) is equal to "undefined" , which will return true only if the attribute is data-params="undefined" .

if (object.getAttribute("data-params") === "undefined") {
   // the "data-params" attribute-value is exactly "undefined"
   // note that `getAttribute()` is a 
}

What I suspect you want to do is:

var typeOfObjectAttribute = typeof object.getAttribute("data-params");

if (typeOfObjectAttribute === null || typeOfObjectAttribute === "") {
   // data-params attribute doesn't exist on that Node.
}

Note that – according Mozilla Developer Network (at the reference for Element.getAttribute() , below) – states that:

getAttribute() returns the value of a specified attribute on the element. If the given attribute does not exist, the value returned will either be null or "" (the empty string)…

It's also worth noting that getAttribute() is a method of the Element nodes, rather than generic objects.

Incidentally, you could also use the following approach (again, testing that the attribute is not set):

// here we look to see if the 'params' key is present in the
// HTMLElement.dataset object of the element, and then invert
// that result using the '!' operator, to check that the
// attribute *isn't* present:
if (!('params' in document.getElementById('elementID').dataset)) {
    // the data-params attribute is not present.
}

References:

• Element.getAttribute() .
• HTMLElement.dataset .
• in operator .
• typeof operator .

Answer 4

You could as well just use the dataset API.

HTMLElement.dataset

The HTMLElement.dataset read-only property allows access, both in reading and writing mode, to all the custom data attributes (data-*) set on the element. It is a map of DOMString, one entry for each custom data attribute.

Sadly this will not work in IE10 but i am pretty sure that there is a shim out there somewhere.

Here is an example

 var containerData = document.querySelector('#container').dataset, contentData = document.querySelector('#content').dataset; // Check if dataset is empty or not. console.log(Object.keys(containerData).length === 0); console.log(Object.keys(contentData).length === 0); // Check for specific data if (containerData.hasOwnProperty('bar')) { console.log(containerData.bar); } // Here is the dataset console.log(containerData);

 <div id="container" data-foo="bar" data-bar="foo"> <div id="content"> Content </div> </div>

Answer 5

Try using typeof :

if(typeof object.getAttribute("data-params") === "undefined") {
   console.log('data-attribute doesn't exist');
}

Answer 6

You cang do just falsy value check

if(!object.getAttribute("data-params")) {
   //data-attribute doesn't exist
}

cause getAttribute can return null or empty string

also you can use object.hasAttribute("data-params") just to check if attribute exists

Answer 7

The only thing that worked well for me was this.

if(typeof object.dataset.sheet === "undefined") {
  console.log('Data attribute does not exist');
}

Answer 8

Even more simple:

if (object.dataset.sheet !== undefined) {
  // the "data-sheet" attribute exists
}

Answer 9

To see if a given HTML5 element has a specific custom HTML5 data-* attribute, simply examine the element's dataset .

A dataset is a DOMStringMap object so you can use the hasOwnProperty() method:

if (element.dataset.hasOwnProperty('params')) {

  [... CODE HERE...]

}

Answer 10

If anyone landed here knowing what data attribute they are looking for then you can check if it exists with

HTML:

<input id="your-element" data-type="something">

JS:

const element = document.querySelector('#your-element');
if( element.dataset.type === 'something'){
// Do something
}

Of course the type in data-type in the example above is a custom name, data attributes can have any name such as data-cats or data-dogs etc.. ... ...

Answer 11

您可以使用matches()方法，选择器的工作方式与查询选择器的工作方式相同