有没有一种原生的方法(不使用 jQuery),可以检查一个 DOM 元素是否具有选定值的属性。例如:
//assume doc has
data-mod="do" defined
这将为真:
document.hasAttribute('data-mod');
但这将为假:
document.hasAttribute('data-mod="do"')
有没有一种本地方式可以检查带有值的DOM元素上的数据属性?
有没有一种原生的方法(不使用 jQuery),可以检查一个 DOM 元素是否具有选定值的属性。例如:
//assume doc has
data-mod="do" defined
这将为真:
document.hasAttribute('data-mod');
但这将为假:
document.hasAttribute('data-mod="do"')
有没有一种本地方式可以检查带有值的DOM元素上的数据属性?
getAttribute
访问属性值,并将其与你期望的字符串进行比较。if (node.getAttribute('data-mod') === 'do') {
...
}
对于现代浏览器,您可以使用matches
:
if (node.matches('[data-mod="do"]')) {
...
}
… 或者对于 [data-*]
属性,您可以使用 dataset
:
if (node.dataset.mod === 'do') {
...
}
dataset
来正确完成这个任务。if (elementNode.dataset['mod'] == 'do') {
//your code goes here.
}
dataset
,您可以轻松地访问元素的数据属性。'data-mod="do"'
吗? - Rajaprabhu Aravindasamyelement.matches(selector)
来解决你的问题。但是要小心使用,因为它只被最近的浏览器支持。https://developer.mozilla.org/en-US/docs/Web/API/Element/matches - Rajaprabhu Aravindasamy是的,这里是:
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
- Alexander O'Maraconsole.log(document.querySelector('#input-number').getAttribute('type') == 'number');
- axdrv这可能有效...
var list = document.querySelectorAll('[data-mod="do"]');
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>
document
没有属性。您是指文档中的元素,还是特定元素具有属性? - Alexander O'Marajquery
? - guest271314