JS hasAttribute具有数据属性值

Question

有没有一种本地方法（没有jQuery）来检查dom元素是否具有具有所选值的属性。例如：

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

这将是正确的：

document.hasAttribute('data-mod');

但这将是错误的：

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

有什么方法可以在本地使用DOM元素检查数据属性的值吗？

Answer 1

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

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

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

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

…或[data-*]您可以使用的属性dataset：

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

Answer 2

是的，就是这样：

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