javascript - Find an element in DOM based on an attribute value


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");

All Answers
  • Translate

    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:


    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.

  • Translate

    Modern browsers support native querySelectorAll so you can do:


    Details about browser compatibility:

    You can use jQuery to support obsolete browsers (IE9 and older):


  • Translate

    We can use attribute selector in DOM by using document.querySelector() and document.querySelectorAll() methods.

    for yours:


    and by using querySlectorAll():


    In querySelector() and querySelectorAll() methods we can select objects as we select in "CSS".

    More about "CSS" attribute selectors in

  • Translate
    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 < All.length; i++)       {
        if (All[i].getAttribute(attribute) == value) { return All[i]; }

    p.s. updated per comments recommendations.

  • Translate

    Here is an example , How to search images in a document by src attribute :


  • Translate

    you could use getAttribute:

     var p = document.getElementById("p");
     var alignP = p.getAttribute("align");