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. 学习SpirngMVC之如何获取请求参数

    学习SpringMVC——如何获取请求参数   @RequestParam,你一定见过:@PathVariable,你肯定也知道:@QueryParam,你怎么会不晓得?!还有你熟悉的他(@Cooki ...

  2. [ZOJ3213] Beautiful Meadow

    插头DP...网格图,有障碍,格子上有权值,求总权值最大的简单路径. 因为路径的起始点不确定..所以多开一维表示当前已经有多少个独立插头.. 只要不合并相同的联通块,并且已经用了2个独立插头,那就是一 ...

  3. CF 348DTurtles

    题目:http://codeforces.com/contest/348/problem/D 如果只走一条路那就直接dp就可以了. 设cal(x1,y1,x2,y2)为(x1,y1)→(x2,y2)的 ...

  4. kali中的webshell

    webacoo -g 生成一句话 -o 输出文件 -r 不混淆代码 -t 连接模式 -u 制定URL 生成一句话 webacoo -g -o a.php 连接一句话 webacoo -t -u htt ...

  5. 来说说datatype

    今天敲代码一直卡在一个问题上面好久那就是--datatype的未定义,起初不晓得datatype的含义,遇到这种情况首先想到的就是自己又忘记加上面头文件了.随即写了个stdlib.h上去.可是问题并没 ...

  6. js根据出生年月日换算年龄

    function age_Conversion(date) { debugger var age = ''; var str = date.replace(/年|月/g, "-") ...

  7. svn冲突文件解决方法

    svn冲突文件解决方法 工具/原料 svn客户端 方法/步骤 1 通过SVN客户端更新需要的文件,如果出现有感叹号的文件,找到出现感叹号的文件. 2 选择感叹号文件,即冲突文件,单击鼠标右键对冲突文件 ...

  8. 那些年~~~我们的C#笔试内测题目

    <深入.NET平台和C#编程>内部测试题-笔试试卷 一 选择题 1) 以下关于序列化和反序列化的描述错误的是( C). a) 序列化是将对象的状态存储到特定存储介质中的过程 b) 二进制格 ...

  9. github not authorized eclipse

    eclipse/myeclipse > menu window > preferences > general > security > content >git ...

  10. servlet入门学习之生命周期

    一. 什么是Servlet Servlet是用Java语言编写的服务器端小程序,驻留在web服务器中,并在其中运行,扩展了web服务器的动态处理功能. 用java语言编写的java类 在web容器中运 ...