querySelector用法改进
原来选择器只支持一个上下文,并对IE8的BUG进行了规避
if (!flag_xml && doc.querySelectorAll) {//FF,opera,chrome,safari的XML文档也实现了querySelectorAll接口,但不能用var query = expr;//IE的getElementsByTagName,querySelectorAll对OBJECT元素的孩子的查找都存在问题if( doc.documentMode === 8 && context.nodeType === 1 && context.nodeName.toLowerCase() !== "object"){var id = context.getAttribute( "id" ),uid = context.uniqueID//IE8在上下文为元素节时,搜索结果包含自己if ( !id ) {context.setAttribute( "id", uid );}try {return pushResult(context.querySelectorAll( "#" + uid + " " + query ),result,flag_multi);} catch(e) {} finally {if ( id == context.uniqueID ) {context.removeAttribute( "id" );}}}else{if(/\!\=/.test(query))//手动支持 E[Attr!=Val]query = query.replace(/\[\s*(\w+)\s*!=\s*((['"]*).*?\3)\s*\]/g,":not([$1=$2])");try {return pushResult( context.querySelectorAll(query) ,result,flag_multi);} catch(e) {}}}
改进如下,现在只需规避IE的OBJECT bug。
if (!flag_xml && doc.querySelectorAll) {//http://www.w3.org/TR/selectors/node = context;//使用替身,以便在多上下文实现不重排查找var useContains = false;if(contexts.length > 2 || doc.documentMode === 8 && context.nodeType === 1){node = doc;useContains = true;}if(doc.documentMode !== 8 || node.nodeName.toLowerCase() !== "object"){try{nodes = pushResult( node.querySelectorAll(expr) ,result,flag_multi);var ret = []if(useContains && nodes.length){var cn = contexts.length;for(i = 0, ri = 0; i < nodes.length; i++){inner:for(var c = 0; c < cn; c++){if(dom.contains(contexts[c], nodes[i])){ret.push(nodes[i])break inner;}}}return ret;}return result;}catch(e){}}}
另一种改进是,通过对元素节点的上下文添加一个类名,这样查找就可以一步到位。不足之处就是前前后后要对类进行操作。
if (!flag_xml && doc.querySelectorAll) {var query = expr;if(contexts.length > 2 || doc.documentMode == 8 && context.nodeType == 1 ){if(contexts.length > 2 )context = doc;query = ".fix_icarus_sqa "+query;//IE8也要使用类名确保查找范围for(i = 0; node = contexts[i++];){if(node.nodeType === 1){node.className = "fix_icarus_sqa " + node.className;}}}if(doc.documentMode !== 8 || context.nodeName.toLowerCase() !== "object"){try{result = pushResult( context.querySelectorAll(query) ,result,flag_multi);if(query.indexOf(".fix_icarus_sqa") === 0 ){//如果为上下文添加了类名,就要去类名for(i = 0; node = contexts[i++];){if(node.nodeType === 1){node.className = node.className.replace(" fix_icarus_sqa","");}}}return result;}catch(e){}}}
但显然对类进行操作对调用dom.contains快捷得多了。
querySelector用法改进相关推荐
- 原生JS DOM操作方法汇总
创建节点 1. document.createElement(tagname) 创建一个由tagName决定的HTML元素 2. document.createTextNode(data) 创建一个文 ...
- JavaScript 教程(二)
面向对象编程 实例对象与 new 命令 JavaScript 语言具有很强的面向对象编程能力,这里介绍 JavaScript 面向对象编程的基础知识 对象是什么 面向对象编程(Object Orien ...
- PE经典DIY案例1:全解开方案让量产PE也能
更新说明:因未来的uefi似乎并不能识别并引导ud区,但能识别和引导量产和u+B+隐藏或高端隐藏区,故解决量产PE对u+B+隐藏区的支持,并增加对UEFI启动支持,已经成为PE制作的最主流技术. PE ...
- JavaScript基础12-day14【DOM查询(获取元素节点、获取元素节点的子节点)、全选练习、DOM增删改、DOM添加删除记录、Window对象方法】
学习地址: 谷粒学院--尚硅谷 哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
- thinkphp5.1 php7,空白目录 · 细数ThinkPHP5.1.7版本新特性 · 看云
>[danger] 官方已经在前不久发布了ThinkPHP`5.1.7`版本,`5.1`版本相较于`5.0`版本而言,本身更加严谨和规范,更接近主流设计思想.近半年来,`5.1`版本更新频繁,此 ...
- JS中DOM节点的CRUD
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>< ...
- JavaScript基础知识总结 18:dom基本操作
目录 一.JavaScript多选框全选.全不选.反选 1.代码实例 2.浏览器显示 二.dom查询方法 1.body标签 2.html根标签 3.all 4.getElementsByClassNa ...
- JavaScript 教程(二) 1
面向对象编程 实例对象与 new 命令 JavaScript 语言具有很强的面向对象编程能力,这里介绍 JavaScript 面向对象编程的基础知识 对象是什么 面向对象编程(Object Orien ...
- 前端基础入门之js什么是DOM Document Object Model
文章目录 DOM 1.DOM简介 文档 对象 模型 2.节点 节点类型 节点属性 文档节点(Document) 元素节点(Element) 文本节点(Text) 属性节点(Attr) 3.事件 4.文 ...
最新文章
- 多目标跟踪 | AI产品经理需要了解的CV通识(三)
- 神经网络谐振子模型的一组数据
- wpf项目源代码_C# WPF开源控件库:MahApps.Metro
- NYOJ 257 郁闷的C小加(一)
- torch.gather(input, dim, index, *, sparse_grad=False, out=None) → Tensor
- 卡方 python_Python评分卡建模—卡方分箱
- Angular内提供了一个可以快速建立测试用web服务的方法:内存 (in-memory) 服务器...
- 自研redis sdk支持自动dns切换(附源码)
- 炸窝(Collections当中的addAll方法)
- python 38day--CSS简介
- centos 安装及vim使用
- vscode创建代码片段
- python安装在什么地方_python模块安装目录在哪里
- 猪年的第一天没有压岁钱
- linux centos系统清理垃圾,centos 清理内存缓存
- 【流量池】裂变营销:10种人脉裂变技能,6个裂变核心,8个吸粉人性本能怎样玩粉丝裂变?
- 操作系统(02326)自考学习笔记/备考资料
- 如何判断蓝牙设备类型
- 暗影精灵2pro装Linux系统,暗影精灵2不支持linux双系统吗?
- 基于HTML和CSS完成京东页面的制作
热门文章
- 我的Android进阶之旅------gt;Android字符串资源中的单引號问题error: Apostrophe not preceded by 的解决的方法...
- Spring-AOP实践 - 统计访问时间
- 【OPENGL】第三篇 着色器基础(一)
- 怎么在代码中打开、关闭屏幕旋转
- 注意服务器系统日期对防病毒软件的影响
- 弯曲圆波导matlab_弯曲波导结构设计
- 汇编语言——键盘输入字符
- Android源码分析-全面理解Context
- HTML DOM Document 对象
- 贪心、递归、递推以及动态规划算法的分析与对比