实现兼容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( ...
随机推荐
- 跟我一起读postgresql源码(十一)——Executor(查询执行模块之——Materialization节点(上))
物化节点 顾名思义,物化节点是一类可缓存元组的节点.在执行过程中,很多扩展的物理操作符需要首先获取所有的元组后才能进行操作(例如聚集函数操作.没有索引辅助的排序等),这时要用物化节点将元组缓存起来.下 ...
- Python中的数据类型以及他们的方法
数据类型: 1)int i = 100 print(i.bit_length()) ''' bit_length 1 0000 0001 1 2 0000 0010 2 3 0000 0011 2 2 ...
- Android应用程序使用两个LinearLayout编排5个Button控件
学习存档: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:androi ...
- isdigit函数
isdigit是计算机应用C语言中的一个函数,主要用于检查参数c是否为阿拉伯数字0到9. 相关函数 isdigit 表头文件 #include <ctype.h>(C语言),#includ ...
- bzoj:1687;poj 2434:[Usaco2005 Open]Navigating the City 城市交通
Description A dip in the milk market has forced the cows to move to the city. The only employment av ...
- [51nod1425]减减数
初始给定一个整数n.每次可以对其做一个操作,这个操作是将n减去他其中的某一位.得到新的一个数字n',然后继续操作,直到他变成0为止. 比如24这个例子,24 → 20 → 18 → 10 → 9 → ...
- Codeforces 626F Group Projects(滚动数组+差分dp)
F. Group Projects time limit per test:2 seconds memory limit per test:256 megabytes input:standard i ...
- POI Sax 事件驱动解析Excel2007文件
Excel2007版本的代码如下,本文主要是用于POI解析大文件Excel容易出现内存溢出的现象而提出解决方案,故此解决了大数据量的Excel文件解析的难度,在此拿出来贡献给大家,谢谢! 里面用到的相 ...
- SpringMVC框架学习笔记(2)——使用注解开发SpringMVC
1.配置web.xml <servlet> <servlet-name>mvc</servlet-name> <servlet-class>org.sp ...
- 五 : springMVC拦截器
springMVC拦截器的实现一般有两种方式 第一种方式是要定义的Interceptor类要实现了Spring的HandlerInterceptor 接口 第二种方式是继承实现了HandlerInte ...