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

ป.ล. ฉันไม่ต้องการใช้ 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 แบบดั้งเดิม

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

วิธีที่ง่ายและสะดวก

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

หากคุณค้นหาคลาสเดียวกัน (s) บ่อยครั้งคุณสามารถปรับปรุงได้โดยการเก็บนิพจน์ปกติ (precompiled) ที่อื่นและส่งผ่านไปยังฟังก์ชันโดยตรงแทนที่จะเป็นสตริง

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 เป็นข้อความนั้น

เมื่อองค์ประกอบบางอย่างขาด ID ฉันใช้ jQuery เช่นนี้

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

นี่อาจเป็นทางออกที่แปลก แต่บางคนอาจพบว่ามีประโยชน์