在data-Attribute javascript上使用querySelectorAll（無jQuery）

Question

我知道如何使用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”的域名選擇？

Answer 1

您要使用屬性選擇器

 // 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> 

Answer 2

使用屬性選擇器

[attr = value]

表示一個屬性名稱為attr且元素的值恰好是“值”的元素。

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