¿Cómo obtener elemento por clase en JavaScript?

Quiero reemplazar el contenido dentro de un elemento html, así que estoy usando la siguiente función para eso:

function ReplaceContentInContainer(id,content) {
   var container = document.getElementById(id);
   container.innerHTML = content;
}

ReplaceContentInContainer('box','This is the replacement text');

<div id='box'></div>

Lo anterior funciona muy bien, pero el problema es que tengo más de un elemento html en una página en la que quiero reemplazar el contenido. Así que no puedo usar identificadores sino clases en su lugar. Me han dicho que JavaScript no admite ningún tipo de elemento incorporado incorporado por función de clase. Entonces, ¿cómo se puede revisar el código anterior para que funcione con clases en lugar de identificadores?

PD: No quiero usar jQuery para esto.

Este código debería funcionar en todos los navegadores.

function replaceContentInContainer(matchClass, content) {
    var elems = document.getElementsByTagName('*'), i;
    for (i in elems) {
        if((' ' + elems[i].className + ' ').indexOf(' ' + matchClass + ' ')
                > -1) {
            elems[i].innerHTML = content;
        }
    }
}

La forma en que funciona es recorriendo todos los elementos del documento y buscando en su lista de clases matchClass. Si se encuentra una coincidencia, el contenido se reemplaza.

Ejemplo de jsFiddle, utilizando Vanilla JS (es decir, sin marco)

Por supuesto, todos los navegadores modernos ahora admiten la siguiente manera más simple:

var elements = document.getElementsByClassName('someClass');

pero ten en cuenta que no funciona con IE8 o antes. Ver http://caniuse.com/getelementsbyclassname

Además, no todos los navegadores devolverán un estado puro NodeListcomo deberían.

Probablemente todavía estés mejor usando tu biblioteca favorita de navegador cruzado.

document.querySelectorAll(".your_class_name_here");

Eso funcionará en navegadores "modernos" que implementen ese método (IE8 +).

function ReplaceContentInContainer(selector, content) {
  var nodeList = document.querySelectorAll(selector);
  for (var i = 0, length = nodeList.length; i < length; i++) {
     nodeList[i].innerHTML = content;
  }
}

ReplaceContentInContainer(".theclass", "HELLO WORLD");

Si desea proporcionar soporte para navegadores más antiguos, puede cargar un motor de selección independiente como Sizzle (4KB mini + gzip) o Peppy (10K mini) y recurrir a él si no se encuentra el método querySelector nativo.

¿Es excesivo cargar un motor selector solo para poder obtener elementos con una clase determinada? Probablemente. Sin embargo, los scripts no son tan grandes y es posible que el motor de selección sea útil en muchos otros lugares de su script.

Una manera simple y fácil

var cusid_ele = document.getElementsByClassName('custid');
for (var i = 0; i < cusid_ele.length; ++i) {
    var item = cusid_ele[i];  
    item.innerHTML = 'this is value';
}

Me sorprende que no haya respuestas usando Expresiones regulares. Esta es la respuesta de Andrew , en RegExp.testlugar de usar String.indexOf, ya que parece funcionar mejor para múltiples operaciones, de acuerdo con las pruebas de jsPerf .
También parece ser compatible con 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.");

Si busca las mismas clases con frecuencia, puede mejorarlas almacenando las expresiones regulares (precompiladas) en otro lugar y pasándolas directamente a la función, en lugar de una cadena.

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.");

Esto debería funcionar en casi cualquier navegador ...

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+' ') > -1) && result.push(e);
  }
  return result;
}

Deberías poder usarlo así:

function replaceInClass (className, content) {
  var nodes = getByClass(className), i=-1, node;
  while (node=nodes[++i]) node.innerHTML = content;
}

Supongo que esta no era una opción válida cuando se le preguntó originalmente, pero ahora puede usarla document.getElementsByClassName('');. Por ejemplo:

var elements = document.getElementsByClassName(names); // or:
var elements = rootElement.getElementsByClassName(names);

Consulte la documentación de MDN para más información.

Pienso algo como:

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;
    }
}
}

trabajaría

jQuery maneja esto fácilmente.

let element = $(.myclass);
element.html("Some string");

Cambia todos los elementos .myclass a ese texto.

Cuando algunos elementos carecen de ID, uso jQuery así:

$(document).ready(function()
{
    $('.myclass').attr('id', 'myid');
});

Esta podría ser una solución extraña, pero tal vez alguien lo encuentre útil.