用原生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中unicode转码方法详解
Oct 09 Javascript
JS实现简单易用的手机端浮动窗口显示效果
Sep 07 Javascript
AngularJs每天学习之总体介绍
Aug 07 Javascript
JS判断数组那点事
Oct 10 Javascript
解决vue项目报错webpackJsonp is not defined问题
Mar 14 Javascript
vue移动端弹框组件的实例
Sep 25 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
Nov 27 Javascript
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
微信小程序实现炫酷的弹出式菜单特效
Jan 28 Javascript
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
JavaScript多种滤镜算法实现代码实例
Dec 10 Javascript
关于对TypeScript泛型参数的默认值理解
Jul 15 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模板的朋友必看的很多个顶级PHP模板引擎比较分析
2008/05/26 PHP
非常好的js代码
2006/06/27 Javascript
用 JavaScript 迁移目录
2006/12/18 Javascript
让你的博客飘雪花超出屏幕依然看得见
2013/01/04 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
2013/01/21 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
2014/07/17 Javascript
node.js中的fs.truncate方法使用说明
2014/12/15 Javascript
js定时器实例分享
2016/12/20 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
2017/01/21 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
seajs实现强制刷新本地缓存的方法分析
2017/10/16 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
js合并两个数组生成合并后的key:value数组
2018/05/09 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
2018/06/19 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
基于JavaScript实现每日签到打卡轨迹功能
2018/11/29 Javascript
基于Three.js实现360度全景图片
2018/12/30 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
2020/04/22 Javascript
[06:01]刀塔次级联赛top10第一期
2014/11/07 DOTA
Python实现模拟登录及表单提交的方法
2015/07/25 Python
python中os模块详解
2016/10/14 Python
python实现ID3决策树算法
2018/08/29 Python
python 使用while写猜年龄小游戏过程解析
2019/10/07 Python
基于pytorch的lstm参数使用详解
2020/01/14 Python
Python类如何定义私有变量
2020/02/03 Python
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
荷兰超市:DEEN
2018/03/14 全球购物
迪拜领先运动补剂零售品牌中文站:Sporter商城
2019/08/20 全球购物
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
失业者真诚求职信范文
2013/12/25 职场文书
精神文明单位申报材料
2014/05/02 职场文书
幼儿园教师演讲稿
2014/05/06 职场文书
党的群众路线对照检查材料
2014/08/27 职场文书