我知道如何使用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')
我的问题是,如何为所有DOM选择" data-field = name?"
使用属性选择器
[attr = value]
代表一个元素,其属性名称ant attry且其值正是" value"。
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>