Wie bekomme ich ein Element nach Klasse in JavaScript?

Ich möchte den Inhalt innerhalb eines HTML-Elements ersetzen, daher 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 gut, aber das Problem ist, dass ich mehr als ein HTML-Element auf einer Seite habe, dessen Inhalt ich ersetzen möchte. Ich kann also keine IDs verwenden, sondern Klassen. Mir wurde gesagt, dass Javascript keine Art von eingebautem get-Element nach Klassenfunktion unterstützt. Wie kann der obige Code überarbeitet werden, damit er mit Klassen anstelle von 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 in der Klassenliste nach zu suchen matchClass. Wird eine Übereinstimmung gefunden, wird der Inhalt ersetzt.

jsFiddle Beispiel mit Vanilla JS (dh kein Framework)

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

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

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

Außerdem geben nicht alle Browser ein reines Ergebnis zurück, NodeListwie sie es sollen.

Sie sind wahrscheinlich immer noch besser dran, wenn Sie Ihre bevorzugte browserübergreifende 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 ältere Browser unterstützen möchten, können Sie eine eigenständige Selector-Engine wie Sizzle (4 KB mini + gzip) oder Peppy (10 KB mini) laden und darauf zurückgreifen, wenn die native querySelector-Methode nicht gefunden wird.

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

Ein einfacher und ein 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 mit regulären Ausdrücken keine Antworten gibt. Dies ist so ziemlich Andrews Antwort , RegExp.testanstatt String.indexOf, da es laut jsPerf-Tests für mehrere Operationen besser zu funktionieren scheint .
Es scheint auch 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 anstelle einer Zeichenfolge 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.");

Dies 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 folgendermaßen verwenden können:

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

Ich gehe davon aus, dass dies keine gültige Option war, als dies ursprünglich gefragt wurde, aber Sie können sie jetzt verwenden document.getElementsByClassName('');. Beispielsweise:

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

Weitere Informationen finden Sie in der MDN-Dokumentation .

Ich denke so etwas wie:

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

würde funktionieren

jQuery erledigt dies einfach.

let element = $(.myclass);
element.html("Some string");

Es ändert alle .myclass-Elemente in diesen Text.

Wenn einigen Elementen die ID fehlt, verwende ich jQuery wie folgt:

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

Dies mag eine seltsame Lösung sein, aber vielleicht findet es jemand nützlich.