Come ottenere elementi per class in JavaScript?

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

function ReplaceContentInContainer(id,content) { var container = document.getElementById(id); container.innerHTML = content; } ReplaceContentInContainer('box','This is the replacement text'); 

Quanto sopra funziona alla grande ma il problema è che ho più di un elemento html su una pagina che voglio sostituire il contenuto di. Quindi non posso usare id ma classi invece. Mi è stato detto che javascript non supporta alcun tipo di elemento get incorporato per funzione di class. Quindi, come è ansible rivedere il codice precedente 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 è il looping di tutti gli elementi nel documento e la ricerca nel loro elenco di classi per matchClass . Se viene trovata una corrispondenza, il contenuto viene sostituito.

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

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

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

ma sii avvisato che non funziona con IE8 o prima. Vedi http://caniuse.com/getelementsbyclassname

Inoltre, non tutti i browser restituiranno un NodeList puro come dovrebbero.

Probabilmente stai ancora meglio usando la tua libreria cross-browser preferita.

 document.querySelectorAll(".class"); 

Funzionerà in browser “moderni” che implementano tale metodo.

 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 i browser più vecchi, è ansible caricare un motore di selezione autonomo come Sizzle (4KB mini + gzip) o Peppy (10K mini) e ricorrere a esso se il metodo nativo querySelector non viene trovato.

È eccessivo caricare un motore di selezione solo così puoi ottenere elementi con una certa class? Probabilmente. Tuttavia, gli script non sono così grandi e si potrebbe 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 , utilizzando RegExp.test invece di String.indexOf , poiché sembra funzionare meglio per più operazioni, in base ai test di 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 si cercano frequentemente le stesse classi, è ansible migliorarle ulteriormente memorizzando altrove le espressioni regolari (precompilate) 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 in quasi tutti i 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; } 
 var elems = document.querySelectorAll('.one'); for (var i = 0; i < elems.length; i++) { elems[i].innerHTML = 'content'; }; 

Presumo che questa non era un’opzione valida quando è stato inizialmente chiesto, ma ora puoi usare document.getElementsByClassName(''); . Per esempio:

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

Vedere la documentazione MDN per ulteriori informazioni.

Penso qualcosa come:

 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

Quando alcuni elementi non hanno ID, io uso jQuery in questo modo:

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

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