用原生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 相关文章推荐
jQuery toggleClass应用实例(附效果图)
Apr 06 Javascript
node.js实现BigPipe详解
Dec 05 Javascript
JavaScript必知必会(七)js对象继承
Jun 08 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 Javascript
Vue实现路由跳转和嵌套
Jun 20 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
Aug 25 Javascript
JS简单实现动态添加HTML标记的方法示例
Apr 08 Javascript
微信小程序中遇到的iOS兼容性问题小结
Nov 14 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
May 07 Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
May 24 Javascript
vue+高德地图实现地图搜索及点击定位操作
Sep 09 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如何得到当前页和上一页的地址?
2006/11/27 PHP
实例分析10个PHP常见安全问题
2019/07/09 PHP
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
2013/01/23 Javascript
js 获取元素在页面上的偏移量的方法汇总
2015/04/13 Javascript
每天一篇javascript学习小结(Boolean对象)
2015/11/12 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
2016/11/03 Javascript
js实现点击每个li节点,都弹出其文本值及修改
2016/12/15 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
老生常谈javascript的面向对象思想
2017/08/22 Javascript
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
2017/10/20 Javascript
在Vue组件中使用 TypeScript的方法
2018/02/28 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
2019/04/09 Javascript
vue分页器组件编写方法详解
2019/06/28 Javascript
理解JavaScript中的对象
2020/08/25 Javascript
python list转dict示例分享
2014/01/28 Python
python绘图库Matplotlib的安装
2014/07/03 Python
Python中处理时间的几种方法小结
2015/04/09 Python
Python可变参数函数用法实例
2015/07/07 Python
python实现简单淘宝秒杀功能
2018/05/03 Python
Python之dict(或对象)与json之间的互相转化实例
2018/06/05 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
解决pycharm启动后总是不停的updating indices...indexing的问题
2019/11/27 Python
Python如何使用函数做字典的值
2019/11/30 Python
Anaconda+vscode+pytorch环境搭建过程详解
2020/05/25 Python
解析Tensorflow之MNIST的使用
2020/06/30 Python
python实现网页录音效果
2020/10/26 Python
诺心蛋糕官网:LE CAKE
2018/08/25 全球购物
Halston Heritage官网:简洁的日装,稍显奢华的晚装
2018/11/20 全球购物
数控个人求职信范文
2014/02/03 职场文书
预备党员承诺书
2014/03/25 职场文书
六一儿童节标语
2014/10/08 职场文书
项目经理岗位职责范本
2015/04/01 职场文书
物流仓管员岗位职责
2015/04/01 职场文书
nginx之queue的具体使用
2022/06/28 Servers