How to get element by data-... with specified value

Question

How to get element by attribute "data-tid" with value of "43574" in Javascript? There is only one element with this value.

Please avoid using jQuery.

See here developer.mozilla.org/en-US/docs/Web/API/document.querySelector. Give it a try, if you got any problems come back with your code. Help us help you. Good luck. — elclanrs
– elclanrs, Commented Jan 6, 2014 at 13:15

Denys Séguret · Accepted Answer · 2014-01-06 13:15:33Z

1

In recent browsers you can use

var elem = document.querySelector('[data-tid="43574"]')

but be warned it's not a fast selector.

To use a variable, do

var elem = document.querySelector('[data-tid="'+myValue+'"]')

or use

var elems = document.querySelectorAll('[data-tid]')

and loop over the found elements to check the value.

answered Jan 6, 2014 at 13:15

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

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

7 Comments

May I suggest querySelector since it's only one element?

Ow, and how can I replace 43574 with variable?

It will probably be faster if you use querySelector instead of querySelectorAll, since it can stop once it finds the element.

@MackieeE That sets the attribute, it doesn't search for it.

String concatenation: '[data-tid="'+VARIABLE+'"]'

|