javascript中获取class的简单实现


Posted in Javascript onJuly 12, 2016

js中没有获取class的办法,找了一些封装好的方法,这里整理一下

(1)先进行封装

//封装getClass 
      function getClass(tagName,className) //获得标签名为tagName,类名className的元素 
      { 
        if(document.getElementsByClassName) //支持这个函数 
        {    return document.getElementsByClassName(className); 
        } 
        else 
        {    var tags=document.getElementsByTagName(tagName);//获取标签 
          var tagArr=[];//用于返回类名为className的元素 
          for(var i=0;i < tags.length; i++) 
          { 
            if(tags[i].class == className) 
            { 
              tagArr[tagArr.length] = tags[i];//保存满足条件的元素 
            } 
          } 
          return tagArr; 
        } 
      }

(2)主体程序

<ul>
  <li class="dicTap">1</li>
  <li class="dicTap">2</li>
  <li class="dicTap">3</li>
  <li class="dicTap">4</li>
</ul>

(3)获取class为dicTap的所有li内容程序

window.onload = function()
{  var topMenus = getClass('li','dicTap');
  for(var i=0;i < topMenus.length; i++)
  {
    alert(topMenus[i].innerHTML);    
  }

}

(4)项目中实际应用

//点击的  自定义属性personid,打开详情页面并且进行跨页面传值 
      var dicTap = getClass('li','dicTap'); 
        for(var i=0;i <dicTap.length; i++) 
        { 
          dicTap[i].addEventListener('tap',function(){ 
            var personId=this.getAttribute("personid"); 
            localStorage.a=personId; 
            mui.openWindow({ 
            url: 'disciplineDetail.html', 
            id:'disciplineDetail' 
            }); 
          }) 
        } 
 
      //封装getClass 
      function getClass(tagName,className) //获得标签名为tagName,类名className的元素 
      { 
        if(document.getElementsByClassName) //支持这个函数 
        {    return document.getElementsByClassName(className); 
        } 
        else 
        {    var tags=document.getElementsByTagName(tagName);//获取标签 
          var tagArr=[];//用于返回类名为className的元素 
          for(var i=0;i < tags.length; i++) 
          { 
            if(tags[i].class == className) 
            { 
              tagArr[tagArr.length] = tags[i];//保存满足条件的元素 
            } 
          } 
          return tagArr; 
        } 
      }

以上这篇javascript中获取class的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS验证控制输入中英文字节长度(input、textarea等)具体实例
Jun 21 Javascript
js 跳出页面的frameset框架示例介绍
Dec 23 Javascript
jQuery事件绑定和委托实例
Nov 25 Javascript
分享12个实用的jQuery代码片段
Mar 09 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
Apr 15 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 Javascript
JS实现“隐藏与显示”功能(多种方法)
Nov 24 Javascript
Bootstrap 模态框(Modal)带参数传值实例
Aug 20 Javascript
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
深入浅析JSONAPI在PHP中的应用
Dec 24 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
Feb 22 Javascript
在Angular中使用JWT认证方法示例
Sep 10 Javascript
springMVC结合AjaxForm上传文件
Jul 12 #Javascript
require简单实现单页应用程序(SPA)
Jul 12 #Javascript
require.js配合插件text.js实现最简单的单页应用程序
Jul 12 #Javascript
javascript中Date对象应用之简易日历实现
Jul 12 #Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
Jul 12 #Javascript
浅谈angularJS中的事件
Jul 12 #Javascript
深入剖析JavaScript面向对象编程
Jul 12 #Javascript
You might like
php5.2以下版本无json_decode函数的解决方法
2014/05/25 PHP
PHP获取数组中指定的一列实例
2017/12/27 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
判断控件是否已加载完成的代码
2010/02/24 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
JS实现图片产生波纹一样flash效果的方法
2015/02/27 Javascript
jQuery实现自定义事件的方法
2015/04/17 Javascript
浅析js中substring和substr的方法
2015/11/09 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
javascript宿主对象之window.navigator详解
2016/09/07 Javascript
bootstrap fileinput完整实例分享
2016/11/08 Javascript
js制作可以延时消失的菜单
2017/01/13 Javascript
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
关于javascript sort()排序你可能忽略的一点理解
2017/07/18 Javascript
Vue之Watcher源码解析(2)
2017/07/19 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
2019/01/29 Javascript
Electron整合React使用搭建开发环境的步骤详解
2020/06/07 Javascript
微信小程序换肤功能实现代码(思路详解)
2020/08/25 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
python中子类继承父类的__init__方法实例
2016/12/15 Python
Python实现的多进程和多线程功能示例
2018/05/29 Python
python 定义给定初值或长度的list方法
2018/06/23 Python
利用pandas进行大文件计数处理的方法
2018/07/25 Python
解决python 无法加载downsample模型的问题
2018/10/25 Python
python输出pdf文档的实例
2020/02/13 Python
python实现发送邮件
2021/03/02 Python
跟单业务员岗位职责
2014/03/08 职场文书
《蚕姑娘》教学反思
2014/04/15 职场文书
2014中学教师节广播稿
2014/09/10 职场文书
银行党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
2015年秋季小学开学典礼主持词
2015/07/16 职场文书
表彰大会新闻稿
2015/07/17 职场文书
selenium.webdriver中add_argument方法常用参数表
2021/04/08 Python
晶体管单管来复再生式收音机
2021/04/22 无线电