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 相关文章推荐
extjs form textfield的隐藏方法
Dec 29 Javascript
javascript 模式设计之工厂模式学习心得
Apr 27 Javascript
JavaScript实现向右伸出的多级网页菜单效果
Aug 25 Javascript
javascript HTML5 canvas实现打砖块游戏
Jun 18 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
Sep 02 Javascript
微信小程序 下拉列表的实现实例代码
Mar 08 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
解决vue中使用swiper插件问题及swiper在vue中的用法
Apr 04 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
Aug 12 Javascript
JavaScript创建、读取和删除cookie
Sep 03 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 06 Javascript
如何通过简单的代码描述Angular父组件、子组件传值
Apr 07 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
phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法
2012/03/26 PHP
php目录遍历函数opendir用法实例
2014/11/20 PHP
php实现在线通讯录功能(附源码)
2016/05/13 PHP
php接口实现拖拽排序功能
2018/04/23 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
PHP fclose函数用法总结
2019/02/15 PHP
php设计模式之享元模式分析【星际争霸游戏案例】
2020/03/23 PHP
Chrome Form多次提交表单问题的解决方法
2011/05/09 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
2014/05/11 Javascript
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
js动态添加的DIV中的onclick事件简单实例
2016/07/25 Javascript
Bootstrap警告(Alerts)的实现方法
2017/03/22 Javascript
详解Vue-cli 创建的项目如何跨域请求
2017/05/18 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
2018/05/04 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
2018/09/08 Javascript
node.js基于socket.io快速实现一个实时通讯应用
2019/04/23 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
2019/05/30 Javascript
javascript面向对象三大特征之封装实例详解
2019/07/24 Javascript
js实现跟随鼠标移动的小球
2019/08/26 Javascript
原生javascript自定义input[type=radio]效果示例
2019/08/27 Javascript
vue监听dom大小改变案例
2020/07/29 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
Vue.extend 登录注册模态框的实现
2020/12/29 Vue.js
Python中字符串的常见操作技巧总结
2016/07/28 Python
Python基础之条件控制操作示例【if语句】
2019/03/23 Python
python实现的自动发送消息功能详解
2019/08/15 Python
Python进程间通信multiprocess代码实例
2020/03/18 Python
tensorflow2.0的函数签名与图结构(推荐)
2020/04/28 Python
护理毕业生自荐信范文
2013/12/22 职场文书
飞机制造技术专业求职信
2014/07/27 职场文书
预备党员对照检查材料思想汇报
2014/09/24 职场文书
幼儿园小班教育随笔
2015/08/14 职场文书
大学军训口号大全
2015/12/24 职场文书
JavaScript组合继承详解
2021/11/07 Javascript
CSS巧用渐变实现高级感背景光动画
2021/12/06 HTML / CSS