jquery JS hasAttribute带有data属性值

mm9b1k5b  于 2023-10-17  发布在  jQuery
关注(0)|答案(5)|浏览(131)

有没有一种原生的方法,没有jQuery,来检查dom元素是否具有所选值的属性。举例来说:

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

这将是真实的:
document.hasAttribute('data-mod');
但这将是假的:
document.hasAttribute('data-mod="do"')
有没有办法在DOM元素上用这个值来本地检查数据属性?

hts6caw3

hts6caw31#

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

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

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

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

.或者对于[data-*]属性,您可以使用dataset

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

2ekbmq322#

你可以用dataset来做,

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

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

eanckbw9

eanckbw93#

是的,就是这样:

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

7uzetpgm4#

这可能有用...

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

5jvtdoz25#

可以使用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>

相关问题