如何在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。

529587 次浏览
小开 
document.querySelectorAll(".your_class_name_here");

这将适用于实现该方法的“现代”浏览器(IE8+)。

function ReplaceContentInContainer(selector, content) {
var nodeList = document.querySelectorAll(selector);
for (var i = 0, length = nodeList.length; i < length; i++) {
nodeList[i].innerHTML = content;
}
}


ReplaceContentInContainer(".theclass", "HELLO WORLD");

如果你想为旧的浏览器提供支持，你可以加载一个独立的选择器引擎，比如嘶嘶声 (4KB mini+gzip)或精神充沛的 (10K mini)，如果找不到本机querySelector方法，就返回到它。

仅仅为了获取带有特定类的元素而加载选择器引擎是否过度?可能。然而，这些脚本并没有那么大，您可能会发现选择器引擎在脚本中的许多其他地方都很有用。

小开

我认为是这样的:

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;
}
}
}

会工作

小开

这应该工作在几乎任何浏览器…

function getByClass (className, parent) {
parent || (parent=document);
var descendants=parent.getElementsByTagName('*'), i=-1, e, result=[];
while (e=descendants[++i]) {
((' '+(e['class']||e.className)+' ').indexOf(' '+className+' ') > -1) && result.push(e);
}
return result;
}

你应该可以这样使用它:

function replaceInClass (className, content) {
var nodes = getByClass(className), i=-1, node;
while (node=nodes[++i]) node.innerHTML = content;
}
小开
最佳答案

这段代码应该可以在所有浏览器中运行。

function replaceContentInContainer(matchClass, content) {
var elems = document.getElementsByTagName('*'), i;
for (i in elems) {
if((' ' + elems[i].className + ' ').indexOf(' ' + matchClass + ' ')
> -1) {
elems[i].innerHTML = content;
}
}
}

它的工作方式是通过循环遍历文档中的所有元素，并在它们的类列表中搜索matchClass。如果找到匹配项，则替换内容。

jsFiddle示例，使用Vanilla JS(即没有框架) . JS

小开

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

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

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

此外，并非所有浏览器都会像它们应该返回的那样返回纯NodeList。

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

小开

简单易行的方法

var cusid_ele = document.getElementsByClassName('custid');
for (var i = 0; i < cusid_ele.length; ++i) {
var item = cusid_ele[i];
item.innerHTML = 'this is value';
}
小开

当一些元素缺少ID时，我像这样使用jQuery:

$(document).ready(function()
{
$('.myclass').attr('id', 'myid');
});

这可能是一个奇怪的解决方案，但也许有人会觉得它有用。

小开
我很惊讶没有使用正则表达式的答案。这几乎是安德鲁的回答，使用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.");
小开

. 
var elems = document.querySelectorAll('.one');


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

小开

我假设这不是一个有效的选项，当这个最初被问到，但你现在可以使用document.getElementsByClassName('');。例如:

var elements = document.getElementsByClassName(names); // or:
var elements = rootElement.getElementsByClassName(names);

更多信息请参见MDN文档。

小开

jQuery很容易处理这个问题。

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

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

小开

在javascript中，有3种不同的方法按类获取元素。但是这里对于你的查询，因为你有多个具有相同类名的元素，你可以使用2个方法:

  1. getElementsByClassName方法 -它返回文档中或调用它的父元素中具有指定类的所有元素。

    function ReplaceContentInContainer(className, content) {
var containers = document.getElementsByClassName(className);
for (let i = 0; i < containers.length; i++) {
containers[i].innerHTML = content;
}
}
ReplaceContentInContainer('box', 'This is the replacement text');


<div class='box'></div>

  2. querySelectorAll方法 -它在CSS选择器的基础上选择元素。用点传递CSS类给它，它将返回所有具有指定类的元素作为类数组对象。

    function ReplaceContentInContainer(className, content) {
var containers = document.querySelectorAll(`.${className}`);
for (let i = 0; i < containers.length; i++) {
containers[i].innerHTML = content;
}
}
ReplaceContentInContainer('box', 'This is the replacement text');


<div class='box'></div>

提交答案