Javascript 如何使用纯javascript检查数据属性是否存在？

How to check if data attribute exist with plain javascript?

提问by jollykoshy

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.

我想使用普通的 javascript 检查 HTML5 数据属性是否存在。我已经尝试了下面的代码片段，但它不起作用。

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

回答by vaultah

Element.getAttributereturns nullor empty string if the attribute does not exist.

Element.getAttributenull如果属性不存在，则返回或空字符串。

You'd use Element.hasAttribute:

你会使用Element.hasAttribute：

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

or Element.dataset(see also: inoperator):

或Element.dataset（另见：in运算符）：

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

or even

甚至

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

回答by jollykoshy

Checking against null also yielded the solution.

检查 null 也产生了解决方案。

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

回答by David says reinstate Monica

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 trueonly if the attribute is data-params="undefined".

您发布的代码不会像您预期的那样工作，您在这里所做的是检查命名属性 ( "data-params")的属性值是否等于"undefined"，true仅当属性为 时才会返回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:

请注意——根据 Mozilla 开发者网络（在Element.getAttribute()下面的参考资料中）——指出：

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

getAttribute()返回元素上指定属性的值。如果给定的属性不存在，则返回的值将是null或""（空字符串）...

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

还值得注意的是，它getAttribute()是 Element 节点的方法，而不是通用对象。

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

顺便说一句，您还可以使用以下方法（同样，测试未设置属性）：

// 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.
• inoperator.
• typeofoperator.

• Element.getAttribute().
• HTMLElement.dataset.
• in运营商。
• typeof运营商。

回答by DavidDomain

You could as well just use the dataset API.

您也可以只使用数据集 API。

HTMLElement.dataset

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.

HTMLElement.dataset 只读属性允许在读取和写入模式下访问元素上设置的所有自定义数据属性 (data-*)。它是 DOMString 的映射，每个自定义数据属性一个条目。

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

遗憾的是，这在 IE10 中不起作用，但我很确定某处有垫片。

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>

回答by Tobias Golbs

Try using typeof:

尝试使用typeof：

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

回答by Andrey

You cang do just falsy value check

你可以做假值检查

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

cause getAttributecan return null or empty string

原因getAttribute可以返回 null 或空字符串

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

您也可以object.hasAttribute("data-params")仅用于检查属性是否存在

回答by Jens T?rnell

The only thing that worked well for me was this.

唯一对我有用的就是这个。

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

回答by Freddo

Even more simple:

更简单：

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

回答by Rounin

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

要查看给定的 HTML5 元素是否具有特定的自定义 HTML5data-*属性，只需检查该元素的dataset.

A datasetis a DOMStringMapobjectso you can use the hasOwnProperty()method:

Adataset是一个DOMStringMap对象，因此您可以使用该hasOwnProperty()方法：

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

  [... CODE HERE...]

}