在数据属性javascript上使用querySelectorAll（无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>

我的问题是，如何为所有具有“data field=name”的DOM进行选择？

使用

[属性=值]

表示属性名为attr且其值正好为“value”的元素

使用

[属性=值]

表示属性名为attr且其值正好为“value”的元素

---

您希望使用属性选择器

//每个元素都有一个数据字段属性
var dataFieldElements=document.querySelectorAll（“[data field]”）；
console.log（dataFieldElements）；
//只有其数据字段属性等于name的元素
var datafieldnamelements=document.querySelectorAll（“[data field=name]”）；
console.log（datafieldnamelements）

提姆
24
黑色
提姆
34
红色
大卫
56
棕色的
要使用属性选择器吗


//每个元素都有一个数据字段属性
var dataFieldElements=document.querySelectorAll（“[data field]”）；
console.log（dataFieldElements）；
//只有其数据字段属性等于name的元素
var datafieldnamelements=document.querySelectorAll（“[data field=name]”）；
console.log（datafieldnamelements）

提姆
24
黑色
提姆
34
红色
大卫
56
棕色的

 document.querySelectorAll('.detail')

document.querySelectorAll('.detail[data-field="name"]')