实现兼容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( ...
随机推荐
- Unknown column in 'where clause'
Unknown column in 'where clause' 错误如题:Unknown column in 'XXX' 'where clause' 意思是:未知表名 排查 1,查表名是否有错 2 ...
- BZOJ:4219: 跑得比谁都快 3007: 拯救小云公主
4219: 跑得比谁都快 3007: 拯救小云公主 三角剖分的解释可以看这里:http://www.cnblogs.com/Enceladus/p/6706444.html 后一道是前一道的弱化版. ...
- HDU 2084 数塔(简单DP入门)
数塔 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submiss ...
- [bzoj2462] [BeiJing2011]矩阵模板
二维的hash.. 注意n的范围是1000........ 真相似乎是全部输出1就行了233 #include<cstdio> #include<iostream> #incl ...
- hdu_1042(模拟大数乘法)
计算n! #include<cstring> #include<cstdio> using namespace std; ]; int main() { int n; whil ...
- linux下如何删除文件夹?
直接rm就可以了,不过要加两个参数-rf 即:rm -rf 目录名字-r 就是向下递归,不管有多少级目录,一并删除:-f 就是直接强行删除,不作任何提示的意思. 例如:删除文件夹实例: rm -rf ...
- 2. Event编写
Event作用: 存储事件数据. IEventBase K:是Actor的StateId的类型,可以是long.可以是string,Ray一般使用OGuid生成的字符串作为主键. 编写Event继承I ...
- win处navicat直接导出的sql脚本导入Linux mysql报错问题
最近几天在把win上的项目的数据库转移到Ubuntu,于是第一件事就是从win处的navicat直接导出sql脚本,然后进入Ubuntu导入的时候会报错误,跳过错误继续执行导致数据库表的缺失. 跨平台 ...
- Mybatis框架 基础
思维导图 @有对应的例子 @1接入数据库 配置文件 <?xml version="1.0" encoding="UTF-8" ?> <!DOC ...
- libz.dylib
1. .dylib意味着这是一个动态链接库. 2. libz.dylib是提供zip压缩解压缩的库