用原生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 相关文章推荐
当前页禁止复制粘贴截屏代码小集
Jul 24 Javascript
js中parseInt函数浅谈
Jul 31 Javascript
jquery的map与get方法详解
Nov 04 Javascript
jquery超简单实现手风琴效果的方法
Jun 05 Javascript
JavaScript数据结构与算法之链表
Jan 29 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
简单谈谈vue的过渡动画(推荐)
Oct 11 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
Dec 27 Javascript
简单理解Vue中的nextTick方法
Jan 30 Javascript
layui的table单击行勾选checkbox功能方法
Aug 14 Javascript
Vue学习之常用指令实例详解
Jan 06 Javascript
JavaScript实现简易聊天对话框(加滚动条)
Feb 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 MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
PHP stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
PHP四舍五入精确小数位及取整
2014/01/14 PHP
PHP中使用php5-ffmpeg撷取视频图片实例
2015/01/07 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
JavaScript类和继承 constructor属性
2010/03/04 Javascript
关于jQuery中的end()使用方法
2011/07/10 Javascript
JavaScript中的eval()函数详解
2013/08/22 Javascript
javascript中caller和callee详解
2015/08/10 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
2015/11/20 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
2016/02/22 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
Vue $emit $refs子父组件间方法的调用实例
2018/09/12 Javascript
原生JavaScript创建不可变对象的方法简单示例
2020/05/07 Javascript
Vue 组件复用多次自定义参数操作
2020/07/27 Javascript
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
Python中set与frozenset方法和区别详解
2016/05/23 Python
python之django母板页面的使用
2018/07/03 Python
浅谈python3.6的tkinter运行问题
2019/02/22 Python
python的sys.path模块路径添加方式
2020/03/09 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
Python提取视频中图片的示例(按帧、按秒)
2020/10/22 Python
字中字效果的实现【html5实例】
2016/05/03 HTML / CSS
浅谈移动端网页图片预加载方案
2018/11/05 HTML / CSS
Java程序开发中如何应用线程
2016/03/03 面试题
客房主管岗位职责
2013/12/09 职场文书
博士学位自我鉴定范文
2013/12/26 职场文书
护理目标管理责任书
2014/07/25 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
毕业生党员个人总结
2015/02/14 职场文书
小学数学教学反思范文
2016/02/16 职场文书
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android
使用Mysql计算地址的经纬度距离和实时位置信息
2022/04/29 MySQL