How to get element by class name

Question

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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    querySelector all  getElementsByClassName Don t use w3schools to learn something Refer to MDN for accurate information

[javascript] How to get element by class name?

Examples related to javascript

Examples related to dom