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

Question

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

PS我不想为此使用jQuery.

Answer 1

此代码应适用于所有浏览器.

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

Answer 2

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

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

但要注意它不适用于IE8或之前.请参阅http://caniuse.com/getelementsbyclassname

此外,并非所有浏览器都会NodeList像他们应该的那样返回纯粹的.

你最好还是使用自己喜欢的跨浏览器库.

Answer 3

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方法,则可以回退到它.

加载选择器引擎是否过度,以便获得具有某个类的元素？大概.但是,脚本并不是那么大,您可能会发现选择器引擎在脚本中的许多其他位置都很有用.

Answer 4

一个简单而简单的方法

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

Answer 5

我很惊讶使用正则表达式没有答案.根据jsPerf测试,这几乎是安德鲁的答案,RegExp.test而不是使用String.indexOf,因为它似乎对多个操作表现更好. 它似乎也得到了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.");