提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

用原生JS获取CLASS对象(很简单实用)

JS对象 简单 获取 实用 原生 Class
2023-06-13 09:15:29 时间

听说是最常用。。。。我是看了dom编程艺术想到的。

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

<title>无标题文档</title>

<style>

.ca{background-color:red;padding:20px;}

.js{border:1pxsolid#00F;padding:10px;}

</style>

</head>


<body>

<divclass="ca">

sss

</div>

<divclass="js"id="as">

</div>

<divclass="bd">

</div>

<divclass="ca">

</div>

</body>

</html>

<script>

functiongetElementsClass(classnames){
varclassobj=newArray();//定义数组

varclassint=0;//定义数组的下标

vartags=document.getElementsByTagName("*");//获取HTML的所有标签

for(variintags){//对标签进行遍历

if(tags[i].nodeType==1){//判断节点类型

if(tags[i].getAttribute("class")==classnames)//判断和需要CLASS名字相同的，并组成一个数组

{

classobj[classint]=tags[i];

classint++;

}

}

}

returnclassobj;//返回组成的数组

}


//以下就是测试了

vara=getElementsClass("ca");

a[0].onclick=function(){alert("我们来了");}

a[1].innerHTML="我们来了";

</script>

有时候会有多个dom的class相同，可以这样处理：

复制代码代码如下:


vara=getElementsClass("ca")；
for(vari=0;i<a.length;i++){
(function(i){
alert(a[i])
})(i)
}

如果有多个相同的class也可以一起用了，如果是想达到JQ哪里可以直接.click还需要做一些比较复杂的处理

相关文章