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 相关文章推荐
符合标准的js表单提交的代码
Sep 13 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
Sep 16 Javascript
JQuery 中几个类选择器的简单使用介绍
Mar 14 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
Dec 16 Javascript
原生和jQuery的ajax用法详解
Jan 23 Javascript
微信小程序动态的加载数据实例代码
Apr 14 Javascript
微信小程序block的使用教程
Apr 01 Javascript
浅谈从React渲染流程分析Diff算法
Sep 08 Javascript
Angular Excel 导入与导出的实现代码
Apr 17 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
Aug 07 Javascript
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
js中Map和Set的用法及区别实例详解
Feb 15 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获取表单所有复选框的值的方法
2014/08/28 PHP
一个php生成16位随机数的代码(两种方法)
2014/09/16 PHP
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
Ctrl+Enter提交内容信息
2006/06/26 Javascript
JavaScript CSS 修改学习第四章 透明度设置
2010/02/19 Javascript
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
2016/05/03 Javascript
canvas实现手机端用来上传用户头像的代码
2016/10/20 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
JavaScript实现二维坐标点排序效果
2017/07/18 Javascript
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
JS实现吸顶特效
2020/01/08 Javascript
通过javascript实现扫雷游戏代码实例
2020/02/09 Javascript
VueCli4项目配置反向代理proxy的方法步骤
2020/05/17 Javascript
vue在图片上传的时候压缩图片
2020/11/18 Vue.js
[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python实现的Excel文件读写类
2015/07/30 Python
学习python中matplotlib绘图设置坐标轴刻度、文本
2018/02/07 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
pycharm2020.2 配置使用的方法详解
2020/09/16 Python
检测浏览器是否支持html5视频的代码
2013/03/28 HTML / CSS
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
TripAdvisor越南:全球领先的旅游网站
2017/09/21 全球购物
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
美国羽绒床上用品第一品牌:Pacific Coast
2018/08/25 全球购物
俄罗斯运动、健康和美容产品在线商店:Lactomin.ru
2020/07/23 全球购物
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
银行类自荐信
2014/02/04 职场文书
护士试用期自我鉴定
2014/02/08 职场文书
党员批评与自我批评(5篇)
2014/09/23 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
委托开发合同书(标准版)
2019/08/07 职场文书
2019年预备党员的思想汇报:加深对党的认知
2019/09/25 职场文书
Flutter集成高德地图并添加自定义Maker的实践
2022/04/07 Java/Android