用原生JS获取CLASS对象(很简单实用)
更新时间：2014年10月15日 17:08:32 投稿：whsnow
这篇文章主要介绍了如何用原生JS获取CLASS对象，看过dom编程艺术的朋友或许会知道的
听说是最常用。。。。我是看了dom编程艺术想到的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.ca{background-color:red; padding:20px;}
.js{ border:1px solid #00F; padding:10px;}
</style>
</head>
<body>
<div class="ca">
sss
</div>
<div class="js" id="as">
</div>
<div class="bd">
</div>
<div class="ca">
</div>
</body>
</html>
<script>
function getElementsClass(classnames){
var classobj= new Array();//定义数组
var classint=0;//定义数组的下标
var tags=document.getElementsByTagName("*");//获取HTML的所有标签
for(var i in tags){//对标签进行遍历
if(tags[i].nodeType==1){//判断节点类型
if(tags[i].getAttribute("class") == classnames)//判断和需要CLASS名字相同的，并组成一个数组
{
classobj[classint]=tags[i];
classint++;
}
}
}
return classobj;//返回组成的数组
}
//以下就是测试了
var a=getElementsClass("ca");
a[0].onclick=function(){alert("我们来了");}
a[1].innerHTML='我们来了';
</script>
有时候会有多个dom的class相同，可以这样处理：
复制代码 代码如下:
var a=getElementsClass("ca")；
for(var i=0;i<a.length;i++){
(function(i){
alert(a[i])
})(i)
}
如果有多个相同的class也可以一起用了，如果是想达到JQ哪里可以直接.click还需要做一些比较复杂的处理
相关文章
这篇文章主要为大家详细介绍了layui表格数据重载，根据条件查询，监听按钮事件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
动态生成的IFRAME，设置SRC时的，不同位置带来的影响。 以下所说的是在IE7下运行的。IE6下也是同样。 在这个blog中，直接点击运行代码，和把下面代码保存到为网页在运行（以本地文件或域名访问），效果不一样。 先看例子：2008-04-04
这篇文章主要给大家介绍了关于js异步接口并发数量控制的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
这篇文章主要为大家详细介绍了Bootstrap学习笔记之css样式设计，感兴趣的小伙伴们可以参考一下2016-06-06
本文通过实例代码给大家介绍了js异步上传图片文件的方法，包括html和jquery代码，需要的的朋友参考下吧2017-07-07
Javascript在IE或Firefox下获取鼠标位置的代码
由于Firefox和IE等浏览器之间对JS解释的方式不一样，Firefox下面获取鼠标位置不能够直接使用clientX来获取。网上说的一般都是触发mousemove事件才行。我这里有两段代码，思路都一样，就是风格不同。2009-12-12
对于不同类型的需要重复计算的问题，循环和递归两种方法各有所长，能给出更直观简单的方案，下面为大家详细的介绍下JavaScript的递归与循环，感兴趣的朋友可以了解下2013-08-08
alixixi runcode.asp的代码不错的应用...2007-08-08
这篇文章主要为大家介绍了JavaScript中高级语法??表达式用法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
JS中confirm,alert,prompt函数使用区别有哪些呢？2011-01-01
最新评论