Как получить элемент по классу в JavaScript?

Я хочу заменить содержимое элемента html, поэтому для этого я использую следующую функцию:

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

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

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

Вышеописанное прекрасно работает, но проблема в том, что у меня есть несколько HTML-элементов на странице, содержимое которых я хочу заменить. Поэтому я не могу использовать идентификаторы, но вместо этого классы. Мне сказали, что javascript не поддерживает встроенный элемент get любого типа с помощью функции класса. Так как же можно изменить приведенный выше код, чтобы он работал с классами вместо идентификаторов?

PS Я не хочу использовать jQuery для этого.

Этот код должен работать во всех браузерах.

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

Это работает путем циклического перебора всех элементов в документе и поиска их списка классов matchClass. Если совпадение найдено, содержимое заменяется.

Пример jsFiddle с использованием Vanilla JS (т.е. без фреймворка)

Конечно, все современные браузеры теперь поддерживают следующий более простой способ:

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

но имейте в виду, что он не работает с IE8 или раньше. Смотрите http://caniuse.com/getelementsbyclassname

Кроме того, не все браузеры будут возвращать чистоту, NodeListкак они должны.

Вам, вероятно, все еще лучше использовать вашу любимую библиотеку кросс-браузер.

document.querySelectorAll(".your_class_name_here");

Это будет работать в «современных» браузерах, которые реализуют этот метод (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");

Если вы хотите обеспечить поддержку старых браузеров, вы можете загрузить автономный механизм выбора, такой как Sizzle (4KB mini + gzip) или Peppy (10K mini), и использовать его, если не найден собственный метод querySelector.

Не стоит ли загружать селекторный движок, чтобы получить элементы определенного класса? Наверное. Однако сценарии не так уж и велики, и вы можете найти механизм выбора полезным во многих других местах вашего сценария.

Простой и легкий способ

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

Я удивлен, что нет ответов, использующих регулярные выражения. Это в значительной степени ответ Эндрю , использующий RegExp.testвместо String.indexOf, так как, кажется, он работает лучше для нескольких операций, согласно тестам jsPerf .
Это также, кажется, поддерживается на 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.");

Если вы часто ищете один и тот же класс (ы), вы можете улучшить его, сохранив (предварительно скомпилированные) регулярные выражения в другом месте и передав их непосредственно в функцию вместо строки.

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

Это должно работать практически в любом браузере ...

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

Вы должны быть в состоянии использовать это так:

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

Я предполагаю, что это было недопустимым вариантом, когда об этом изначально спрашивали, но теперь вы можете использовать document.getElementsByClassName('');. Например:

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

Смотрите документацию MDN для получения дополнительной информации.

Я думаю что-то вроде:

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

должно сработать

JQuery справляется с этим легко.

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

Он изменяет все элементы .myclass на этот текст.

Когда некоторым элементам не хватает идентификатора, я использую jQuery следующим образом:

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

Это может быть странное решение, но, возможно, кто-то найдет его полезным.