我想替换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。


当前回答

我假设这不是一个有效的选项时,这是最初的要求,但您现在可以使用document.getElementsByClassName(");。例如:

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

有关更多信息,请参阅MDN文档。

其他回答

简单易行的方法

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

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

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(即没有框架)

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

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

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

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

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

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

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

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

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

getElementsByClassName Method - It returns all the elements with the specified class present in the document or within the parent element which called it. 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> querySelectorAll Method - It select element on the basic of CSS selectors. Pass your CSS class to it with a dot and it will return all the element having specified class as an array-like object. 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>