如何通过JavaScript中的类获取HTML元素?
我试图通过getElementsByClass()
操纵HTML,但由于某些原因它不起作用。当我使用document.getElementByID()
它的作品?为什么是这样?如何通过JavaScript中的类获取HTML元素?
<div class='boldStuff'> <p>Welcome to the site. </p> </div>
<script type="text/javascript">
document.getElementsByClass('boldStuff').innerHTML = 'Fred Flinstone';
</script>
尝试:
document.getElementsByClassName('boldStuff')[0]
'getElementsByClassName方法()'是没有得到普遍支持。 –
@Michael还有什么可以让班级得到普遍支持的吗? – user172071
这是真的,你必须做一些错误检查或只使用jQuery。 – Godwin
正确的方法来调用是getElementsByClassName()
,它会给你元素的数组。
document.getElementsByClassName('boldStuff')
无论如何,这与旧版IE不兼容。检查兼容性here。
我很确定这只适用于Firefox,不是吗?自从我使用它以来已经有一段时间了 - 现在所有浏览器都支持此功能吗? –
它不能在IE 8以上工作,只是因为IE9似乎工作。 –
它甚至不支持在IE8中,虽然它在IE 9中工作。 –
getElementsByClassName
返回一个NodeList。你将不得不使用
document.getElementsByClassName('boldStuff')[0].innerHTML
指的docs在MDN
它返回一个数组所以设置阵列的innerHTML的第一个元素
document.getElementsByClassName('boldStuff')[0].innerHTML = 'Fred Flinstone';
这里是一个得到广泛支持的解决方案:
function getElementsByClassName(root, clss) {
var result = [], els, i;
if(arguments.length < 2 || !root || !clss || root.nodeType !== 1) {
return result;
}
clss = clss + '';
if(root.getElementsByClassName) {
result = root.getElementsByClassName(clss);
} else if(root.querySelectorAll) {
result = root.querySelectorAll('.' + clss);
} else {
els = root.getElementsByTagName('*');
clss = " " + clss + " ";
for(i = 0; i < els.length; ++i) {
if((" " + els[ i ].className + " ").indexOf(clss) !== -1) {
result.push(els[ i ]);
}
}
}
return result;
}
然后使用它是这样的:
var bold = getElementsByClassName(document, "boldStuff");
for(var i = 0; i < bold.length; ++i) {
bold[ i ].innerHTML = 'Fred Flinstone';
}
的好处是,它使用了本地方法尽可能。
它首先尝试
getElementsByClassName
,因为它通常是最快的。然后它尝试
querySelectorAll
,这将带来支持IE8
。最后,它会对提供的根目录下的所有元素进行手动过滤。
非常好的代码片段。但是,[文档的节点类型是9.](http://www.w3schools.com/jsref/prop_node_nodetype.asp#nodetypes)您可以删除条件'root.nodeType!== 1'。 – KitKat
只是一个旁白:这是 “打火石”,而不是 “Flinstone” ... – nnnnnn