Cómo obtener elementos por clase en JavaScript?

Question

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

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 que me quiere reemplazar el contenido de. Entonces no puedo usar identificadores sino clases. Me han dicho que javascript no admite ningún tipo de elemento get 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?

P.S. No quiero usar jQuery para esto.

Answer 1

T su 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 haciendo un bucle a través de todos los elementos del documento, y buscando su lista de clase para matchClass. Si se encuentra una coincidencia, el contenido se reemplaza.

jsFiddle Example, using Vanilla JS (i.e. no framework)

Answer 2

document.querySelectorAll(".class"); 

Eso funcionará en navegadores "modernos" que implementen 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 navegadores antiguos, se puede cargar un motor de selección independiente como Sizzle (4 KB Mini + gzip) o Peppy (10K mini) y caer de nuevo a él si el método querySelector nativa no se encuentra.

¿Es excesivo cargar un motor selector para que pueda obtener elementos con cierta clase? Probablemente. Sin embargo, las secuencias de comandos no son tan grandes y es posible que encuentre el motor de selección útil en muchos otros lugares en su secuencia de comandos.

Answer 3

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

funcionaría

Answer 4

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

usted debería ser capaz de utilizar de esta manera:

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

Answer 5

Por supuesto, todos los navegadores modernos soportan ahora la siguiente manera simple:

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

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

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

Probablemente sea mejor utilizar su biblioteca de navegador cruzada favorita.

Answer 6

Un simple y una manera 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'; 
} 

Answer 7

Cuando algunos elementos carecen de identificación, utilizo jQuery así:

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

Esta podría ser una solución extraña, pero tal vez alguien que le resulte útil.

Answer 8

Me sorprende que no haya respuestas usando expresiones regulares. Esto es más o menos Andrew's answer, usando RegExp.test en lugar de String.indexOf, ya que parece funcionar mejor para operaciones múltiples, de acuerdo con jsPerf tests.
También es seems to be supported on 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 se mira por la misma clase (s) con frecuencia, puede mejorar aún más por el almacenamiento de los (precompilados) expresiones regulares en otro lugar, y pasarlas 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."); 

Answer 9

var elems = document.querySelectorAll('.one'); 
 

 
for (var i = 0; i < elems.length; i++) { 
 
    elems[i].innerHTML = 'content'; 
 
};

Answer 10

Para más detalles sobre la respuesta de ColcCold anteriormente, este es el código en sí mismo:

function getElementsByClassName(classname, node){ 
 
    if (!node) { 
 
     node = document.getElementsByTagName('body')[0]; 
 
    } 
 
    
 
    var a = [], re = new RegExp('\\b' + classname + '\\b'); 
 
    els = node.getElementsByTagName('*'); 
 
    for (var i = 0, j = els.length; i < j; i++) { 
 
     if (re.test(els[i].className)) { 
 
      a.push(els[i]); 
 
     } 
 
    } 
 
    return a; 
 
}

Puede echar un vistazo a esta populares revisión: http://blog.blackbam.at/2011/07/01/my-todays-top-10-most-useful-javascript-functions/

Answer 11

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

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

Consulte el MDN documentation para más información.