Question

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

<tags-input class="dashboard-tags" ng-model="ngModel"
            id="{{id}}"
            name="{{controller.$name}}"
            display-property="Name"
            add-from-autocomplete-only="true"
            on-tag-added="BrowseAddTag($tag)"
            on-tag-removed="BrowseRemoveTag($tag)"
            placeholder="Start typing a location or division...">
    <auto-complete source="innerAutoComplete($query)" min-length="1" load-on-focus="true" highlight-matched-text="false"></auto-complete>
</tags-input>

Answer 1

如果属性不存在，

Element.getAttribute将返回null或空字符串。

您使用Element.hasAttribute：

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

或Element.dataset（另见：in operator）：

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

甚至

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

Answer 2

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

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

Answer 3

您发布的代码并不像您期望的那样工作，您在此处所做的是检查命名属性（"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 
}

我怀疑你想做的是：

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

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

请注意 - 根据Mozilla开发者网络（在下面的Element.getAttribute()参考文献中） - 说明：

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

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

顺便提一下，您还可以使用以下方法（再次测试该属性不设置）：

// 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.
}

参考文献：

Answer 4

尝试使用typeof：

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

Answer 5

你只能做假值检查

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

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

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

Answer 6

您也可以使用数据集API。

HTMLElement.dataset

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

可悲的是，这在IE10中不起作用，但我很确定那里有一个垫片。

这是一个例子

＆＃13;

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);

＆＃13;

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

＆＃13;

Answer 7

更简单：

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

Answer 8

对我来说唯一有效的就是这个。

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

Answer 9

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

dataset是DOMStringMap 对象，因此您可以使用hasOwnProperty()方法：

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

  [... CODE HERE...]

}

Answer 10

如果有人知道他们正在寻找什么数据属性，那么您可以使用

检查它是否存在

HTML：

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

JS：

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

当然上面例子中type中的data-type是自定义名称，数据属性可以有任何名称，例如data-cats或data-dogs等...... ……

Answer 11

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

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

11 个答案: