用原生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之解决IE下不渲染的bug
Jun 29 Javascript
js无刷新操作table的行和列
Mar 27 Javascript
详解JavaScript基于面向对象之继承实例
Dec 16 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
Jan 22 Javascript
一览画面点击复选框后获取多个id值的方法
May 30 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
Aug 03 Javascript
基于js实现二级下拉联动
Dec 17 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
js 只比较时间大小的实例
Oct 26 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
Nov 30 Javascript
实现elementUI表单的全局验证的方法步骤
Apr 29 Javascript
Vue自定义表单内容检查rules实例
Oct 30 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
《心理测量者3》剧场版动画预告
2020/03/02 日漫
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
juqery 学习之四 筛选查找
2010/11/30 Javascript
json对象转字符串如何实现
2012/12/02 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
js函数参数设置默认值的一种变通实现方法
2014/05/26 Javascript
JavaScript控制按钮可用或不可用的方法
2015/04/03 Javascript
基于jquery编写分页插件
2016/03/07 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
详解基于webpack和vue.js搭建开发环境
2017/04/05 Javascript
使用vue制作FullPage页面滚动效果
2017/08/21 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
jQuery实现基本动画效果的方法详解
2018/09/06 jQuery
HTML+JavaScript实现扫雷小游戏
2019/09/30 Javascript
jquery实现广告上下滚动效果
2021/03/04 jQuery
[01:53]DOTA2超级联赛专访Zhou 五年职业青春成长
2013/05/29 DOTA
Python使用PDFMiner解析PDF代码实例
2017/03/27 Python
Python实现的科学计算器功能示例
2017/08/04 Python
matplotlib设置legend图例代码示例
2017/12/19 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
python购物车程序简单代码
2018/04/18 Python
python读取目录下所有的jpg文件,并显示第一张图片的示例
2019/06/13 Python
对PyQt5基本窗口控件 QMainWindow的使用详解
2019/06/19 Python
python 函数中的内置函数及用法详解
2019/07/02 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
Python logging模块handlers用法详解
2020/08/14 Python
PHP中如何创建和修改数组
2012/05/02 面试题
常用UNIX 命令(Linux的常用命令)
2013/07/10 面试题
安全标准化汇报材料
2014/02/03 职场文书
创意广告词
2014/03/17 职场文书
担保书范文
2015/01/20 职场文书
环保宣传语大全
2015/07/13 职场文书
Python使用海龟绘图实现贪吃蛇游戏
2021/06/18 Python
MySQL 外键约束和表关系相关总结
2021/06/20 MySQL