如何在JavaScript中用getElementByClass代替GetElementById？
我正在尝试切换网站上某些DIV元素的可见性，这取决于每个DIV的类别。我正在使用一个基本的JavaScript代码片段来切换它们。问题是该脚本只使用getElementById，因为JavaScript不支持getElementByClass。不幸的是，我必须使用class而不是id来命名DIV，因为DIV名称是由我的XSLT样式表使用某些类别名称动态生成的。
我知道某些浏览器现在支持getElementByClass，但由于Internet Explorer不支持，所以我不想走这条路。
我发现了使用函数按类获取元素的脚本(例如此页面上的#8：http://www.dustindiaz.com/top-ten-javascript/)，但我不知道如何将它们与我的切换脚本集成在一起。
这是HTML代码。DIVs本身缺失，因为它们是在使用XML/XSLT加载页面时生成的。
主要问题:如何让下面的切换脚本按类获取元素，而不是按ID获取元素？
<html>
<head>
<!--This is the TOGGLE script-->
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
</head>
<!--the XML/XSLT page contents will be loaded here, with DIVs named by Class separating dozens of li's-->
<a href="#" onclick="toggle_visibility('class1');">Click here to toggle visibility of class 1 objects</a>
<a href="#" onclick="toggle_visibility('class2');">Click here to toggle visibility of class 2 objects</a>
</body>
</html>回答 6
Stack Overflow用户
发布于 2009-12-20 01:40:47
现代浏览器支持document.getElementsByClassName。您可以在caniuse上查看提供此功能的供应商的完整分类。如果您希望将支持扩展到较旧的浏览器，则可能需要考虑使用类似于jQuery或polyfill中的选择器引擎。
较旧的答案
您将希望签入jQuery，这将允许以下操作：
$(".classname").hide(); // hides everything with class 'classname'谷歌提供了一个托管的jQuery源文件，所以你可以引用它，并在片刻内启动和运行。在您的页面中包含以下内容：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".classname").hide();
});
</script>Stack Overflow用户
发布于 2009-12-20 01:45:02
getElementsByClassName方法现在被最新版本的火狐、Safari、Chrome、IE和Opera原生支持，你可以创建一个函数来检查本机实现是否可用，否则使用Dustin Diaz方法：
function getElementsByClassName(node,classname) {
if (node.getElementsByClassName) { // use native implementation if available
return node.getElementsByClassName(classname);
} else {
return (function getElementsByClass(searchClass,node) {
if ( node == null )
node = document;
var classElements = [],
els = node.getElementsByTagName("*"),
elsLen = els.length,
pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"), i, j;
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
})(classname, node);
}
}用法：
function toggle_visibility(className) {
var elements = getElementsByClassName(document, className),
n = elements.length;
for (var i = 0; i < n; i++) {
var e = elements[i];
if(e.style.display == 'block') {
e.style.display = 'none';
} else {
e.style.display = 'block';
}
}
}Stack Overflow用户
发布于 2017-11-23 16:33:36
document.getElementsByClassName('CLASSNAME')[0].style.display = 'none';实际上，通过使用getElementsByClassName，它返回一个包含多个类的数组。因为同一个HTML页面中的多个实例可以使用相同的类名。我们使用数组元素id来定位我们需要的类，在我的例子中，它是我使用的给定类name.So的第一个实例
https://stackoverflow.com/questions/1933602
复制相似问题