How to Get Element By Class in JavaScript

Question

I want to replace the contents within a html element so I m using the following function for that   function ReplaceContentInContainer id content       var container   document getElementById id      container innerHTML   content     ReplaceContentInContainer  box   This is the replacement text      lt div id  box  gt  lt  div gt    The above works great but the problem is I have more than one html element on a page that I want to replace the contents of  So I can t use ids but classes instead  I have been told that javascript does not support any type of inbuilt get element by class function  So how can the above code be revised to make it work with classes instead of ids    P S  I don t want to use jQuery for this

User · Answer

I m surprised there are no answers using Regular Expressions  This is pretty much Andrew s answer  using RegExp test instead of String indexOf  since it seems to perform better for multiple operations  according to jsPerf tests  It also seems to be supported on IE6   function replaceContentInContainer matchClass  content        var re   new RegExp         s     matchClass         S             elems   document getElementsByTagName       i      for  i in elems            if  re test elems i  className                 elems i  innerHTML   content                     replaceContentInContainer  box    This is the replacement text       If you look for the same class es  frequently  you can further improve it by storing the  precompiled  regular expressions elsewhere  and passing them directly to the function  instead of a string   function replaceContentInContainer reClass  content        var elems   document getElementsByTagName       i      for  i in elems            if  reClass test elems i  className                 elems i  innerHTML   content                     var reBox          s box    S    replaceContentInContainer reBox   This is the replacement text

User · Answer

I assume this was not a valid option when this was originally asked  but you can now use document getElementsByClassName       For example   var elements   document getElementsByClassName names      or  var elements   rootElement getElementsByClassName names     See the MDN documentation for more

User · Answer

I think something like   function ReplaceContentInContainer klass content    var elems   document getElementsByTagName       for  i in elems       if elems i  getAttribute  class      klass    elems i  getAttribute  className      klass           elems i  innerHTML   content              would work

User · Answer

Of course  all modern browsers now support the following simpler way   var elements   document getElementsByClassName  someClass      but be warned it doesn t work with IE8 or before  See http   caniuse com getelementsbyclassname  Also  not all browsers will return a pure NodeList like they re supposed to   You re probably still better off using your favorite cross-browser library

User · Answer

This should work in pretty much any browser     function getByClass  className  parent      parent     parent document     var descendants parent getElementsByTagName       i -1  e  result       while  e descendants   i                e  class    e className       indexOf     className       gt  -1   amp  amp  result push e         return result      You should be able to use it like this   function replaceInClass  className  content      var nodes   getByClass className   i -1  node    while  node nodes   i   node innerHTML   content

User · Answer

document querySelectorAll   your class name here      That will work in  modern  browsers that implement that method  IE8     function ReplaceContentInContainer selector  content      var nodeList   document querySelectorAll selector     for  var i   0  length   nodeList length  i  lt  length  i           nodeList i  innerHTML   content         ReplaceContentInContainer   theclass    HELLO WORLD      If you want to provide support for older browsers  you could load a stand-alone selector engine like Sizzle  4KB mini gzip  or Peppy  10K mini  and fall back to it if the native querySelector method is not found    Is it overkill to load a selector engine just so you can get elements with a certain class  Probably  However  the scripts aren t all that big and you will may find the selector engine useful in many other places in your script

User · Answer

x000D   x000D  var elems   document querySelectorAll   one    x000D   x000D  for  var i   0  i  lt  elems length  i      x000D      elems i  innerHTML    content   x000D     x000D   x000D   x000D

User · Answer

When some elements lack ID  I use jQuery like this     document  ready function             myclass   attr  id    myid          This might be a strange solution  but maybe someone find it useful

User · Answer

jQuery handles this easy   let element      myclass   element html  Some string      It changes all the  myclass elements to that text

User · Answer

A Simple and an easy way        var cusid ele   document getElementsByClassName  custid    for  var i   0  i  lt  cusid ele length    i        var item   cusid ele i         item innerHTML    this is value

User · Answer

This code should work in all browsers   function replaceContentInContainer matchClass  content        var elems   document getElementsByTagName       i      for  i in elems            if        elems i  className        indexOf       matchClass                         gt  -1                elems i  innerHTML   content                      The way it works is by looping through all of the elements in the document  and searching their class list for matchClass  If a match is found  the contents is replaced   jsFiddle Example  using Vanilla JS  i e  no framework

[javascript] How to Get Element By Class in JavaScript?

Examples related to javascript