如何通過類名獲取元素

Question

我想知道是否有辦法getElementByClassName("classname").innerHTML函數或等效於getElementById("ClassName").innerHTML 。

Answer 1

您的函數名稱中缺少s 。 getElementsByTagName返回元素的集合，您需要對其進行迭代：

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

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

IE8 及以下不支持getElementsByClassName ，因此您必須找到 polyfill 或使用querySelectorAll (IE8)。

Answer 2

我建議您使用 JQuery，您可以在其中直接使用 CSS 選擇器（如 .yourclass）來查找給定類的所有元素：

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

如果你不想使用 JQuery，你可以使用普通的 Javascript：

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

但要小心 IE8 不兼容問題。 作為替代方案（較慢但您可以構建更復雜的 CSS 選擇器），您可以使用：

document.querySelector('.cssSelector')

這將返回一個響應您的 CSS 選擇器的元素，或者

document.querySelectorAll('.cssSelector')

這將返回多個元素。

Answer 3

您可以使用 jquery 執行此操作

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

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

Answer 4

如果你使用 jQuery，你可以像在 CSS 選擇器中一樣得到它，所以：

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

然后...

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

請注意，您還可以方便地管理innerHTML。