用原生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 相关文章推荐
Jvascript学习实践案例(开发常用)
Jun 25 Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 Javascript
在HTML中插入JavaScript代码的示例
Jun 03 Javascript
学习javascript面向对象 理解javascript原型和原型链
Jan 04 Javascript
JavaScript的Backbone.js框架入门学习指引
May 07 Javascript
js仿支付宝多方框输入支付密码效果
Sep 27 Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 Javascript
详解Javascript 中的 class、构造函数、工厂函数
Dec 20 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
Jun 28 Javascript
axios使用拦截器统一处理所有的http请求的方法
Nov 02 Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
JS实现简单日历特效
Jan 03 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上传文件,创建递归目录的实例代码
2013/10/18 PHP
php图片的二进制转换实现方法
2014/12/15 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
用js计算页面执行时间的函数
2006/12/07 Javascript
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
2010/07/04 Javascript
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
js调用webservice中的方法实现思路及代码
2013/02/25 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
2013/09/21 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
jQuery处理xml格式的返回数据(实例解析)
2013/11/28 Javascript
javascript跨域的4种方法和原理详解
2014/04/08 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
浅谈jquery拼接字符串效率比较高的方法
2017/02/22 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
Vue js 的生命周期(看了就懂)(推荐)
2019/03/29 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
2019/07/21 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
[02:12]DOTA2英雄基础教程 变体精灵
2013/12/16 DOTA
Python中顺序表的实现简单代码分享
2018/01/09 Python
Python3.7 dataclass使用指南小结
2019/02/22 Python
python获取地震信息 微信实时推送
2019/06/18 Python
html5版canvas自由拼图实例
2014/10/15 HTML / CSS
中国跨境在线时尚零售商:Bellelily
2018/04/06 全球购物
工厂仓管员岗位职责
2014/01/01 职场文书
《玩具柜台前的孩子》教学反思
2014/02/13 职场文书
批评与自我批评材料
2014/02/15 职场文书
党员干部2014全国两会学习心得体会
2014/03/10 职场文书
销售人员求职的自我评价分享
2014/03/15 职场文书
大学生社会实践活动总结
2014/07/03 职场文书
小学运动会加油稿
2015/07/22 职场文书
创业计划书之寿司
2019/07/19 职场文书
k-means & DBSCAN 总结
2021/04/27 Python
Python中文纠错的简单实现
2021/07/07 Python