Bagaimana Cara Mendapatkan Elemen Menurut Kelas dalam JavaScript?

Saya ingin mengganti konten di dalam elemen html jadi saya menggunakan fungsi berikut untuk itu:

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

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

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

Di atas berfungsi dengan baik tetapi masalahnya adalah saya memiliki lebih dari satu elemen html pada halaman yang ingin saya ganti konten. Jadi saya tidak bisa menggunakan id tetapi kelas. Saya telah diberitahu bahwa javascript tidak mendukung semua jenis elemen inbuilt get oleh fungsi kelas. Jadi bagaimana kode di atas dapat direvisi agar berfungsi dengan kelas, bukan id?

PS Saya tidak ingin menggunakan jQuery untuk ini.

Kode ini harus bekerja di semua browser.

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

Cara kerjanya adalah dengan mengulang-ulang semua elemen dalam dokumen, dan mencari daftar kelas mereka matchClass. Jika kecocokan ditemukan, isinya diganti.

Contoh jsFiddle, menggunakan Vanilla JS (yaitu tidak ada kerangka kerja)

Tentu saja, semua browser modern sekarang mendukung cara yang lebih sederhana berikut:

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

tetapi berhati-hatilah itu tidak bekerja dengan IE8 atau sebelumnya. Lihat http://caniuse.com/getelementsbyclassname

Juga, tidak semua browser akan mengembalikan yang murni NodeList seperti seharusnya.

Anda mungkin masih lebih baik menggunakan perpustakaan lintas-browser favorit Anda.

document.querySelectorAll(".your_class_name_here");

Itu akan bekerja di browser "modern" yang menerapkan metode itu (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");

Jika Anda ingin memberikan dukungan untuk browser lama, Anda dapat memuat mesin pemilih yang berdiri sendiri seperti Sizzle (mini 4KB + gzip) atau Peppy (mini 10K) dan kembali ke sana jika metode kueri pemilih asli tidak ditemukan.

Apakah terlalu berat memuat mesin pemilih supaya Anda bisa mendapatkan elemen dengan kelas tertentu? Mungkin. Namun, skrip tidak terlalu besar dan Anda akan menemukan mesin pemilih berguna di banyak tempat lain di skrip Anda.

Cara sederhana dan mudah

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

Saya terkejut tidak ada jawaban menggunakan Ekspresi Reguler. Ini cukup banyak jawaban Andrew , menggunakan RegExp.testbukan String.indexOf, karena tampaknya berkinerja lebih baik untuk beberapa operasi, menurut tes jsPerf .
Tampaknya juga didukung pada 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.");

Jika Anda sering mencari kelas yang sama, Anda dapat lebih meningkatkannya dengan menyimpan ekspresi reguler (dikompilasi) di tempat lain, dan meneruskannya langsung ke fungsi, alih-alih string.

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

Ini harus berfungsi di hampir semua browser ...

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

Anda harus dapat menggunakannya seperti ini:

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

Saya menganggap ini bukan opsi yang valid ketika ini awalnya diminta, tetapi Anda sekarang dapat menggunakan document.getElementsByClassName('');. Sebagai contoh:

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

Lihat dokumentasi MDN untuk lebih lanjut.

Saya pikir sesuatu seperti:

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

akan bekerja

jQuery menangani ini dengan mudah.

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

Ini mengubah semua elemen .myclass ke teks itu.

Ketika beberapa elemen kekurangan ID, saya menggunakan jQuery seperti ini:

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

Ini mungkin solusi yang aneh, tetapi mungkin seseorang merasa berguna.