实现兼容document.querySelector的方法
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的方法的更多相关文章
- ie8以下不兼容document.getElementsByName解决方法
在IE8以认为只有文本标签才有name属性的,一些元素标签用document.getElementsByName获取不到DOM,如DIV,span等,这里做一下兼容. HTML: <div na ...
- document.querySelector和querySelectorAll方法
querySelector和querySelectorAll是W3C提供的新的查询接口,其主要特点如下: 1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null. 2.q ...
- javascript之 原生document.querySelector和querySelectorAll方法
querySelector和querySelectorAll是W3C提供的新的查询接口,其主要特点如下: 1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null. 2.q ...
- document.getElementById和document.querySelector的区别
zepto中的$(".111")出错,jQuery中$(".111")不出错的原因: zepto用document.querySelector实现,jQuery ...
- Angular.element和$document的使用方法分析,代替jquery
AngularJs是不直接操作DOM的,但是在平时的开发当中,我们有的时候还是需要操作一些DOM的,如果使用原生的JS的话操作过于麻烦,所以大家一般都是使用jQuery,jQuery虽然好用,但是An ...
- 正确地缩写 document.querySelector
北京的夕阳,伴随淡淡的霾殇.从写字楼望去,光线是那么昏黄.没有孤雁,也没有霞光,遥想当年,还是 jQuery 独霸一方.那时的我们,写程序都习惯了使用 $,至少在对美元符号的喜爱上,与 PHP 达成了 ...
- 关于onscroll函数兼容各浏览器的方法分析
关于window.onscroll函数兼容各浏览器的方法分析 1.当前文档的渲染模式是决定onscroll函数兼容性根本原因 目前浏览器的排版引擎有三种模式:怪异模式(Quirks mode).接近标 ...
- javascript 原生得到document.Element的方法
今天这里写这个博客的主要目的是记录一下javascript原生的选择dom的集中方法. 1.document.getElementById.这个方法接收1个参数,就是DOM元素的id(区分大小写),这 ...
- document.querySelector()和document.querySelectorAll()
HTML5向Web API新引入了 document.querySelector()和document.querySelectorAll()两个方法,都可以接收三种类型的参数:id(#),class( ...
随机推荐
- 阻止a标签的默认事件及延伸
先贴一段代码 <html lang="en"> <head> <meta charset="UTF-8"> <meta ...
- 前端Web开发MVC模式-入门示例
MVC概论起初来之桌面应用开发.其实java的structs框架最能体现MVC框架:model模型是理解成服务器端的模块程序:view为发送给客服端的内容:control为servlet程序控制跳转和 ...
- C/C++中__builtin_popcount()的使用及原理
__builtin_popcount()用于计算一个 32 位无符号整数有多少个位为1 Counting out the bits 可以很容易的判断一个数是不是2的幂次:清除最低的1位(见上面 ...
- HDU 1024 Max Sum Plus Plus【动态规划求最大M子段和详解 】
Max Sum Plus Plus Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...
- ZOJ 1002 DFS
Fire Net Time Limit: 2 Seconds Memory Limit: 65536 KB Suppose that we have a square city with s ...
- hdu_2444The Accomodation of Students(二分图的判定和计算)
hdu_2444The Accomodation of Students(二分图的判定和计算) 标签:二分图匹配 题目链接 题意: 问学生是否能分成两部分,每一部分的人都不相认识,如果能分成的话,两两 ...
- Linux使用Public Key方式远程登录
一.前言: ssh远程登录密码认证的方式有三种,password.Keyboard Interactive.Public Key 前面两种方式就是密码认证,含义都是一样大同小异.第三种是登录方式最安全 ...
- Dora.Interception, 一个为.NET Core度身打造的AOP框架:不一样的Interceptor定义方式
相较于社区其他主流的AOP框架,Dora.Interception在Interceptor提供了完全不同的编程方式.我们并没有为Interceptor定义一个接口,正是因为不需要实现一个预定义的接口, ...
- Actor-ES框架:Ray
并发 1. 并发和并行 并发:两个或多个任务在同一时间段内运行.关注点在任务分割. 并行:两个或多个任务在同一时刻同时运行.关注点在同时执行. 本文大多数情况下不会严格区分这两个概念,默认并发就是指并 ...
- Jfinal——实践出真知
什么是Jfinal? JFinal 是基于 Java 语言的极速 WEB + ORM 框架,其核心设计目标是开发迅速.代码量少.学习简单.功能强大.轻量级.易扩展.Restful.在拥有Java语言所 ...