用原生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+dom树型菜单类,希望朋友们一起进步
May 03 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Sep 13 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
Mar 01 Javascript
jquery 清空file域示例(兼容个浏览器)
Oct 11 Javascript
7个让JavaScript变得更好的注意事项
Jan 28 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
Feb 06 Javascript
JS检测移动端横竖屏的代码
May 30 Javascript
Bootstrap CSS布局之按钮
Dec 17 Javascript
微信小程序中使用wxss加载图片并实现动画效果
Aug 13 Javascript
vuex中store存储store.commit和store.dispatch的用法
Jul 24 Javascript
解决vue请求接口第一次成功,第二次失败问题
Sep 08 Javascript
js实现扫雷源代码
Nov 27 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缩略图生成程式(需要GD库支持)
2007/03/06 PHP
PHP对字符串的递增运算分析
2010/08/08 PHP
PHP使用静态方法的几个注意事项
2014/09/16 PHP
各种快递查询--Api接口
2016/04/26 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
PHP中Cookie的使用详解(简单易懂)
2017/04/28 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
QQ邮箱的一个文本编辑器代码
2007/03/14 Javascript
JavaScript 捕获窗口关闭事件
2009/07/26 Javascript
轻轻松松学JS调试(不下载任何工具)
2010/04/14 Javascript
Extjs中使用extend(js继承) 的代码
2012/03/15 Javascript
javascript 实现子父窗体互相传值的简单实例
2014/02/17 Javascript
jquery 设置style:display的方法
2015/01/29 Javascript
jQuery插件datalist实现很好看的input下拉列表
2015/07/14 Javascript
JavaScript中循环遍历Array与Map的方法小结
2016/03/12 Javascript
angularjs使用directive实现分页组件的示例
2017/02/07 Javascript
js判断手机系统是android还是ios
2017/03/07 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
2017/07/05 Javascript
详解js几个绕不开的事件兼容写法
2017/08/30 Javascript
vue data引入本地图片的两种方式小结
2019/11/13 Javascript
JS实现图片切换特效
2019/12/23 Javascript
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
10个易被忽视但应掌握的Python基本用法
2015/04/01 Python
Python常见异常分类与处理方法
2017/06/04 Python
python用插值法绘制平滑曲线
2021/02/19 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
通过实例了解python property属性
2019/11/01 Python
简单了解python字符串前面加r,u的含义
2019/12/26 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
CSS3 三维变形实现立体方块特效源码
2016/12/15 HTML / CSS
FORZIERI澳大利亚站:全球顶级奢华配饰精品店
2016/12/31 全球购物
英国领先的独立时装店:Van Mildert
2019/10/28 全球购物
主要的Ajax框架都有什么
2013/11/14 面试题
党员查摆剖析材料
2014/10/10 职场文书
教师求职自荐信
2015/03/26 职场文书
2016年国培研修日志
2015/11/13 职场文书