Get element by tag and class

Question

I have a script

var firstImg = row.getElementsByTagName('img')[0];

and later

if (x){ firstImg.src='/images/checked.png'; }

I'd like to define that the img should be of class='something'

(Get first img with class='something')

Answer 1

Use the

 querySelectorAll('img.classname')[0]

this returns first image with class set to class name. However jQuery is better!!

$('img.classname')

Answer 2

Just set it...

firstImg.className += "something";

...or...

firstImg.classList.add("something");

If you can get away with not supporting older browsers.

Further Reading (disclaimer: link to my own blog).

If you're intending to get elements with a certain class name, you can use...

document.getElementsByClassName("something");

...or...

document.querySelectorAll(".something");

Keep in mind getElementsByClassName() isn't in <= IE8.

You can use...

var getElementsByClassName(nodeList, className) {
    var i, results = [];
    for (i = 0; i < nodeList.length; i++) {
        if ((" " + nodeList[i].className + " ").indexOf(" " + className + " ") > -1) {
             results.push(nodeList[i]);
        }
    }

    return results; 
}

Of course, it's super simple if you're using jQuery...

$(".something");

Answer 3

this selects the first img with class='something':

var firstImg = $('img.something')[0];

Answer 4

If you could not throw away the old browsers, then you need a loop.

var imgs = row.getElementsByTagName('img'),
    some_class = 'something',
    i, first_img;

for (i = 0; i < imgs.length; i++) {
    if ((' ' + imgs[i].className + ' ').indexOf(' ' + some_class + ' ') > -1) {
       first_img = imgs[i];
       break;
    }
}