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 相关文章推荐
javascript使用activex控件的代码
Jan 27 Javascript
jquery操作select方法汇总
Feb 05 Javascript
jquery判断单选按钮radio是否选中的方法
May 05 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
Jul 07 Javascript
JavaScript省市区三级联动菜单效果
Sep 21 Javascript
Vue修改mint-ui默认样式的方法
Feb 03 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
Apr 18 Javascript
简单说说angular.json文件的使用
Oct 29 Javascript
使用layer弹窗,制作编辑User信息页面的方法
Sep 27 Javascript
Vue 实现输入框新增搜索历史记录功能
Oct 15 Javascript
vue从零实现一个消息通知组件的方法详解
Mar 16 Javascript
如何在JS文件中获取Vue组件
Sep 16 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
linux下 C语言对 php 扩展
2008/12/14 PHP
微信自定义菜单的创建/查询/取消php示例代码
2016/08/05 PHP
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
2011/05/24 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
2013/02/05 Javascript
JS在IE下缺少标识符的错误
2014/07/23 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
JS解析XML文件和XML字符串详解
2015/04/17 Javascript
javascript删除数组重复元素的方法汇总
2015/06/24 Javascript
javascript针对不确定函数的执行方法
2015/12/16 Javascript
原生js实现addClass,removeClass,hasClass方法
2016/04/27 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
详解angular中如何监控dom渲染完毕
2017/01/03 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
JS设计模式之策略模式概念与用法分析
2018/02/05 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
jQuery事件blur()方法的使用实例讲解
2019/03/30 jQuery
ES6知识点整理之函数对象参数默认值及其解构应用示例
2019/04/17 Javascript
Vue 实现分页与输入框关键字筛选功能
2020/01/02 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
2020/12/10 Javascript
[05:02][DOTA2]DOTA进化论 第一期
2013/09/27 DOTA
Python操作MySQL简单实现方法
2015/01/26 Python
在Python程序中操作文件之flush()方法的使用教程
2015/05/24 Python
深入理解Python中字典的键的使用
2015/08/19 Python
基于Python的XSS测试工具XSStrike使用方法
2017/07/29 Python
对python调用RPC接口的实例详解
2019/01/03 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
Python魔法方法 容器部方法详解
2020/01/02 Python
HTML5 Canvas绘制文本及图片的基础教程
2016/03/14 HTML / CSS
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
SQL注入攻击的种类有哪些
2013/12/30 面试题
初中英语教学反思
2014/01/25 职场文书
对外汉语专业大学生职业生涯规划书
2014/10/11 职场文书
公司车队管理制度
2015/08/04 职场文书
《风娃娃》教学反思
2016/02/18 职场文书
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis