Làm cách nào để lấy phần tử theo lớp trong JavaScript?

Tôi muốn thay thế nội dung trong một phần tử html vì vậy tôi đang sử dụng hàm sau cho điều đó:

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

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

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

Ở trên hoạt động rất tốt nhưng vấn đề là tôi có nhiều hơn một phần tử html trên một trang mà tôi muốn thay thế nội dung. Vì vậy, tôi không thể sử dụng id nhưng các lớp thay thế. Tôi đã được thông báo rằng javascript không hỗ trợ bất kỳ loại phần tử có sẵn nào theo chức năng lớp. Vậy làm thế nào để mã trên có thể được sửa đổi để làm cho nó hoạt động với các lớp thay vì id?

PS Tôi không muốn sử dụng jQuery cho việc này.

Mã này sẽ hoạt động trong tất cả các trình duyệt.

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

Cách thức hoạt động của nó là bằng cách lặp qua tất cả các yếu tố trong tài liệu và tìm kiếm danh sách lớp của chúng matchClass. Nếu một trận đấu được tìm thấy, nội dung được thay thế.

Ví dụ jsFiddle, sử dụng Vanilla JS (nghĩa là không có khung)

Tất nhiên, tất cả các trình duyệt hiện đại hiện nay đều hỗ trợ cách đơn giản sau:

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

nhưng được cảnh báo rằng nó không hoạt động với IE8 hoặc trước đó. Xem http://caniuse.com/getelementsbyclassname

Ngoài ra, không phải tất cả các trình duyệt sẽ trả về một thuần NodeList như chúng được yêu cầu.

Có lẽ bạn vẫn nên sử dụng thư viện trình duyệt chéo yêu thích của mình.

document.querySelectorAll(".your_class_name_here");

Điều đó sẽ hoạt động trong các trình duyệt "hiện đại" thực hiện phương pháp đó (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");

Nếu bạn muốn cung cấp hỗ trợ cho các trình duyệt cũ hơn, bạn có thể tải một công cụ chọn độc lập như Sizzle (4KB mini + gzip) hoặc Peppy (10K mini) và quay lại với nó nếu không tìm thấy phương thức truy vấn gốc.

Có phải là quá mức để tải một công cụ chọn chỉ để bạn có thể nhận được các phần tử với một lớp nhất định? Có lẽ. Tuy nhiên, các tập lệnh không quá lớn và bạn có thể thấy công cụ chọn hữu ích ở nhiều nơi khác trong tập lệnh của mình.

Một cách đơn giản và dễ dàng

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

Tôi ngạc nhiên không có câu trả lời bằng cách sử dụng Biểu thức chính quy. Đây là câu trả lời của Andrew khá nhiều , sử dụng RegExp.testthay vì String.indexOf, vì nó dường như hoạt động tốt hơn cho nhiều hoạt động, theo các thử nghiệm của jsPerf .
Nó dường như cũng được hỗ trợ trên 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.");

Nếu bạn tìm kiếm cùng một lớp thường xuyên, bạn có thể cải thiện nó bằng cách lưu trữ các biểu thức chính quy (được biên dịch trước) ở nơi khác và chuyển chúng trực tiếp đến hàm, thay vì một chuỗi.

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

Điều này sẽ hoạt động trong hầu hết các trình duyệt ...

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

Bạn sẽ có thể sử dụng nó như thế này:

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

Tôi cho rằng đây không phải là một lựa chọn hợp lệ khi điều này ban đầu được hỏi, nhưng bây giờ bạn có thể sử dụng document.getElementsByClassName('');. Ví dụ:

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

Xem tài liệu MDN để biết thêm.

Tôi nghĩ một cái gì đó như:

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

sẽ làm việc

jQuery xử lý việc này dễ dàng.

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

Nó thay đổi tất cả các phần tử .myclass thành văn bản đó.

Khi một số thành phần thiếu ID, tôi sử dụng jQuery như thế này:

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

Đây có thể là một giải pháp lạ, nhưng có lẽ ai đó thấy nó hữu ích.