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


Posted in Javascript onOctober 15, 2014

听说是最常用。。。。我是看了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还需要做一些比较复杂的处理
Javascript 相关文章推荐
javascript客户端解决方案 缓存提供程序
Jul 14 Javascript
jquery选择器的选择使用及性能介绍
Jan 16 Javascript
页面实时更新时间的JS实例代码
Dec 18 Javascript
js获取当前日期前七天的方法
Feb 28 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
Jun 05 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
Aug 25 Javascript
jQuery特殊符号转义的实现
Nov 30 Javascript
解析Vue2 dist 目录下各个文件的区别
Nov 22 Javascript
简单介绍react redux的中间件的使用
Apr 06 Javascript
webpack项目轻松混用css module的方法
Jun 12 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
Oct 09 Javascript
JavaScript基于数组实现的栈与队列操作示例
Dec 22 Javascript
通过JS动态创建一个html DOM元素并显示
Oct 15 #Javascript
javascript模拟实现ajax加载框实例
Oct 15 #Javascript
jquery幻灯片插件bxslider样式改进实例
Oct 15 #Javascript
微信分享的标题、缩略图、连接及描述设置方法
Oct 14 #Javascript
js实现select组件的选择输入过滤代码
Oct 14 #Javascript
javascript记录文本框内文字个数检测文字个数变化
Oct 14 #Javascript
返回顶部按钮响应滚动且动态显示与隐藏
Oct 14 #Javascript
You might like
mysql4.1以上版本连接时出现Client does not support authentication protocol问题解决办法
2007/03/15 PHP
php中的实现trim函数代码
2007/03/19 PHP
CodeIgniter php mvc框架 中国网站
2008/05/26 PHP
PHP下常用正则表达式整理
2010/10/26 PHP
PHP内核探索:变量概述
2014/01/30 PHP
PHP使用Pear发送邮件(Windows环境)
2016/01/05 PHP
Yii针对添加行的增删改查操作示例
2016/10/18 PHP
PHP中Notice错误常见解决方法
2017/04/28 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
2009/05/25 Javascript
在JS数组特定索引处指定位置插入元素的技巧
2014/08/24 Javascript
详解JavaScript中循环控制语句的用法
2015/06/03 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
2016/03/05 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
强大的JavaScript响应式图表Chartist.js的使用
2017/09/13 Javascript
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
JavaScript闭包相关知识解析
2019/10/19 Javascript
ES6中Set和Map用法实例详解
2020/03/02 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局
2016/03/03 DOTA
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
Python tkinter模块中类继承的三种方式分析
2017/08/08 Python
学习Python3 Dlib19.7进行人脸面部识别
2018/01/24 Python
python入门:这篇文章带你直接学会python
2018/09/14 Python
python常用运维脚本实例小结
2020/02/14 Python
python3发送request请求及查看返回结果实例
2020/04/30 Python
基于Python脚本实现邮件报警功能
2020/05/20 Python
实习护理工作自我评价
2013/09/25 职场文书
本科生的职业生涯规划范文
2014/01/09 职场文书
先进工作者获奖感言
2014/02/08 职场文书
2014乡镇党政班子四风问题思想汇报
2014/09/14 职场文书
小学生表扬稿范文
2015/05/05 职场文书
八一建军节主持词
2015/07/01 职场文书
餐厅营销的秘密:为什么老顾客会流水?
2019/08/08 职场文书
2019年汽车租赁合同范本!
2019/08/12 职场文书