我想替换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 elems = document.querySelectorAll('.one'); for (var i = 0; i < elems.length; i++) { elems[i].innerHTML = 'content'; };

其他回答

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

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

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

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

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。如果找到匹配项,则替换内容。

示例,使用Vanilla JS(即没有框架)

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");

如果您想为旧的浏览器提供支持,您可以加载一个独立的选择器引擎,如Sizzle (4KB mini+gzip)或Peppy (10K mini),如果找不到本机querySelector方法,就返回到它。

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

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

我认为是这样的:

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

会工作