Come ottenere elementi per classe in JavaScript?

Voglio sostituire il contenuto all'interno di un elemento html, quindi sto usando la seguente funzione per quello:

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

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

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

Quanto sopra funziona alla grande, ma il problema è che ho più di un elemento html in una pagina di cui voglio sostituire il contenuto. Quindi non posso usare ID ma classi invece. Mi è stato detto che javascript non supporta alcun tipo di elemento get incorporato per funzione di classe. Quindi, come può essere rivisto il codice sopra per farlo funzionare con le classi anziché con gli ID?

PS Non voglio usare jQuery per questo.

Questo codice dovrebbe funzionare in tutti i browser.

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

Il modo in cui funziona è scorrere ciclicamente tutti gli elementi nel documento e cercare l'elenco delle classi matchClass. Se viene trovata una corrispondenza, il contenuto viene sostituito.

Esempio jsFiddle, usando Vanilla JS (cioè nessun framework)

Ovviamente, tutti i browser moderni ora supportano il seguente modo più semplice:

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

ma attenzione, non funziona con IE8 o prima. Vedi http://caniuse.com/getelementsbyclassname

Inoltre, non tutti i browser restituiranno un valore puro NodeListcome dovrebbero.

Probabilmente stai ancora meglio usando la tua libreria preferita tra browser.

document.querySelectorAll(".your_class_name_here");

Funzionerà con i browser "moderni" che implementano quel metodo (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");

Se si desidera fornire supporto per browser meno recenti, è possibile caricare un motore di selezione autonomo come Sizzle (4KB mini + gzip) o Peppy (10K mini) e ricorrere ad esso se non viene trovato il metodo querySelector nativo.

È eccessivo caricare un motore di selezione in modo da poter ottenere elementi con una determinata classe? Probabilmente. Tuttavia, gli script non sono poi così grandi e potresti trovare il motore di selezione utile in molti altri punti del tuo script.

Un modo semplice e facile

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

Sono sorpreso che non ci siano risposte usando le espressioni regolari. Questa è praticamente la risposta di Andrew , usando RegExp.testinvece di String.indexOf, dal momento che sembra funzionare meglio per più operazioni, secondo i test jsPerf .
Sembra anche essere supportato su 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.");

Se cerchi frequentemente le stesse classi, puoi migliorarla ulteriormente memorizzando le espressioni regolari (precompilate) altrove e passandole direttamente alla funzione, anziché una stringa.

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

Questo dovrebbe funzionare praticamente in qualsiasi 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+' ') > -1) && result.push(e);
  }
  return result;
}

Dovresti essere in grado di usarlo in questo modo:

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

Presumo che questa non fosse un'opzione valida quando questo è stato originariamente richiesto, ma ora è possibile utilizzare document.getElementsByClassName('');. Per esempio:

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

Vedere la documentazione MDN per ulteriori informazioni.

Penso a qualcosa del tipo:

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

funzionerebbe

jQuery gestisce questo facile.

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

Cambia tutti gli elementi .myclass in quel testo.

Quando alcuni elementi mancano di ID, utilizzo jQuery in questo modo:

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

Questa potrebbe essere una strana soluzione, ma forse qualcuno lo trova utile.