Question

Ok. Suddenly I have this query in my mind.

Libraries like jQuery makes it real easy to look for an element having some class. It does not force us to apply an id on the element to be found. In Vanilla js we have the option to find out an element using the method getElementById() which forces me to apply IDs to a large extent.

I looked at this solution to find an element using an attribute which in this case is going to be class. After going through the solutions I find it very heavy on the browser. If I have a complex DOM structure, it will cost performance. And my question remains the same.

How do I find an element using class name and without using id in Vanilla Javascript?

Answer 1

How about

var elems = document.getElementsByClassName('someclass');

That will return a set of elements which have the given class. You could then access them using elems[0] , elems[1] and so on..

Remember that jQuery is ultimately based on JavaScript, so it can’t be faster from an execution point of view.

You might find some interesting jQuery to JavaScript translations here

http://vanilla-js.com/

For older versions of IE you need to use getElementsByTagName and loop over the returned elements. This utility function should be compatible from IE6 onwards (probably similar to the solution you linked to)

function getElementsByAttributeValue(atrName,atrValue) {
    var matchElems = [];

    var allElems = document.getElementsByTagName('*');
    for(var x = 0, len = allElems.length; x < len; x++) {
        if(allElems[x].getAttribute(atrName) != atrValue) {
            continue;
        }

        matchElems.push(allElems[x]);
    }

    return matchElems;
}

Usage would be:

var elems = getElementsByAttributeValue("class","someclass");