用原生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 相关文章推荐
window.open被浏览器拦截后的自定义提示效果代码
Nov 19 Javascript
jQuery 技巧大全(新手入门篇)
May 12 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
Aug 18 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
May 31 Javascript
JavaScript ES5标准中新增的Array方法
Jun 28 Javascript
Bootstrap栅格系统的使用和理解2
Dec 14 Javascript
Vue.js实现文章评论和回复评论功能
May 30 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
May 17 Javascript
vue开发拖拽进度条滑动组件
Sep 21 Javascript
在Express中提供静态文件的实现方法
Oct 17 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
Dec 09 Javascript
浅谈实现在线预览PDF的几种解决办法
Aug 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无限遍历目录示例
2014/02/21 PHP
ThinkPHP3.1新特性之Action参数绑定
2014/06/19 PHP
PHP pear安装配置教程
2016/05/14 PHP
asp.net和php的区别点总结
2019/10/10 PHP
PHP 文件写入和读取操作实例详解【必看篇】
2019/11/04 PHP
鼠标焦点离开文本框时验证的js代码
2013/07/19 Javascript
jquery使用append(content)方法注意事项分享
2014/01/06 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
node.js中的fs.mkdir方法使用说明
2014/12/17 Javascript
js检测判断日期大于多少天的方法
2015/05/04 Javascript
js实现人才网站职位选择功能的方法
2015/08/14 Javascript
jquery实现ajax加载超时提示的方法
2016/07/23 Javascript
jquery.Callbacks的实现详解
2016/11/30 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
angularJS之$http:与服务器交互示例
2017/03/17 Javascript
javascript实现延时显示提示框效果
2017/06/01 Javascript
iscroll动态加载数据完美解决方法
2017/07/18 Javascript
代码详解javascript模块加载器
2018/03/04 Javascript
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
详解Vue3.0 + TypeScript + Vite初体验
2021/02/22 Vue.js
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
Python socket编程实例详解
2015/05/27 Python
Python和JavaScript间代码转换的4个工具
2016/02/22 Python
Python 字符串与数字输出方法
2018/07/16 Python
如何使用Python进行OCR识别图片中的文字
2019/04/01 Python
python面试题之列表声明实例分析
2019/07/08 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
Python zip函数打包元素实例解析
2019/12/11 Python
Python内存映射文件读写方式
2020/04/24 Python
python openCV实现摄像头获取人脸图片
2020/08/20 Python
全球最大的服务市场:Fiverr
2017/01/03 全球购物
七匹狼男装广告词
2014/03/21 职场文书
工会2014法制宣传日活动总结
2014/11/01 职场文书
2014年招商工作总结
2014/11/22 职场文书