function $(selector){
  //获取第一个字符
  var firstLetter = selector.charAt(0);
  //对第一个字符进行判断
  switch(firstLetter){
    //#则为id名称;
    case '#' : return idSelector(selector);
    break;
    //.则为class;
    case '.' : return classSelector(selector);
    break;
    default : return tagNameSelector(selector);
  }
  //idSelector
  function idSelector(idS){
    return document.getElementById(idS.substring(1));
  }
  //tagNameSelector;
  function tagNameSelector(tagNameS){
    return document.getElementsByTagName(tagNameS);
  }
  //classSelector
  function classSelector(classS){
  //兼容处理
  if(docuent.getElementsByClassName){
    return document.getElementsByClassName(classS.substring(1));
  }else{
    //放置dom节点的数组
    var arr = [];
    //如果浏览器不兼容getElementsByClassName
    //获取页面中的所有的元素
    var arrTag = document.getElementsByTagName('*');
    //利用正则匹配找到对应的标签
    var reg = new RegExp('(^|\\s)'+classS.substring(1)+'($|\\s)','g');
    //遍历所有的标签
    for(var i = 0 , k = arrTag.length ; i < k ; i++){
    //如果标签拥有对用的class名称 push 到一个数组中
      console.log(arrTag[i].className);
      if(reg.test(arrTag[i].className)){
        arr.push(arrTag[i]);
      }
   }
  return arr;
    }
  }
}

js封装 DOM获取的更多相关文章

  1. 原生js封装dom操作库

    var utils = (function(window) { var flag = "getComputedStyle" in window; function win(attr ...

  2. 原生js封装cookie获取、设置及删除

    使用cookie(key,value,options) 参数key,value,options(可选) function cookie(key,value,options){ if(typeof va ...

  3. 原生js封装的获取某一天是当年的第几周方法

    function getWeek(str){ //str格式为yyy-mm-dd //周日归到了本周 var d=new Date(str); var day=d.getDay(); var orig ...

  4. js封装设置获取cookie

    var docCookies = { getItem: function (sKey) { return decodeURIComponent(document.cookie.replace(new ...

  5. 自己封装的一个js方法用于获取显示的星期和日期时间

    自己封装的一个js方法用于获取显示的星期和日期时间 /** * 获取用于显示的星期和日期时间 * @param date * @returns {string} */ function getWeek ...

  6. js的DOM对象

    1.js的Array对象           ** 创建数组(三种)                          - var arr1 = [1,2,3];                    ...

  7. jQuery对象与JS原生dom对象之间的转换

    jQuery就是JS的一个扩展库,工具库,提供很多方便快捷的方法,所以将JS对象转换为jQuery对象后,能更方便地操作这个对象.但是jQuery对象也不是万能的,有一些JS对象有的能,jQuery对 ...

  8. Js之DOM(一)

    ----------------------------------------------------------------------------------------------第一部分 D ...

  9. JS操作DOM对象——JS基础知识(四)

    一.JavaScript的三个重要组成部分 (1)ECMAScript(欧洲计算机制造商协会) 制定JS的规范 (2)DOM(文档对象模型)重点学习对象 处理网页内容的方法和接口 (3)BOM(浏览器 ...

随机推荐

  1. PHP-1.数据库连接与登陆

    <?php //数据库信息 $servername = "localhost"; $username = "root"; $password = &quo ...

  2. flink入门实战总结

    随着大数据技术在各行各业的广泛应用,要求能对海量数据进行实时处理的需求越来越多,同时数据处理的业务逻辑也越来越复杂,传统的批处理方式和早期的流式处理框架也越来越难以在延迟性.吞吐量.容错能力以及使用便 ...

  3. jQuery中的事件与动画 笔记整理

    一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.window事件.表单事件.事件的绑定和处 ...

  4. Django websocket之web端实时查看日志实践案例

    这是Django Channels系列文章的第二篇,以web端实现tailf的案例讲解Channels的具体使用以及跟Celery的结合 通过上一篇<Django使用Channels实现WebS ...

  5. Eclipse 设置黑色主题

    Eclipse 设置为黑色主题,不仅看起来炫酷,更重要的是对于长期盯着电脑的程序猿来说对眼睛更好些. 先看下效果: 下面以Eclipse Luna 为例,说说 Eclipse 设置为黑色主题的方法(P ...

  6. 二进制文件安装安装etcd

    利用二进制文件安装安装etcd etcd组件作为一个高可用强一致性的服务发现存储仓库. etcd作为一个受到ZooKeeper与doozer启发而催生的项目,除了拥有与之类似的功能外,更专注于以下四点 ...

  7. 动态开内存(malloc与calloc)

    malloc与calloc 1.函数原型 #include<stdlib.h> void *malloc(unsigned int size);     //申请size字节的内存 voi ...

  8. vue前后分离项目部署(不同端口号,nginx反向代理解决跨域问题)

    #user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #erro ...

  9. iOS基础面试题汇总

    目录 1. #import 跟#include.@class有什么区别?#import<> 跟 #import""又什么区别? 都可以完整包含某个文件的内容,但是#im ...

  10. NOIP 2018旅行题解

    从佳木斯回来刷一刷去年没A的题 题目描述 小 Y 是一个爱好旅行的 OIer.她来到 X 国,打算将各个城市都玩一遍. 小Y了解到, X国的 nn 个城市之间有 mm 条双向道路.每条双向道路连接两个 ...