Wie bekomme ich Element nach Klasse in JavaScript?

Ich möchte den Inhalt in einem HTML-Element ersetzen, also verwende ich dafür die folgende Funktion:

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

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

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

Das obige funktioniert großartig, aber das Problem ist, dass ich mehr als ein HTML-Element auf einer Seite habe, deren Inhalt ich ersetzen möchte. Ich kann also keine IDs, sondern Klassen verwenden. Mir wurde gesagt, dass Javascript keine Art von eingebautem Get-Element nach Klassenfunktion unterstützt. Wie kann also der obige Code überarbeitet werden, damit er mit Klassen statt mit IDs funktioniert?

PS Ich möchte jQuery dafür nicht verwenden.

Dieser Code sollte in allen Browsern funktionieren.

function replaceContentInContainer(matchClass, content) {
    var elems = document.getElementsByTagName('*'), i;
    for (i in elems) {
        if((' ' + elems[i].className + ' ').indexOf(' ' + matchClass + ' ')
                > -1) {
            elems[i].innerHTML = content;
        }
    }
}

Die Funktionsweise besteht darin, alle Elemente im Dokument zu durchlaufen und deren Klassenliste zu durchsuchen matchClass. Wenn eine Übereinstimmung gefunden wird, wird der Inhalt ersetzt.

jsFiddle-Beispiel mit Vanilla JS (dh kein Framework)

Natürlich unterstützen alle modernen Browser jetzt den folgenden einfacheren Weg:

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

aber seien Sie gewarnt, es funktioniert nicht mit IE8 oder früher. Sehen http://caniuse.com/getelementsbyclassname

Außerdem werden nicht alle Browser ein pure zurückgeben NodeList wie sie sollen.

Sie sind wahrscheinlich immer noch besser dran, wenn Sie Ihre bevorzugte Cross-Browser-Bibliothek verwenden.

document.querySelectorAll(".your_class_name_here");

Das funktioniert in “modernen” Browsern, die diese Methode implementieren (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");

Wenn Sie Unterstützung für ältere Browser bereitstellen möchten, können Sie eine eigenständige Auswahl-Engine wie laden Brutzeln (4KB mini+gzip) oder Schwungvoll (10K mini) und greifen darauf zurück, wenn die native querySelector-Methode nicht gefunden wird.

Ist es übertrieben, eine Selektor-Engine zu laden, nur um Elemente mit einer bestimmten Klasse zu erhalten? Wahrscheinlich. Die Skripte sind jedoch nicht allzu groß, und Sie werden die Selektor-Engine möglicherweise an vielen anderen Stellen in Ihrem Skript nützlich finden.

Ein einfacher und einfacher Weg

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

Ich bin überrascht, dass es keine Antworten mit regulären Ausdrücken gibt. Das ist so ziemlich Andrews Antwort, using RegExp.test anstatt String.indexOfda es laut scheint, für mehrere Operationen besser zu funktionieren jsPerf-Tests.
Es auch scheint auf IE6 unterstützt zu werden.

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

Wenn Sie häufig nach denselben Klassen suchen, können Sie sie weiter verbessern, indem Sie die (vorkompilierten) regulären Ausdrücke an anderer Stelle speichern und sie anstelle eines Strings direkt an die Funktion übergeben.

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

Das sollte in so ziemlich jedem Browser funktionieren…

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

Sie sollten es wie folgt verwenden können:

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