用原生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 相关文章推荐
什么是 AngularJS?AngularJS简介
Dec 06 Javascript
轻松搞定jQuery.noConflict()
Feb 15 Javascript
DropDownList控件绑定数据源的三种方法
Dec 24 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
Apr 13 Javascript
Angular2数据绑定详解
Apr 18 Javascript
用JS实现简单的登录验证功能
Jul 28 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
Aug 21 Javascript
Vue实现一个图片懒加载插件
Mar 11 Javascript
vue基于viewer实现的图片查看器功能
Apr 12 Javascript
javascript for循环性能测试示例
Aug 07 Javascript
JS通用方法触发点击事件代码实例
Feb 17 Javascript
js如何验证密码强度
Mar 18 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
自动跳转中英文页面
2006/10/09 PHP
phpmyadmin出现Cannot start session without errors问题解决方法
2014/08/14 PHP
php判断文件夹是否存在不存在则创建
2015/04/09 PHP
Linux系统下使用XHProf和XHGui分析PHP运行性能
2015/12/08 PHP
PHP通过curl获取接口URL的数据方法
2018/05/31 PHP
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
2012/10/18 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
2013/06/21 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
2014/02/17 Javascript
jquery统计用户选中的复选框的个数
2014/06/06 Javascript
javascript实现鼠标拖动改变层大小的方法
2015/04/30 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
2017/01/10 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
H5图片压缩与上传实例
2017/04/21 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
2017/07/10 Javascript
JS实现移动端判断上拉和下滑功能
2017/08/07 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
2017/12/16 Javascript
ES6 Iterator接口和for...of循环用法分析
2019/07/31 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
2020/08/07 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
python使用递归解决全排列数字示例
2014/02/11 Python
Python编程对列表中字典元素进行排序的方法详解
2017/05/26 Python
Django组件content-type使用方法详解
2019/07/19 Python
python实现微信打飞机游戏
2020/03/24 Python
pytorch中 gpu与gpu、gpu与cpu 在load时相互转化操作
2020/05/25 Python
如何验证python安装成功
2020/07/06 Python
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
网络教育毕业生自我鉴定
2013/10/10 职场文书
员工廉洁自律承诺书
2014/05/26 职场文书
行政二审代理词
2015/05/25 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书
MySQL数据库⾼可⽤HA实现小结
2022/01/22 MySQL
排查Tomcat进程假死的问题
2022/05/06 Servers