[英]Using querySelectorAll on data- attribute javascript (no jQuery)
我知道如何使用querySelectorAll选择特定的类。 但是,我该如何选择具有特定数据属性的DOM对象。
例如:
<div class="person">
<div class="detail" data-field="name">Tim</div>
<div class="detail" data-field="age">24</div>
<div class="detail" data-field="hair">black</div>
</div>
<div class="person">
<div class="detail" data-field="name">Tim</div>
<div class="detail" data-field="age">34</div>
<div class="detail" data-field="name">red</div>
</div>
<div class="person">
<div class="detail" data-field="name">David</div>
<div class="detail" data-field="age">56</div>
<div class="detail" data-field="name">brown</div>
</div>
如果我要选择具有特定类的DOM,例如“详细信息”
document.querySelectorAll('.detail')
我的问题是,如何为所有带有“ data-field = name”的域名选择?
您要使用属性选择器
// every element with a data-field attribute var dataFieldElements = document.querySelectorAll('[data-field]'); console.log(dataFieldElements); // only those elements that have their data-field attribute equal to name var dataFieldNameElements = document.querySelectorAll('[data-field=name]'); console.log(dataFieldNameElements);
<div class="person"> <div class="detail" data-field="name">Tim</div> <div class="detail" data-field="age">24</div> <div class="detail" data-field="hair">black</div> </div> <div class="person"> <div class="detail" data-field="name">Tim</div> <div class="detail" data-field="age">34</div> <div class="detail" data-field="name">red</div> </div> <div class="person"> <div class="detail" data-field="name">David</div> <div class="detail" data-field="age">56</div> <div class="detail" data-field="name">brown</div> </div>
使用属性选择器
[attr = value]
表示一个属性名称为attr且元素的值恰好是“值”的元素。
document.querySelectorAll('.detail[data-field="name"]')
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.