用原生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 相关文章推荐
简单的JS多重继承示例
Mar 13 Javascript
回车直接实现点击某按钮的效果即触发单击事件
Feb 27 Javascript
Node.js中使用socket创建私聊和公聊聊天室
Nov 19 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
Dec 25 Javascript
简单实现Bootstrap标签页
Aug 09 Javascript
Vue 短信验证码组件开发详解
Feb 14 Javascript
vue组件间通信子与父详解(二)
Nov 07 Javascript
在Vue项目中使用d3.js的实例代码
May 01 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
Sep 14 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
Nov 10 Javascript
微信小程序如何获取用户收货地址
Nov 27 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
May 16 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
十天学会php之第五天
2006/10/09 PHP
PHP zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
jQuery 入门级学习笔记及源码
2010/01/22 Javascript
jQuery 数据缓存模块进化史详细介绍
2012/11/19 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
2014/08/22 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
2014/09/23 Javascript
jQuery实现设置、移除文本框默认值功能
2015/01/13 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
老生常谈js动态添加事件--- 事件委托
2016/07/19 Javascript
javascript实现滚动效果的数字时钟实例
2016/07/21 Javascript
深入理解Node module模块
2018/03/26 Javascript
VueCli3构建TS项目的方法步骤
2018/11/07 Javascript
使用koa2创建web项目的方法步骤
2019/03/12 Javascript
读懂CommonJS的模块加载
2019/04/19 Javascript
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
JavaScript直接调用函数与call调用的区别实例分析
2020/05/22 Javascript
Python3.2模拟实现webqq登录
2016/02/15 Python
Python中用psycopg2模块操作PostgreSQL方法
2017/11/28 Python
详解Python使用tensorflow入门指南
2018/02/09 Python
python2.7安装图文教程
2018/03/13 Python
python下解压缩zip文件并删除文件的实例
2018/04/24 Python
pandas 小数位数 精度的处理方法
2018/06/09 Python
Django之Mode的外键自关联和引用未定义的Model方法
2018/12/15 Python
Python 实现文件打包、上传与校验的方法
2019/02/13 Python
Python 函数返回值的示例代码
2019/03/11 Python
Python 仅获取响应头, 不获取实体的实例
2019/08/21 Python
python装饰器实现对异常代码出现进行自动监控的实现方法
2020/09/15 Python
2分钟教你实现环形/扇形菜单(基础版)
2020/01/15 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
锐步美国官方网站:Reebok美国
2018/01/10 全球购物
机关驾驶员违规检讨书
2014/09/13 职场文书
党支部党的群众路线对照检查材料
2014/09/24 职场文书
旷课检讨书范文
2014/10/30 职场文书
MySQL InnoDB ReplicaSet(副本集)简单介绍
2021/04/24 MySQL
一次Mysql update sql不当引起的生产故障记录
2022/04/01 MySQL