JS hasAttribute 带有数据属性值

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

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

这将是真的：

document.hasAttribute('data-mod');

但这将是错误的：

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

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

您必须通过以下方式访问属性的值getAttribute https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute并将其与您期望的字符串进行比较：

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

对于现代浏览器，您可以使用matches https://developer.mozilla.org/en-US/docs/Web/API/Element/matches:

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

……或者为了[data-*]您可以使用的属性dataset https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset:

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