Getting element through attribute value in javaScript

Question

I want to get the element through javascript based on attribute value, as per the example I want to get element through attribute "doc-cid" and the value of "doc-cid" is dynamic.

<p align="center" style="font-family:times;" doc-cid="11303">
<font size="2" doc-cid="11304">55</font></p>



<p id="demo">Click the button to change the text of a list item.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction()
{
var list = document.getElementsByTagName("doc-cid=\"11303\"")
alert(list.getAttribute("doc-cid"));
}
</script>

Sebastien Daniel · Accepted Answer · 2014-07-20 15:00:55Z

I'll start with a few pointers about your above code, and follow through with a solution.

POINTERS

doc-cid is not a "TagName", it is a custom attribute. hence, your function trying to getElementsByTagName will always fail for "doc-cid".
doc-cid can by dynamic (or not) it doesn't matter. A lookup function will always get the CURRENT DOM value of your element (unless you specifically make it do otherwise).
I suggest you use the new "data-*" attribute in html, it keeps your markup valid (if that is important to you). The use would be as follows: your content

SOLUTION

function getElementByAttribute (attribute, value, start) {
            var start    = start || document,
                cache, //store found element
                i;

            function lookup(start) {
                // if element has been found and cached, stop
                if (cache) {
                    return;
                } else if (start.getAttribute(attribute) === value) { // check if current element is the one we're looking for
                    cache = start;
                    return;
                } else if (start.childElementCount > 0) { // if the current element has children, loop through those
                    lookup(start.children[0]);
                } else if (start.nextElementSibling) { // if the current element has a sibling, check it
                    lookup(start.nextElementSibling);
                } else {
                    return;
                }
            }

            lookup(start);

            return cache;
        }

You simply give the function the attribute name you are looking up, the value you need to match and the starting point of the lookup (if no starting point is specified it'll start at the very beginning of your page (much slower). Below is an example for your markup:

    // you have no easy to get starting point, so we'll traverse the DOM
    getElementByAttribute('doc-cid', '11303');

If you want to start at a better node, you can add a wrapper div element and give it id="wrapper" then you could call the function as follows:

var start = document.getElementById('wrapper');
getElementByAttribute('doc-cid', '11303', start);

Hope this helps.

Collectives™ on Stack Overflow

Getting element through attribute value in javaScript

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related