如何按类名获取元素

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，因此您必须找到填充或使用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。