JS使用hasAttribute和data属性值

Question

有没有一种原生的方法（不使用 jQuery），可以检查一个 DOM 元素是否具有选定值的属性。例如：

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

这将为真：

document.hasAttribute('data-mod');

但这将为假：

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

有没有一种本地方式可以检查带有值的DOM元素上的数据属性？

- TDmoneybanks

---

document 没有属性。您是指文档中的元素，还是特定元素具有属性？ - Alexander O'Mara

让你的问题更清晰明了。 - user1106925

有没有一种本地方式，不需要使用 JQuery？为什么你的问题标签中有 jquery？ - guest271314

Answer 1

你必须通过 getAttribute 访问属性值，并将其与你期望的字符串进行比较。

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

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

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

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

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

- zzzzBov

---

匹配符合我的使用情况。如何支持旧版浏览器？如果我记得正确，有些人将其定义为不同的名称，例如msMatchesSelector()，对吗？ - TDmoneybanks

为了获取最新的兼容性信息，我建议查阅 caniuse。该网站显示，如果需要支持IE9+，则需要使用 msMatchesSelector 作为后备方案。 - zzzzBov

Answer 2

你可以使用 dataset 来正确完成这个任务。

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

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

- Rajaprabhu Aravindasamy

---

抱歉，我应该表述得更清楚。由于数据属性和值可能会发生变化，因此我不知道在函数内部它们会是什么。 - TDmoneybanks

@TDmoneybanks 执行期间，您只会有这个 'data-mod="do"' 吗？ - Rajaprabhu Aravindasamy

该函数将接受一个选择器参数。其内容可以是任何有效的选择器，包括任何 data-*=""。我需要能够查看元素是否具有该选择器。 - TDmoneybanks

@TDmoneybanks，你可以按照zzzzBov的建议使用element.matches(selector)来解决你的问题。但是要小心使用，因为它只被最近的浏览器支持。https://developer.mozilla.org/en-US/docs/Web/API/Element/matches - Rajaprabhu Aravindasamy

@guest27314，我们没有讨论element.dataset，但谢谢。 - TDmoneybanks

Answer 3

是的，这里是内容：

是的，这里是：

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

- Yann Chabot

---

TypeError: document.getAttribute is not a function - Alexander O'Mara

抱歉，文档没有属性，请选择一个有效的选择器。 - Yann Chabot

谢谢，肯定能正常工作。 console.log(document.querySelector('#input-number').getAttribute('type') == 'number'); - axdrv

Answer 4

这可能有效...

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

- user1751825

Answer 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>

- guest271314