我想替换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。
我很惊讶没有使用正则表达式的答案。这就是Andrew使用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.");
我很惊讶没有使用正则表达式的答案。这就是Andrew使用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.");
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方法,就返回到它。
仅仅为了获取带有特定类的元素而加载选择器引擎是否过度?可能。然而,这些脚本并没有那么大,您可能会发现选择器引擎在脚本中的许多其他地方都很有用。