Jak uzyskać element według klasy w JavaScript?

Chcę zastąpić zawartość w elemencie HTML, więc używam do tego następującej funkcji:

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

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

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

Powyższe działa świetnie, ale problem polega na tym, że na stronie mam więcej niż jeden element HTML, który chcę zastąpić zawartością. Nie mogę więc używać identyfikatorów zamiast klas. Powiedziano mi, że javascript nie obsługuje żadnego typu wbudowanego elementu get według funkcji klasy. Jak więc zmienić powyższy kod, aby działał z klasami zamiast z identyfikatorami?

PS Nie chcę do tego używać jQuery.

Ten kod powinien działać we wszystkich przeglądarkach.

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

Działa poprzez zapętlanie wszystkich elementów w dokumencie i wyszukiwanie ich listy klas matchClass. Jeśli zostanie znalezione dopasowanie, zawartość zostanie zastąpiona.

Przykład jsFiddle, używając Vanilla JS (tj. bez frameworka)

Oczywiście wszystkie nowoczesne przeglądarki obsługują teraz następującą prostszą metodę:

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

ale ostrzegam, że nie działa z IE8 ani wcześniej. Zobacz http://caniuse.com/getelementsbyclassname

Ponadto, nie wszystkie przeglądarki zwrócą czysty sposób, w NodeListjaki powinny.

Prawdopodobnie nadal lepiej jest korzystać ze swojej ulubionej biblioteki w różnych przeglądarkach.

document.querySelectorAll(".your_class_name_here");

Będzie to działać w „nowoczesnych” przeglądarkach, które implementują tę metodę (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");

Jeśli chcesz zapewnić obsługę starszych przeglądarek, możesz załadować autonomiczny silnik wyboru, taki jak Sizzle (4KB mini + gzip) lub Peppy (10K mini) i wrócić do niego, jeśli nie zostanie znaleziona natywna metoda querySelector.

Czy przesadne jest ładowanie silnika selektora tylko po to, aby uzyskać elementy o określonej klasie? Prawdopodobnie. Jednak skrypty nie są aż tak duże i silnik selektora może okazać się przydatny w wielu innych miejscach skryptu.

Prosty i łatwy sposób

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

Dziwi mnie, że nie ma odpowiedzi przy użyciu wyrażeń regularnych. Jest to w zasadzie odpowiedź Andrew , która używa RegExp.testzamiast String.indexOf, ponieważ wydaje się, że działa lepiej dla wielu operacji, zgodnie z testami jsPerf .
Wydaje się również, że jest obsługiwany w 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.");

Jeśli często poszukujesz tych samych klas, możesz je ulepszyć, przechowując (wstępnie skompilowane) wyrażenia regularne w innym miejscu i przekazując je bezpośrednio do funkcji zamiast ciągu.

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

Powinno to działać w prawie każdej przeglądarce ...

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

Powinieneś być w stanie używać go w następujący sposób:

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

Zakładam, że nie była to prawidłowa opcja, kiedy pierwotnie o to pytano, ale teraz możesz jej użyć document.getElementsByClassName('');. Na przykład:

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

Więcej informacji znajduje się w dokumentacji MDN .

Myślę, że coś takiego:

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

pracowałbym

jQuery radzi sobie z tym łatwo.

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

Zmienia wszystkie elementy .myclass na ten tekst.

Kiedy niektóre elementy nie mają identyfikatora, używam jQuery w następujący sposób:

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

To może być dziwne rozwiązanie, ale może ktoś uzna to za przydatne.