184

Using JavaScript, we can get element by id using following syntax:

var x=document.getElementById("by_id");

I tried following to get element by class:

var y=document.getElementByClass("by_class");

But it resulted into error: 

getElementByClass is not function

How can I get an element by its class?

Paul D. Waite
  • 93,468
  • 54
  • 192
  • 264
Alpha
  • 12,340
  • 22
  • 77
  • 141
  • http://www.w3schools.com/js/js_htmldom.asp it's mentioned that get element by class name but it's not mentioned how to get element by class(no method mentioned there) Hence I thought, I should try with document.getElementByClass – Alpha Jul 31 '13 at 09:09
  • 14
    be wary of using w3schools.com as a source of information. There are far better places to learn than that. For example, [MDN](https://developer.mozilla.org/en-US/). – Spudley Jul 31 '13 at 09:23

4 Answers4

270

The name of the DOM function is actually getElementsByClassName, not getElementByClassName, simply because more than one element on the page can have the same class, hence: Elements.

The return value of this will be a NodeList instance, or a superset of the NodeList (FF, for instance returns an instance of HTMLCollection). At any rate: the return value is an array-like object:

var y = document.getElementsByClassName('foo');
var aNode = y[0];

If, for some reason you need the return object as an array, you can do that easily, because of its magic length property:

var arrFromList = Array.prototype.slice.call(y);
//or as per AntonB's comment:
var arrFromList = [].slice.call(y);

As yckart suggested querySelector('.foo') and querySelectorAll('.foo') would be preferable, though, as they are, indeed, better supported (93.99% vs 87.24%), according to caniuse.com:

SherylHohman
  • 14,460
  • 16
  • 79
  • 88
Elias Van Ootegem
  • 70,983
  • 9
  • 108
  • 145
  • 1
    Thanks. The returned is an array – onmyway133 Jun 15 '17 at 13:00
  • 5
    @onmyway133: NP. Just a side note: the return value is *not* an array, it's a `NodeList` object, which behaves like an array in many ways, but there is a difference. [check the MDN documentation](https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/querySelectorAll) for details on the return type, and what its specfics are – Elias Van Ootegem Jun 17 '17 at 22:41
60

Another option is to use querySelector('.foo') or querySelectorAll('.foo') which have broader browser support than getElementsByClassName.

http://caniuse.com/#feat=queryselector

http://caniuse.com/#feat=getelementsbyclassname

Mark Phillip
  • 1,403
  • 15
  • 22
yckart
  • 30,290
  • 9
  • 117
  • 125
31

You need to use the document.getElementsByClassName('class_name');

and dont forget that the returned value is an array of elements so if you want the first one use:

document.getElementsByClassName('class_name')[0]

UPDATE

Now you can use:

document.querySelector(".class_name") to get the first element with the class_name CSS class (null will be returned if non of the elements on the page has this class name)

or document.querySelectorAll(".class_name") to get a NodeList of elements with the class_name css class (empty NodeList will be returned if non of. the elements on the the page has this class name).

udidu
  • 7,805
  • 6
  • 46
  • 65
8

you can use

getElementsByClassName

suppose you have some elements and applied a class name 'test', so, you can get elements like as following

var tests = document.getElementsByClassName('test');

its returns an instance NodeList, or its superset: HTMLCollection (FF).

Read more

Talha
  • 18,147
  • 8
  • 47
  • 64
  • 2
    Its really un ethical to down vote without any reason – Talha Jul 31 '13 at 09:08
  • 1
    It isn't, but it does happen. I didn't DV, but my guess is that someobody thought you your answer either didn't add anything _new_, and your edit stated that `getElementsByClassName` returns an array, which is wrong. Edited your answer and +1 to cancel -1 vote – Elias Van Ootegem Jul 31 '13 at 09:15
  • thanks @EliasVanOotegem but it happens sometimes... i also did not DV ur answer – Talha Jul 31 '13 at 09:24
  • 1
    I dislike un-motivated DV's, too, so I thought I'd just give the reasons _why_ someone might have DV your answer. _"unethical"_ is a bit harsh, but it's antisocial: if you answered what you think is right, and it isn't, you could learn something if the DV were motivated – Elias Van Ootegem Jul 31 '13 at 09:27
  • 2
    I think, if someone downvotes, that person should give explanation behind downvoting. If you don't give explanation, you should not be able to downvote. – Alpha Jul 31 '13 at 09:33
  • @EliasVanOotegem i only appreciates DV's only it comes with +ive comment. I am always here for learning. anyway thank buddies – Talha Jul 31 '13 at 09:35
  • downvotes for no reason? What if someone liked your answer and didnt upvote it? If you dont like the rules campaign on meta. If you dont want to help people dont give answers. If you want to help people you are opening yourself to the horrors of a downvote for no reason. Its a harsh part of life – Jon Mar 25 '15 at 13:09