如何通过类名获取元素答案

【问题标题】：How to get element by class name如何通过类名获取元素
【发布时间】：2012-01-22 05:25:57
【问题描述】：

我想知道是否有办法使用getElementByClassName("classname").innerHTML 函数或与getElementById("ClassName").innerHTML 等效的东西。

【问题讨论】：

这应该对您有所帮助。 javascript.about.com/library/bldom08.htm 但快速提示 -> 为此使用 Jquery。这会容易得多。
How to Get Element By Class in JavaScript? 的可能重复项 - 我假设您正在处理 JavaScript。

【解决方案1】：

你可以使用 jquery 来做到这一点

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

【讨论】：

【解决方案2】：

如果你使用 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。

【讨论】：

这只会给你这个类的第一个元素的 html。实际上可能有很多，因此您可能必须使用each() 或类似的东西来处理它们。
即使在编辑之后仍然不好...检查Blender的答案以了解正确的方法。
它现在应该可以工作了...实际上它并没有比 Blender 的答案添加太多信息，但是谢谢。
在each 回调中，您应该使用$(this).html() 而不是$('.classname').html()。我之前的 cmets 也适用于此处所有其他未使用 each 并直接在 JQuery 选择器上调用方法的答案。
在编辑器之外更正已经编写的代码通常是一条充满危险的道路！再次感谢 ivantod。

【解决方案3】：

我建议你使用 JQuery，在那里你可以直接使用 CSS 选择器（如 .yourclass）来查找给定类的所有元素：

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

如果你不想使用 JQuery，你可以使用纯 Javascript：

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

但要小心 IE8 不兼容问题。作为替代方案（速度较慢，但您可以构建更复杂的 CSS 选择器），您可以使用：

document.querySelector('.cssSelector')

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

document.querySelectorAll('.cssSelector')

这将返回多个元素。

【讨论】：

【解决方案4】：

您的函数名称中缺少s。 getElementsByTagName 返回需要迭代的元素集合：

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

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

IE8 及以下不支持getElementsByClassName，所以你必须找到一个polyfill 或使用querySelectorAll (IE8)。

【讨论】：