Cách lấy phần tử theo tên lớp

Question

Tôi muốn biết liệu có cách nào để getElementByClassName("classname").innerHTML chức năng hoặc cái gì đó tương đương với getElementById("ClassName").innerHTML hay không.

Answer 1

Bạn đang thiếu s trong tên hàm của mình. getElementsByTagName trả về một tập hợp các yếu tố, các yếu tố, mà bạn cần để lặp qua:

var elements = document.getElementsByClassName("classname"); 

for (var i = 0; i < elements.length; i++) { 
    elements[i].innerHTML = 'foo'; 
} 

IE8 và dưới đây không hỗ trợ getElementsByClassName, vì vậy bạn sẽ phải tìm một polyfill hoặc sử dụng querySelectorAll (IE8).

Answer 2

Bạn có thể làm điều này bằng jquery

$('.className').html(); 

http://api.jquery.com/html/

Answer 3

Nếu tou sử dụng jQuery bạn có thể lấy nó như bạn làm trong một selector CSS vậy:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> 

sau đó ...

$('.classname').each(function() { 
    // get html 
    $(this).html(); 
    // set html 
    $(this).html('something'); 
}); 

Lưu ý rằng bạn cũng có cách thuận tiện để quản lý innerHTML.

Answer 4

tôi đề nghị bạn sử dụng JQuery, nơi bạn có thể sử dụng trực tiếp CSS selectors (như .yourclass) để tìm tất cả các yếu tố của một tầng lớp nhất định:

$('.yourclass').doWhatYouWant(); 

Nếu bạn không muốn sử dụng JQuery, bạn có thể sử dụng plain Javascript:

document.getElementsByClassName('my-fancy-class') 

Nhưng hãy cẩn thận với vấn đề không tương thích IE8. Là một thay thế (chậm hơn nhưng bạn có thể xây dựng bộ chọn CSS phức tạp hơn), bạn có thể sử dụng:

document.querySelector('.cssSelector') 

nào sẽ trở lại một yếu tố ứng phó với selector CSS của bạn, hoặc

document.querySelectorAll('.cssSelector') 

nào sẽ trở lại nhiều yếu tố thay thế.