151 votos

¿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:

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 genial, pero el problema es que tengo más de un elemento html en una página que quiero reemplazar el contenido de. Así que no puedo usar los identificadores, pero las clases en su lugar. Me han dicho que javascript no admite ningún tipo de incorporado obtener el elemento de función de clase. Entonces, ¿cómo puede el código de arriba ser revisada para hacerla trabajar con clases en lugar de ids?

P.D. no quiero usar jQuery para esto.

157voto

Andrew Dunn Puntos 7465

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 bucle a través de todos los elementos en el documento y buscando en su lista de clases para matchClass . Si se encuentra una coincidencia, se sustituye el contenido.

jsFiddle ejemplo, usando vainilla JS (es decir sin marco)

99voto

ColdCold Puntos 1249

Por supuesto, ahora soportan todos los navegadores actuales:

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

Pero ten cuidado no funciona con IE8 o antes. Ver http://caniuse.com/getelementsbyclassname

Además, no todos los navegadores devolverá un puro NodeList como se supone.

Probablemente es aún mejor usando su biblioteca favorita de navegadores.

86voto

Cristian Sanchez Puntos 11266
document.querySelectorAll(".class");

Que va a trabajar en "moderno" de los navegadores que implementar ese método.

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 los navegadores más antiguos, que podría cargar un stand-alone selector de motor, como de Chispa (4KB mini+gzip) o llena de vida (10K mini) y en el otoño si los nativos querySelector método no se encuentra.

Es un exceso de carga de un motor de selección de tal forma que pueda obtener los elementos de una determinada clase? Probablemente. Sin embargo, los scripts no son tan grandes y que se puede encontrar el motor de selección útil en muchos otros lugares en la secuencia de comandos.

26voto

kta Puntos 4702

Una forma fácil y Simple

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

6voto

Dagg Nabbit Puntos 23918

Esto debería funcionar en prácticamente 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;
}

Podrás usarlo como este:

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

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X