Як отримати елемент за класом у 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');
});

Це може бути дивним рішенням, але, можливо, хтось вважає це корисним.