Как получить элемент по классу в 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, который я хочу заменить содержимым. Поэтому я не могу использовать ids, кроме классов. Мне сказали, что javascript не поддерживает какой-либо встроенный элемент get по классу. Итак, как можно пересмотреть вышеуказанный код, чтобы он работал с классами вместо ids?

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

Ответ 1

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

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 (т.е. нет рамки)

Ответ 2

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

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

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

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

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

Ответ 3

document.querySelectorAll(".class");

Это будет работать в "современных" браузерах, которые реализуют этот метод.

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 не найден.

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

Ответ 4

Простой и простой способ

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

Ответ 5

Я удивлен, что нет ответов с использованием регулярных выражений. Это в значительной степени Andrew answer, используя 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.");

Ответ 6

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

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

Ответ 7

var elems = document.querySelectorAll('.one');

for (var i = 0; i < elems.length; i++) {
    elems[i].innerHTML = 'content';
};

Ответ 8

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

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

Подробнее см. документация MDN.

Ответ 9

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

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

будет работать

Ответ 10

Чтобы уточнить ответ ColcCold выше, это сам код:

function getElementsByClassName(classname, node){
    if (!node) {
        node = document.getElementsByTagName('body')[0];
    }
 
    var a = [], re = new RegExp('\\b' + classname + '\\b');
    els = node.getElementsByTagName('*');
    for (var i = 0, j = els.length; i < j; i++) {
        if (re.test(els[i].className)) {
            a.push(els[i]);
        }
    }
    return a;
}

Ответ 11

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

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

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