Comment obtenir un élément par classe en JavaScript?

Je veux remplacer le contenu dans un élément html donc j'utilise la fonction suivante pour cela:

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

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

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

Ce qui précède fonctionne très bien mais le problème est que j'ai plus d'un élément html sur une page dont je veux remplacer le contenu. Je ne peux donc pas utiliser des identifiants mais des classes à la place. On m'a dit que javascript ne prend en charge aucun type d'élément get intégré par fonction de classe. Alors, comment le code ci-dessus peut-il être révisé pour qu'il fonctionne avec des classes plutôt qu'avec des identifiants?

PS Je ne veux pas utiliser jQuery pour cela.

Ce code devrait fonctionner dans tous les navigateurs.

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 façon dont cela fonctionne consiste à parcourir tous les éléments du document et à rechercher leur liste de classes matchClass. Si une correspondance est trouvée, le contenu est remplacé.

Exemple jsFiddle, utilisant Vanilla JS (c'est-à-dire sans framework)

Bien sûr, tous les navigateurs modernes prennent désormais en charge la manière la plus simple suivante:

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

mais sachez que cela ne fonctionne pas avec IE8 ou avant. Voir http://caniuse.com/getelementsbyclassname

De plus, tous les navigateurs ne renverront pas un contenu pur NodeListcomme ils sont censés le faire.

Vous êtes probablement encore mieux en utilisant votre bibliothèque cross-browser préférée.

document.querySelectorAll(".your_class_name_here");

Cela fonctionnera dans les navigateurs "modernes" qui implémentent cette méthode (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 vous souhaitez prendre en charge les anciens navigateurs, vous pouvez charger un moteur de sélection autonome comme Sizzle (4KB mini + gzip) ou Peppy (10K mini) et y revenir si la méthode native querySelector n'est pas trouvée.

Est-ce exagéré de charger un moteur de sélection juste pour que vous puissiez obtenir des éléments avec une certaine classe? Probablement. Cependant, les scripts ne sont pas si gros et vous pouvez trouver le moteur de sélection utile à de nombreux autres endroits de votre script.

Un moyen simple et 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';
}

Je suis surpris qu'il n'y ait pas de réponses en utilisant des expressions régulières. C'est à peu près la réponse d'Andrew , en utilisant RegExp.testau lieu de String.indexOf, car il semble mieux fonctionner pour plusieurs opérations, selon les tests jsPerf .
Il semble également être pris en charge sur 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 vous recherchez fréquemment la ou les mêmes classes, vous pouvez encore l'améliorer en stockant les expressions régulières (précompilées) ailleurs et en les transmettant directement à la fonction, au lieu d'une chaîne.

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

Cela devrait fonctionner dans à peu près n'importe quel navigateur ...

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

Vous devriez pouvoir l'utiliser comme ceci:

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

Je suppose que ce n'était pas une option valide lorsque cela a été demandé à l'origine, mais vous pouvez maintenant l'utiliser document.getElementsByClassName('');. Par exemple:

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

Consultez la documentation MDN pour en savoir plus.

Je pense que quelque chose comme:

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

travaillerait

jQuery gère cela facilement.

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

Il modifie tous les éléments .myclass en ce texte.

Lorsque certains éléments manquent d'ID, j'utilise jQuery comme ceci:

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

Cela peut être une solution étrange, mais peut-être que quelqu'un la trouve utile.