Using querySelectorAll on data- attribute javascript (no jQuery)

user_7599104 0
Viewed 7632

I know how to select for specific classes using querySelectorAll . But How would I select for DOM object with specific data- attributes.

For example:

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

If I want to select DOMs with a specific class e.g 'detail'

 document.querySelectorAll('.detail')

My question is, How would I select for all doms with 'data-field = name?'

javascript
2 Answers
Related