JS hasAttribute 带数据属性值答案

【问题标题】：JS hasAttribute with data attribute valueJS hasAttribute 带数据属性值
【发布时间】：2019-08-19 03:57:34
【问题描述】：

是否有本地方式，没有 jQuery，来检查 dom 元素是否具有具有选定值的属性。例如：

//assume doc has
data-mod="do" defined

这是真的：

document.hasAttribute('data-mod');

但这是错误的：

document.hasAttribute('data-mod="do"')

有什么方法可以原生地检查 DOM 元素上的数据属性值吗？

【问题讨论】：

document 没有属性。您是指文档中的元素，还是特定元素具有属性？
让你的问题更清楚。
“有没有原生的方式，没有 JQuery，” 为什么在 Question 中有jquery 标签？

标签： javascript jquery

【解决方案1】：

您必须通过getAttribute 访问属性的值并将其与您预期的字符串进行比较：

if (node.getAttribute('data-mod') === 'do') {
    ...
}

对于现代浏览器，您可以使用matches:

if (node.matches('[data-mod="do"]')) {
    ...
}

… 或者对于[data-*] 属性，您可以使用dataset：

if (node.dataset.mod === 'do') {
    ...
}

【讨论】：

匹配适用于我的用例。支持旧浏览器的含义/方法是什么？如果我记得有些人用不同的名字定义了它，比如 msMatchesSelctor() 对吧？
有关最新的兼容性信息，我建议您咨询caniuse，这表明您需要使用msMatchesSelector 作为后备来获得 IE9+ 支持。

【解决方案2】：

您可以使用dataset 正确地做到这一点，

if (elementNode.dataset['mod'] == 'do') {
    //your code goes here.
}

通过使用dataset，您可以轻松访问元素的数据属性。

【讨论】：

对不起，我应该更清楚。我不知道函数中的数据属性或值是什么，因为它可以改变
@TDmoneybanks 所以在执行期间你将只有这个'data-mod="do"'？
该函数将接受一个选择器参数。它的内容可以是任何有效的选择器，包括任何 data-*="" 我需要能够查看元素是否具有该选择器。
@TDmoneybanks 您可以使用 element.matches(selector)，正如 zzzzBov 针对您的情况所建议的那样。但是在使用它时要小心，因为它仅受最近的浏览器支持。 developer.mozilla.org/en-US/docs/Web/API/Element/matches
是的，我注意到这将最符合我的用例。你知道ie 10+有什么样的支持吗？我看到他们只是用不同的名称定义它们，所以如果我检查所有可能的名称（mozMatchesSelector、webkitMatchesSelector 等），我会支持明智吗？

【解决方案3】：

是的，就是这样：

var selector = document.getElementsByTagName("H1")[0]; //Exemple of a h1
if (selector.getAttribute('data-mod') == "do"){
      //Do your logic
}

【讨论】：

TypeError: document.getAttribute is not a function
对不起，文档没有属性，你必须选择一个有效的选择器
谢谢，它工作正常。 console.log(document.querySelector('#input-number').getAttribute('type')=='number');

【解决方案4】：

这可能有效...

var list = document.querySelectorAll('[data-mod="do"]');

【讨论】：

【解决方案5】：

你可以使用Element.attributes

function data(el, dataName, dataValue) {
  for (var i = 0; i < el.attributes.length; i++) {
    if (/^(data)(?=-\w+|=[^=]*$|=$|$)/g.test(el.attributes[i].name)) {
      if (dataName && el.attributes[i].name === "data-" + dataName) {
        if (dataName && dataValue 
            && el.attributes[i].name === "data-" + dataName
            && el.attributes[i].value === dataValue) {
          return true
        }
        return true
      } else {
        return true
      }
    }
  }
  return false
}

var elems = document.querySelectorAll("div");

for (var i = 0; i < elems.length; i++) {
  console.log(data(elems[i]))
}

var _name = "prop", _value = "123";

console.log("element #"
            + elems[1].id 
            +" has `data-*` attribute name:"
            +_name
            +", value:"+_value
            , data(elems[1], _name, _value))

<div data="abc">abc</div>
<div id="prop" data-prop="123">123</div>
<div>no data</div>

【讨论】：