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. BZOJ:3911: SGU383 Caravans(三角剖分)

    原题链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3911 直接求最小生成树显然边太多,考虑少用点边. 连出来的边肯定是没相交的,我们需要做一下 ...

  2. Codeforces Round #410 (Div. 2)(A,字符串,水坑,B,暴力枚举,C,思维题,D,区间贪心)

    A. Mike and palindrome time limit per test:2 seconds memory limit per test:256 megabytes input:stand ...

  3. BZOJ 2257: [Jsoi2009]瓶子和燃料【数论:裴蜀定理】

    2257: [Jsoi2009]瓶子和燃料 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1326  Solved: 815[Submit][Stat ...

  4. hdu_2089(数位dp)

    hdu_2089(数位dp) 标签: dp 我初次接触数位dp表面上看上去挺简单,但是仔细学还是要考虑很多细节的.wa了无数次,这里引入一个 很好地博客 #include<cstdio> ...

  5. 分布式计算框架学习笔记--hadoop工作原理

    (hadoop安装方法:http://blog.csdn.net/wangjia55/article/details/53160679这里不再累述) hadoop是针对大数据设计的一个计算架构.如果你 ...

  6. Solr6.0与Jetty、Tomcat在Win环境下搭建/部署

    摘要: Solr6的新特性包括增强的edismax,对SQL更好的支持--并行SQL.JDBC驱动.更多的SQL语法支持等,并且在Solr6发布以后,Solr5还在持续更新,对于想尝鲜Solr6的用户 ...

  7. TCP为什么需要3次握手与4次挥手(转载)

    为什么需要“三次握手” 在谢希仁著<计算机网络>第四版中讲“三次握手”的目的是“为了防止已失效的连接请求报文段突然又传送到了服务端,因而产生错误”.在另一部经典的<计算机网络> ...

  8. YUI 的模块信息配置优先级关系梳理

    背景 YUI的配置参数较多, 可以在好几个地方配置一个module的相关信息, 如: //在全局配置, 所以YUI实例共享 YUI_config = { modules: { 'w-autcomple ...

  9. github网站介绍、并使用git命令管理github(详细描述)

    本章学习: 1)熟悉github网站 2)通过git命令远程管理github, 3)git命令使用ssh key密钥无需输入账号密码 1.首先我们来熟悉github网站 1.1 注册github 登录 ...

  10. 立即掌握SSM框架的要诀

    ssm框架的总结: 1. 首先是POM.xml 文件的配置,他的作用主要是添加依懒的关系和自动下载相关的包. 2.对jdbc.properties进行配置 ,作用就是连接你的数据库的配置. 3.对接着 ...