var querySelector = function(selector) { //TODO 先简单兼容,后续继续扩展;
var element = null;
if(document.querySelector) {
element = document.querySelector(selector);
} else {
var selectors = selector.split(' ');
var context = document;
for(var i = 0, len = selectors.length; i < len; i++) {
context = handleQuery(selectors[i], context);
}
element = context;
}
return element;
};
var handleQuery = function(selector, context) {
var idSelectorRE = /^#([\w-]+)$/;
var classSelectorRE = /^\.([\w-]+)$/;
var tagSelectorRE = /^[\w-]+$/;
var element = null;
if(idSelectorRE.test(selector)) {
element = context.getElementById(selector.substring(1));
} else if(classSelectorRE.test(selector)) {
element = context.getElementsByClassName(selector.substring(1))[0];
} else if(tagSelectorRE.test(selector)) {
element = context.getElementsByTagName(selector)[0];
}
return element;
};

这里关键的地方,在于处理多级选择器。不过,这里没有处理同级多类型选择器的情况,后续会补充。

实现兼容document.querySelector的方法的更多相关文章

  1. ie8以下不兼容document.getElementsByName解决方法

    在IE8以认为只有文本标签才有name属性的,一些元素标签用document.getElementsByName获取不到DOM,如DIV,span等,这里做一下兼容. HTML: <div na ...

  2. document.querySelector和querySelectorAll方法

    querySelector和querySelectorAll是W3C提供的新的查询接口,其主要特点如下: 1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null.  2.q ...

  3. javascript之 原生document.querySelector和querySelectorAll方法

    querySelector和querySelectorAll是W3C提供的新的查询接口,其主要特点如下: 1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null.  2.q ...

  4. document.getElementById和document.querySelector的区别

    zepto中的$(".111")出错,jQuery中$(".111")不出错的原因: zepto用document.querySelector实现,jQuery ...

  5. Angular.element和$document的使用方法分析,代替jquery

    AngularJs是不直接操作DOM的,但是在平时的开发当中,我们有的时候还是需要操作一些DOM的,如果使用原生的JS的话操作过于麻烦,所以大家一般都是使用jQuery,jQuery虽然好用,但是An ...

  6. 正确地缩写 document.querySelector

    北京的夕阳,伴随淡淡的霾殇.从写字楼望去,光线是那么昏黄.没有孤雁,也没有霞光,遥想当年,还是 jQuery 独霸一方.那时的我们,写程序都习惯了使用 $,至少在对美元符号的喜爱上,与 PHP 达成了 ...

  7. 关于onscroll函数兼容各浏览器的方法分析

    关于window.onscroll函数兼容各浏览器的方法分析 1.当前文档的渲染模式是决定onscroll函数兼容性根本原因 目前浏览器的排版引擎有三种模式:怪异模式(Quirks mode).接近标 ...

  8. javascript 原生得到document.Element的方法

    今天这里写这个博客的主要目的是记录一下javascript原生的选择dom的集中方法. 1.document.getElementById.这个方法接收1个参数,就是DOM元素的id(区分大小写),这 ...

  9. document.querySelector()和document.querySelectorAll()

    HTML5向Web API新引入了 document.querySelector()和document.querySelectorAll()两个方法,都可以接收三种类型的参数:id(#),class( ...

随机推荐

  1. jQuery_serialize的用法

    jQuery_serialize(form表单序列化)用于在前端要传很多值往后端的时候: <!DOCTYPE html> <html lang="en"> ...

  2. 大数据Hadoop学习之搭建hadoop平台(2.2)

    关于大数据,一看就懂,一懂就懵. 一.概述 本文介绍如何搭建hadoop分布式集群环境,前面文章已经介绍了如何搭建hadoop单机环境和伪分布式环境,如需要,请参看:大数据Hadoop学习之搭建had ...

  3. Java集合源码分析(三)Vevtor和Stack

    前言 前面写了一篇关于的是LinkedList的除了它的数据结构稍微有一点复杂之外,其他的都很好理解的.这一篇讲的可能大家在开发中很少去用到.但是有的时候也可能是会用到的! 注意在学习这一篇之前,需要 ...

  4. HDU 2563 统计问题(递归,思维题)

    统计问题 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  5. Zabbix如何实现批量监控端口状态

    引言 ------------------------------------------------------------------------------------------------- ...

  6. 一 : springmvc常用注解

    springmvc常用注解详解1.@Controller在SpringMVC 中,控制器Controller 负责处理由DispatcherServlet 分发的请求,它把用户请求的数据经过业务处理层 ...

  7. UEP-添加表格

    UEP中添加新的表格标签:function initCustomToolBar(){ var strHtml="<table> <tr> <td id=\&qu ...

  8. 应用中Token的作用

    Token 的作用 Token,就是令牌,最大的特点就是随机性,不可预测.一般黑客或软件无法猜测出来. 那么,Token有什么作用?又是什么原理呢? Token一般用在两个地方: 1)防止表单重复提交 ...

  9. No input file specified的解决方法apache伪静态

    http://jingyan.baidu.com/article/dca1fa6f8d623ff1a44052e8.html (一)IIS Noinput file specified 方法一:改PH ...

  10. Android之MaterialDesign应用技术

    PS:纵观现在大大小小软件的界面都变的比较漂亮,还有一些系统了,比如小米的MIUI,华为的EMUI等,虽然底层都是安卓,但他们的界面多多少少都会不同,谷歌对这个UI也是非常重视的,MaterialDe ...