Find an element in DOM based on an attribute value

Question

Can you please tell me if there is any DOM API which search for an element with given attribute name and attribute value   Something like   doc findElementByAttribute  myAttribute    aValue

User · Answer

FindByAttributeValue  Attribute-Name    Attribute-Value         p s  if you know exact element-type  you add 3rd parameter  i e div  a  p    etc       FindByAttributeValue  Attribute-Name    Attribute-Value    div         but at first  define this function   function FindByAttributeValue attribute  value  element type         element type   element type           var All   document getElementsByTagName element type     for  var i   0  i  lt  All length  i                if  All i  getAttribute attribute     value    return All i             p s  updated per comments recommendations

User · Answer

Modern browsers support native querySelectorAll so you can do    document querySelectorAll   data-foo  value        https   developer mozilla org en-US docs Web API Document querySelectorAll  Details about browser compatibility    http   quirksmode org dom core  t14 http   caniuse com queryselector   You can use jQuery to support obsolete browsers  IE9 and older        data-foo  value

User · Answer

Update  In the past few years the landscape has changed drastically   You can now reliably use querySelector and querySelectorAll  see Wojtek s answer for how to do this     There s no need for a jQuery dependency now   If you re using jQuery  great   if you re not  you need not rely it on just for selecting elements by attributes anymore     There s not a very short way to do this in vanilla javascript  but there are some solutions available   You do something like this  looping through elements and checking the attribute  If a library like jQuery is an option  you can do it a bit easier  like this       myAttribute value      If the value isn t a valid CSS identifier  it has spaces or punctuation in it  etc    you need quotes around the value  they can be single or double        myAttribute  my value       You can also do start-with  ends-with  contains  etc   there are several options for the attribute selector

User · Answer

We can use attribute selector in DOM by using document querySelector   and document querySelectorAll   methods  for yours  document querySelector  quot  myAttribute  aValue   quot     and by using querySelectorAll    document querySelectorAll  quot  myAttribute  aValue   quot     In querySelector   and querySelectorAll   methods we can select objects as we select in  quot CSS quot   More about  quot CSS quot  attribute selectors in https   developer mozilla org en-US docs Web CSS Attribute selectors

User · Answer

Use query selectors  examples   document querySelectorAll   input name    id  view    class  button       input name  Inputs elements with name property    id  view  Elements with id that start with view-    class  button  Elements with the button class

User · Answer

you could use getAttribute    var p   document getElementById  p     var alignP   p getAttribute  align      https   developer mozilla org en-US docs Web API Element getAttribute

User · Answer

Here is an example   How to search images in a document by src attribute    document querySelectorAll  img src  https   pbs twimg com profile images         jpg

[javascript] Find an element in DOM based on an attribute value

Examples related to javascript

Examples related to dom