如何通过类名获取元素

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')

Which 将返回响应 CSS 选择器的一个元素，或者

document.querySelectorAll('.cssSelector')

Which 将返回多个元素。

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 的便捷方法。