如何在JavaScript中通过类获取元素？
我想要replacehtml元素中的内容，所以我使用下面的函数：
function ReplaceContentInContainer(id,content) { var container = document.getElementById(id); container.innerHTML = content; } ReplaceContentInContainer('box','This is the replacement text'); <div id='box'></div> 上面的工作很好，但问题是我有一个以上的网页上的HTML元素，我想要replace的内容。 所以我不能使用IDS，而是使用类。 我已经被告知JavaScript不支持任何types的embedded式获取元素的类函数。 那么如何修改上面的代码，使其能够使用类而不是id呢？
PS我不想用这个jQuery。
这段代码应该可以在所有浏览器中使用。
function replaceContentInContainer(matchClass, content) { var elems = document.getElementsByTagName('*'), i; for (i in elems) { if((' ' + elems[i].className + ' ').indexOf(' ' + matchClass + ' ') > -1) { elems[i].innerHTML = content; } } }
它的工作方式是循环遍历文档中的所有元素，并在class列表中searchmatchClass 。 如果find匹配项，则内容被replace。
jsFiddle例子，使用Vanilla JS（即没有框架）
当然，现在所有的浏览器都支持以下简单的方法：
var elements = document.getElementsByClassName('someClass');
但被警告它不能用IE8或之前的工作。 请参阅http://caniuse.com/getelementsbyclassname
另外，并不是所有的浏览器都会返回一个纯粹的NodeList 。
使用您最喜欢的跨浏览器库，您可能仍然更好。
document.querySelectorAll(".class");
这将在实现该方法的“现代”浏览器中起作用。
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）这样的独立select器引擎，如果没有find本机的querySelector方法，则可以使用它。
加载一个select器引擎是否矫枉过正，以便您可以获得某个类的元素？ 大概。 然而，脚本并不是那么大，你可能会发现你的脚本中许多其他地方的select器引擎很有用。
一个简单而简单的方法
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'; }
我很惊讶没有使用正则expression式的答案。 这几乎是安德鲁的答案 ，使用RegExp.test而不是String.indexOf ，因为它似乎更好地执行多个操作，根据jsPerftesting 。
它似乎也支持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.");
如果经常查找同一个类，可以通过在其他地方存储（预编译的）正则expression式，并直接将它们传递给函数而不是string来进一步改进。
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.");
这应该在几乎任何浏览器中工作…
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; }
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文档 。
我觉得像这样：
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; } } }
会工作
为了详细阐述ColcCold上面的答案，这是代码本身：
function getElementsByClassName(classname, node){ if (!node) { node = document.getElementsByTagName('body')[0]; } var a = [], re = new RegExp('\\b' + classname + '\\b'); els = node.getElementsByTagName('*'); for (var i = 0, j = els.length; i < j; i++) { if (re.test(els[i].className)) { a.push(els[i]); } } return a; }
当某些元素缺乏ID时，我使用如下的jQuery：
$(document).ready(function() { $('.myclass').attr('id', 'myid'); });
这可能是一个奇怪的解决scheme，但也许有人觉得它有用。
