CODEWITHSUNDEEP
javascriptdom
michael
michael

Reputation: 110510

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

Upvotes: 521

Views: 842829

Answers (11)

Daniel De León
Daniel De León

Reputation: 13639

Use query selectors. Examples:

document.querySelectorAll(' input[name], [id|=view], [class~=button] ')

input[name] Inputs elements with name property-attribute.

[id|=view] Elements with id attribute that start with view-.

[class~=button] Elements with the button class.

Upvotes: 25

user17760986
user17760986

Reputation: 1

function optCount(tagId, tagName, attr, attrval) {
    inputs = document.getElementById(tagId).getElementsByTagName(tagName);

    if (inputs) {
        var reqInputs = [];

        inputsCount = inputs.length;

        for (i = 0; i < inputsCount; i++) {

            atts = inputs[i].attributes;
            var attsCount = atts.length;

            for (j = 0; j < attsCount; j++) {

                if (atts[j].nodeName == attr && atts[j].nodeValue == attrval) {
                    reqInputs.push(atts[j].nodeName);
                }
            }
        }
    }
    else {
        alert("no such specified tags present");
    }
    return reqInputs.length;
}//optcount function closed

This is a function which is is used tu to select a particular tag with specific attribute value. The parameters to be passed are are the tag ID, then the tag name - inside that tag ID, and the attribute and fourth the attribute value. This function will return the number of elements found with the specified attribute and its value. You can modify it according to you.

Upvotes: 0

VnDevil
VnDevil

Reputation: 1391

very simple, try this

<h1>The Document Object</h1>
<h2>The querySelector() Method</h2>

<h3>Add a background color to the first p element:</h3>
<p>This is a p element.</p>
<p data-vid="1">This is a p element.</p>
<p data-vid="2">This is a p element.</p>
<p data-vid="3">This is a p element.</p>

<script>
  document.querySelector("p[data-vid='1']").style.backgroundColor = "red";
  document.querySelector("p[data-vid='2']").style.backgroundColor = "pink";
  document.querySelector("p[data-vid='3']").style.backgroundColor = "blue";
</script>

Upvotes: 8

GDeriyenko
GDeriyenko

Reputation: 116

Amendment for Daniel De León's Answer
It's possible to search with
^= - filters Elements where id (or any other attr) starts with view keyword

document.querySelectorAll("[id^='view']")

Upvotes: 10

Siddharth
Siddharth

Reputation: 637

Here's how you can select using querySelector:

document.querySelector("tagName[attributeName='attributeValue']")

Upvotes: 14

Naveen Pantra
Naveen Pantra

Reputation: 1276

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

for yours:

document.querySelector("[myAttribute='aValue']");

and by using querySelectorAll():

document.querySelectorAll("[myAttribute='aValue']");

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

More about "CSS" attribute selectors in https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Upvotes: 123

Nick Craver
Nick Craver

Reputation: 630339

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.

Upvotes: 235

T.Todua
T.Todua

Reputation: 56341

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.

Upvotes: 17

Deke
Deke

Reputation: 4639

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

Upvotes: 8

boubkhaled
boubkhaled

Reputation: 449

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

Upvotes: 8

Wojtek Kruszewski
Wojtek Kruszewski

Reputation: 14710

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:

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

$('[data-foo="value"]');

Upvotes: 825

Related Questions