本文介绍如何在 JavaScript 中获取具有特定 class 名的元素。通过封装兼容函数，处理浏览器原生支持差异，并结合实际场景演示如何遍历元素、获取内容或绑定事件。代码涵盖基础封装、列表内容提取及移动端点击传值等应用，提供完整实现思路。
JavaScript 获取 class 元素概述
JavaScript 原生环境中并没有直接提供名为“获取 class”的单一方法，开发者通常需要自行封装相关工具函数。本文整理了几种常见的封装方案，供参考使用。
首先需要对获取元素的功能进行基础封装，以便在项目中复用。
封装兼容获取函数
//封装getClass
function getClass(tagName,className) //获得标签名为tagName,类名className的元素
{
if(document.getElementsByClassName) //支持这个函数
{ return document.getElementsByClassName(className);
}
else
{ var tags=document.getElementsByTagName(tagName);//获取标签
var tagArr=[];//用于返回类名为className的元素
for(var i=0;i < tags.length; i++)
{
if(tags[i].class == className)
{
tagArr[tagArr.length] = tags[i];//保存满足条件的元素
}
}
return tagArr;
}
} 接下来展示封装函数的核心逻辑代码。
获取列表元素内容示例
<ul>
<li class="dicTap">1</li>
<li class="dicTap">2</li>
<li class="dicTap">3</li>
<li class="dicTap">4</li>
</ul> 随后演示如何调用该封装函数，获取 class 名为 dicTap 的所有 li 元素的具体内容。
window.onload = function()
{ var topMenus = getClass('li','dicTap');
for(var i=0;i < topMenus.length; i++)
{
alert(topMenus[i].innerHTML);
}
}最后结合项目实际场景，展示该功能在真实业务中的应用方式。
实际应用与事件绑定
//点击的 自定义属性personid，打开详情页面并且进行跨页面传值
var dicTap = getClass('li','dicTap');
for(var i=0;i <dicTap.length; i++)
{
dicTap[i].addEventListener('tap',function(){
var personId=this.getAttribute("personid");
localStorage.a=personId;
mui.openWindow({
url: 'disciplineDetail.html',
id:'disciplineDetail'
});
})
}
//封装getClass
function getClass(tagName,className) //获得标签名为tagName,类名className的元素
{
if(document.getElementsByClassName) //支持这个函数
{ return document.getElementsByClassName(className);
}
else
{ var tags=document.getElementsByTagName(tagName);//获取标签
var tagArr=[];//用于返回类名为className的元素
for(var i=0;i < tags.length; i++)
{
if(tags[i].class == className)
{
tagArr[tagArr.length] = tags[i];//保存满足条件的元素
}
}
return tagArr;
}
}以上即为 JavaScript 中获取 class 元素的简单实现方法，希望对读者有所帮助，欢迎支持本站更多内容。