如何在JavaScript中按类获取元素?

我想替换html元素中的内容，所以我使用以下函数:

function ReplaceContentInContainer(id,content) {
   var container = document.getElementById(id);
   container.innerHTML = content;
}

ReplaceContentInContainer('box','This is the replacement text');

<div id='box'></div>

上面的工作很好，但问题是我有一个页面上的html元素，我想替换的内容。所以我不能用id，只能用类。有人告诉我，javascript不支持任何类型的内置get元素的类函数。那么，如何修改上面的代码以使其使用类而不是id呢?

附注:我不想使用jQuery。

当前回答

当然，所有现代浏览器现在都支持以下更简单的方式:

var elements = document.getElementsByClassName('someClass');

但要注意的是，它不支持IE8或之前的版本。参见http://caniuse.com/getelementsbyclassname

另外，并不是所有浏览器都会像它们应该的那样返回一个纯NodeList。

您最好还是使用您最喜欢的跨浏览器库。

2013-03-13 21:20:30

其他回答

jQuery很容易处理这个问题。

let element = $(.myclass);
element.html("Some string");

它将所有.myclass元素更改为该文本。

2020-05-01 12:31:39

我很惊讶没有使用正则表达式的答案。这就是Andrew使用RegExp给出的答案。test而不是String。indexOf，因为根据jsPerf测试，它似乎对多个操作执行得更好。 IE6似乎也支持它。

function replaceContentInContainer(matchClass, content) {
    var re = new RegExp("(?:^|\\s)" + matchClass + "(?!\\S)"),
        elems = document.getElementsByTagName('*'), i;
    for (i in elems) {
        if (re.test(elems[i].className)) {
            elems[i].innerHTML = content;
        }
    }
}

replaceContentInContainer("box", "This is the replacement text.");

如果经常查找相同的类，可以将(预编译的)正则表达式存储在其他地方，并直接将它们传递给函数，而不是字符串，从而进一步改进它。

function replaceContentInContainer(reClass, content) {
    var elems = document.getElementsByTagName('*'), i;
    for (i in elems) {
        if (reClass.test(elems[i].className)) {
            elems[i].innerHTML = content;
        }
    }
}

var reBox = /(?:^|\s)box(?!\S)/;
replaceContentInContainer(reBox, "This is the replacement text.");

2014-09-27 23:24:38

我认为是这样的:

function ReplaceContentInContainer(klass,content) {
var elems = document.getElementsByTagName('*');
for (i in elems){
    if(elems[i].getAttribute('class') == klass || elems[i].getAttribute('className') == klass){
        elems[i].innerHTML = content;
    }
}
}

会工作

2010-09-28 00:21:46

var elems = document.querySelectorAll（'.one'）; for （var i = 0; i < elems.length; i++） { elems[i].innerHTML = 'content'; };

2015-05-12 14:02:05