按类而不是 Id 获取元素答案

【问题标题】：Get Element by Class instead of Id按类而不是 Id 获取元素
【发布时间】：2011-08-07 03:17:18
【问题描述】：

我有一个名为 WatchMode 的按钮。

当您单击此按钮时，它将关闭由 div ID 指定的某些 div。

这个的javascript如下：

function watchmode() { 
document.getElementById('aps30').innerHTML = " ";
}

现在，我想对在我的页面上出现两次的 div 做同样的事情，这个 div 有一个 Class 而不是一个 ID。

我尝试将此行添加到 javascript，但它似乎不起作用

document.getElementByClassName('floater').innerHTML = " ";

有什么建议吗？？

【问题讨论】：

你真的应该考虑使用jQuery。
我们试试document.getElementsByClassName('floater')[0].innerHTML = " ";。

标签： javascript css class html

【解决方案1】：

你必须改变一些事情：

修复 getElementsByClassName 中的拼写错误
将该函数调用的返回结果视为一个数组
循环遍历返回数组的内容以对结果进行操作
了解并非所有旧浏览器（IE9 之前的任何 IE 版本）都支持此功能，因此如果您想针对旧浏览器，您可能必须检查它的存在并使用替代实现（如果它本身不可用）。您可以查看浏览器支持 here 并在 Justin 的回答中的链接中查看替代实现。

代码如下：

var divs = document.getElementsByClassName('floater');
for (var i = 0; i < divs.length; i++) {
    divs[i].innerHTML = " ";
}

这是 jQuery 真正有用的地方。在 jQuery 中，它只是：

$(".floater").html(" ");

这将自动找到该类的所有对象，并将所有匹配对象的 innerHTML 设置为您的字符串。

【讨论】：

谢谢！我使用的是wordpress，所以默认情况下已经调用了jquery。第二个代码工作得很好:)

【解决方案2】：

首先，我不确定这是否是一个错字，但你输入：

document.get**Element**ByClassName('floater').innerHTML = " ";

命令其实是：

document.get**Elements**ByClassName();

注意元素是复数形式。

现在，这与 getElementById 的行为不同。它返回一个节点列表，或者换句话说，一个包含指定类的所有元素的列表。

您可以将结果存储在一个数组中，如下所示：

var array_name = document.getElementsByClassName('floater');

然后循环遍历结果以执行您的操作：

for ( var i=0, var len=array_name.length; i<len; ++i ){
    array_name[i].innerHtml = 'text';
}

我这里写的代码我没有测试过，但是方法已经试过了。

[编辑] 我忘了说 IE 不支持这个功能，你可以使用 jQuery 通过执行以下操作来完成此功能： $('floater').html('text');它是跨浏览器的。您还可以在 Web 上搜索模拟 getElementsByClassName 的行为并适用于所有浏览器的内容。

这里有一篇模拟getElementsByClassName功能更好的文章：

http://www.webmuse.co.uk/blog/custom-getelementsbyclassname-function-for-all-browsers/

document.getElementsByClassName = function( classname ) {
    var elArray = [];
    var tmp = document.getElementsByTagName("*");
    var regex = new RegExp("(^|\s)" + classname + "(\s|$)");
    for ( var i = 0; i &lt; tmp.length; i++ ) {

        if ( regex.test(tmp[i].className) ) {
            elArray.push(tmp[i]);
        }
    }

    return elArray;
;

这很好用，跨浏览器兼容，使用方式与 getElementsByClassName 相同。

文章中的用法示例： var el = document.getElementsByClassName("para");

    for ( var i = 0; i &lt; el.length; i++ ) {
        el[i].style.color = "red";
    }

【讨论】：

【解决方案3】：

最简单的方法是使用 jQuery。这是一个应该回答您的问题的帖子：

How to getElementByClass instead of GetElementById with Javascript?

【讨论】：

【解决方案4】：

你的函数名有拼写错误——应该是getElementsByClassName（注意复数，elements，不是element）：

document.getElementsByClassName('floater').innerHTML = " ";

【讨论】：

这也不行，因为 getElementsByClassName 返回的是元素列表，而不是单个元素。