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

Question

Je veux remplacer le contenu dans un élément html, donc je suis en utilisant la fonction suivante:

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

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

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

Le ci-dessus fonctionne très bien mais le problème c'est que j'ai plus d'un élément html sur une page que je veux remplacer le contenu de. Je ne peux donc pas utiliser des id mais les classes à la place. J'ai dit que le javascript ne prend pas en charge tout type de intégré obtenir de l'élément de fonction de classe. Alors, comment pouvez-le code ci-dessus être revu pour travailler avec des classes à la place de l'id?

P. S. je ne veux pas utiliser jQuery pour cela.

Answer 1

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 est en faisant une boucle sur tous les éléments du document, et en recherchant leur liste de classe pour matchClass . Si une correspondance est trouvée, le contenu est remplacé.

Exemple jsFiddle, en utilisant Vanilla JS (ie pas de framework)

Answer 2

Bien sûr, tous les navigateurs actuels supportent maintenant:

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

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

De plus, tous les navigateurs ne renvoient pas un NodeList pur comme ils sont supposés le faire.

Vous êtes probablement encore mieux d'utiliser votre bibliothèque cross-browser préférée.

Answer 3

document.querySelectorAll(".class");

Qui va travailler en "moderne" des navigateurs qui implémentent cette méthode.

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 fournir un soutien pour les anciens navigateurs, vous pouvez charger un stand-alone sélecteur de moteur comme le Grésillement (4KB mini+gzip) ou Nerveux (10K mini) et de revenir à elle si le natif de querySelector méthode n'est pas trouvée.

Est-il exagéré pour charger un sélecteur de moteur, de sorte que vous pouvez obtenir les éléments avec une certaine classe? Probablement. Cependant, les scripts ne sont pas tout que de grands et vous pouvez trouver le sélecteur moteur utile dans de nombreux autres endroits dans votre script.

Answer 4

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

Answer 5

Cela devrait fonctionner dans pratiquement tous les navigateurs ...

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