Javascript封装id、class与元素选择器方法示例


Posted in Javascript onMarch 13, 2017

由于各个浏览器都支持的选择方法只有如下三种:

     1、document.getElementById()

     2、document.getElementsByName()

     3、document.getElementsByTagName()

所以在封装选择器的时候要考虑浏览器的兼容性。

示例代码如下:

<script>//封装id选择器
  function $(selector){
    var c=selector.substring(0,1);//获取第一个字符
    if(c=="#"){
      return document.getElementById(selector.substring(1,selector.length));//返回相应的元素
    }
  }
  
  
  //封装class选择器
  function $(selector){
    var className=selector.substring(1);//从索引为1的元素往后取
    //判断浏览器是否支持getElementsByClassName
    if(document.getElementsByClassName){
      return document.getElementsByClassName(className)
      //document.querySelectorAll('.cls')兼容性有问题
    }else{
      //document.getElementsByTagName('*')+正则表达式
      //\s空白字符 ^开始 $结束
      var reg=new RegExp('^|\\s'+className+'$|\\s');
      var elems=document.getElementsByTagName("*");//获取页面中所有元素
      var arr=[];//保存获取到的指定className的元素
      for(var i=0;i<elems.length;i++){
        if(reg.test(elems[i].className)){//如果和模式匹配上
          arr.push(elem[i]);
        }
      }
      return arr;
    }
  }
  
  //封装标签选择器  
  function $(element){
    return document.getElementsByTagName(element);
  }
 </script>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
ECMA5数组的新增方法有哪些及forEach()模仿实现
Nov 03 Javascript
深入理解jQuery 事件处理
Jun 14 Javascript
js判断空对象的实例(超简单)
Jul 26 Javascript
jQuery排序插件tableSorter使用方法
Feb 10 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
Feb 16 Javascript
原生JS实现导航下拉菜单效果
Nov 25 Javascript
微信小程序支付及退款流程详解
Nov 30 Javascript
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
JS装饰器函数用法总结
Apr 21 Javascript
原生JS实现前端本地文件上传
Sep 08 Javascript
Vue 中使用 typescript的方法详解
Feb 17 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
Jun 25 Javascript
原生js实现吸顶效果
Mar 13 #Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
Mar 13 #Javascript
jquery.flot.js简单绘制折线图用法示例
Mar 13 #Javascript
深入理解Node.js中的进程管理
Mar 13 #Javascript
jQuery简易时光轴实现方法示例
Mar 13 #Javascript
JavaScript评论点赞功能的实现方法
Mar 13 #Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
Mar 13 #Javascript
You might like
PHP中防止直接访问或查看或下载config.php文件的方法
2012/07/07 PHP
php实现数据库的增删改查
2017/02/26 PHP
Thinkphp事务操作实例(推荐)
2017/04/01 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
flash 得到自身url参数的代码
2009/11/15 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
2012/08/30 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
解析JavaScript中点号“.”的多义性
2013/12/02 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
jquery实现图片水平滚动效果代码分享
2015/08/26 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
2015/09/14 Javascript
如何实现JavaScript动态加载CSS和JS文件
2020/12/28 Javascript
基于jQuery实现的无刷新表格分页实例
2016/02/17 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
Java设计中的Builder模式的介绍
2018/03/22 Javascript
js的对象与函数详解
2019/01/21 Javascript
重学JS 系列:聊聊继承(推荐)
2019/04/11 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
JS中比较两个Object数组是否相等方法实例
2019/11/11 Javascript
vue项目,代码提交至码云,iconfont的用法说明
2020/07/30 Javascript
js实现限定区域范围拖拉拽效果
2020/11/20 Javascript
Python实现将一个大文件按段落分隔为多个小文件的简单操作方法
2017/04/17 Python
Python设计模式之中介模式简单示例
2018/01/09 Python
Python编程实现的简单神经网络算法示例
2018/01/26 Python
python之super的使用小结
2018/08/13 Python
Python3爬虫学习之应对网站反爬虫机制的方法分析
2018/12/12 Python
Django实现学员管理系统
2019/02/26 Python
Python3.5文件修改操作实例分析
2019/05/01 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
Auchan Direct波兰:欧尚在线杂货店
2016/10/19 全球购物
PREMIUM-MALL法国:行李、箱包及配件在线
2019/05/30 全球购物
一套带网友答案的.NET笔试题
2016/12/06 面试题
音乐器材管理制度
2014/01/31 职场文书
庆元旦广播稿
2014/02/10 职场文书
行政办公室岗位职责
2014/03/18 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书