用原生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中奇葩的假值示例应用
Mar 11 Javascript
纯javascript实现四方向文本无缝滚动效果
Jun 16 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
Aug 03 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
Nov 27 Javascript
JS数组合并push与concat区别分析
Dec 17 Javascript
基于javascript bootstrap实现生日日期联动选择
Apr 07 Javascript
javascript实现抽奖程序的简单实例
Jun 07 Javascript
深入理解jquery中的each用法
Dec 14 Javascript
写jQuery插件时的注意点
Feb 20 Javascript
浅谈Angular2 模块懒加载的方法
Oct 04 Javascript
vue.js $refs和$emit 父子组件交互的方法
Dec 20 Javascript
angular6的响应式表单的实现
Oct 10 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 pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
thinkphp中的多表关联查询的实例详解
2017/10/12 PHP
PHP如何使用array_unshift()在数组开头插入元素
2020/09/01 PHP
详解phpstorm2020最新破解方法
2020/09/17 PHP
Jquery实现无刷新DropDownList联动实现代码
2010/03/08 Javascript
js 有框架页面跳转(target)三种情况下的应用
2013/04/09 Javascript
JS数组的遍历方式for循环与for...in
2014/07/31 Javascript
js生成随机数的过程解析
2015/11/24 Javascript
Highcharts使用简例及异步动态读取数据
2015/12/30 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
2016/06/06 Javascript
原生js实现手风琴功能(支持横纵向调用)
2017/01/13 Javascript
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
详解JavaScript函数callee、call、apply的区别
2019/03/08 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
2020/06/11 Javascript
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
Vue使用鼠标在Canvas上绘制矩形
2020/12/24 Vue.js
Python计算程序运行时间的方法
2014/12/13 Python
python递归打印某个目录的内容(实例讲解)
2017/08/30 Python
解析Python 偏函数用法全方位实现
2020/06/26 Python
python中添加模块导入路径的方法
2021/02/03 Python
玩转CSS3色彩
2010/01/16 HTML / CSS
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
英国在线药房:Chemist.co.uk
2019/03/26 全球购物
销售经理工作职责范文
2013/12/03 职场文书
贪污检举信范文
2015/03/02 职场文书
大学生青年志愿者活动总结
2015/05/06 职场文书
走近毛泽东观后感
2015/06/04 职场文书
银行求职信怎么写
2019/06/20 职场文书
2019大学生预备党员转正思想汇报
2019/06/21 职场文书
2019年警察入党转正申请书最新范文
2019/09/03 职场文书
HTML+JS实现在线朗读器
2022/02/15 Javascript