Using querySelectorAll on data- attribute javascript (no jQuery)

Question

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

Satpal · Accepted Answer · 2017-06-02 13:16:29Z

7

Use Attribute selector

[attr=value]

Represents an element with an attribute name of attr and whose value is exactly "value".

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

answered Jun 2, 2017 at 13:16

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Freeman Lambda · Accepted Answer · 2017-06-02 13:19:54Z

You want to use the attribute selector

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

Collectives™ on Stack Overflow

Using querySelectorAll on data- attribute javascript (no jQuery)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related