用原生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入门之对象与JSON详解
Oct 21 Javascript
一个JS的日期格式化算法示例
Jul 31 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
Sep 22 Javascript
实现无刷新联动例子汇总
May 20 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 Javascript
AngularJS 表达式详细讲解及实例代码
Jul 26 Javascript
AngularJS表格详解及示例代码
Aug 17 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
Javascript中将变量转换为字符串的三种方法
Sep 19 Javascript
4个顶级开源JavaScript图表库
Sep 29 Javascript
layer扩展打开/关闭动画的方法
Sep 23 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
Nov 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 分页类(模仿google)-面试题目解答
2009/09/13 PHP
探讨fckeditor在Php中的配置详解
2013/06/08 PHP
php数组查找函数in_array()、array_search()、array_key_exists()使用实例
2014/04/29 PHP
php写入数据到CSV文件的方法
2015/03/14 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
兼容IE和FF的js脚本代码小结(比较常用)
2010/12/06 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
2013/01/25 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
2013/08/21 Javascript
Node.js中创建和管理外部进程详解
2014/08/16 Javascript
浅谈javascript的调试
2015/01/28 Javascript
canvas的神奇用法
2017/02/03 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
2017/02/17 Javascript
利用vue.js插入dom节点的方法
2017/03/15 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
2017/07/05 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
2018/03/01 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
使用Vue 自定义文件选择器组件的实例代码
2020/03/04 Javascript
[02:10]DOTA2亚洲邀请赛 EG战队出场宣传片
2015/02/07 DOTA
[00:20]TI9不朽观赛名额抽取
2019/08/05 DOTA
python通过加号运算符操作列表的方法
2015/07/28 Python
深入理解Python中的内置常量
2017/05/20 Python
python xlsxwriter库生成图表的应用示例
2018/03/16 Python
详解python编译器和解释器的区别
2019/06/24 Python
Python3远程监控程序的实现方法
2019/07/15 Python
python+Django实现防止SQL注入的办法
2019/10/31 Python
分享一个页面平滑滚动小技巧(推荐)
2019/10/23 HTML / CSS
斯凯奇美国官网:SKECHERS美国
2016/08/20 全球购物
什么是事务?为什么需要事务?
2012/01/09 面试题
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
村官工作鉴定评语
2014/01/27 职场文书
2014年单位植树节活动方案
2014/03/23 职场文书
广告学专业毕业生自荐信
2014/05/28 职场文书
品质口号大全
2014/06/17 职场文书
怎样评估创业计划书是否有可行性?
2019/08/07 职场文书
使用jpa之动态插入与修改(重写save)
2021/11/23 Java/Android
Python写情书? 10行代码展示如何把情书写在她的照片里
2022/04/21 Python