วิธีการดึงองค์ประกอบตามคลาสใน 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 มากกว่าหนึ่งรายการในหน้าเว็บที่ฉันต้องการแทนที่เนื้อหา ดังนั้นฉันจึงไม่สามารถใช้ id ได้ แต่ต้องใช้ class แทน ฉันได้รับแจ้งว่า javascript ไม่รองรับฟังก์ชันในตัวใด ๆ สำหรับการดึงองค์ประกอบตาม class ดังนั้นโค้ดด้านบนสามารถแก้ไขอย่างไรเพื่อให้ทำงานกับ class แทน id ได้?

ป.ล. ฉันไม่ต้องการใช้ 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(".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 ขนาดเล็ก+gzip) หรือ Peppy (10K ขนาดเล็ก) และใช้มันสำรองหากไม่พบวิธี querySelector ที่มีอยู่ในตัว

การโหลดเครื่องยนต์ตัวเลือกเพียงเพื่อให้คุณสามารถดึงองค์ประกอบที่มีคลาสบางอย่างนั้นเกินไปหรือไม่? อาจจะใช่ อย่างไรก็ตาม สคริปต์เหล่านั้นไม่ได้ใหญ่ขนาดนั้นและคุณอาจพบว่าเครื่องยนต์ตัวเลือกนั้นมีประโยชน์ในหลายๆ จุดในสคริปต์ของคุณ

คำตอบ #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';
}