querySlector
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id 等方式来查找,这显然是远远不够的,如果想要进行更为精确的选择不得不使用看起来非常繁琐的正则表达式,或者使用某个库。事实上,现在所有的浏览器厂商都提供了 querySelector 和 querySelectorAll 这两个方法的支持,甚至就连微软也派出了 IE 8 作为支持这一特性的代表,querySelector 和 querySelectorAll 作为查找 DOM 的又一途径,极大地方便了开发者,使用它们,你可以像使用 CSS 选择器一样快速地查找到你需要的节点。
querySelector 和 querySelectorAll 的使用非常的简单,就像标题说到的一样,它和 CSS 的写法完全一样,对于前端开发人员来说,这是难度几乎为零的一次学习。假如我们有一个 id 为 test 的 DIV,为了获取到这个元素,你也许会像下面这样:
document.getElementById("test");
现在我们来试试使用新方法来获取这个 DIV:
document.querySelector("#test");
document.querySelectorAll("#test")[0];
下面是个小演示:
感觉区别不大是吧,但如果是稍微复杂点的情况,原始的方法将变得非常麻烦,这时候 querySelector 和 querySelectorAll 的优势就发挥出来了。比如接下来这个例子,我们将在 document 中选取 class 为 test 的 div 的子元素 p 的第一个子元素,当然这很拗口,但是用本文的新方法来选择这个元素,比用言语来描述它还要简单。
document.querySelector("div.test>p:first-child");
document.querySelectorAll("div.test>p:first-child")[0];
下面是个小演示:
我是层里的 p 标签
现在应该对于 querySelector、querySelectorAll 方法中的参数已经非常明白了,是的,它接收的参数和 CSS 选择器完全一致。querySelector 和 querySelectorAll 的区别在于 querySelector 用来获取一个元素,而querySelectorAll 可以获取多个元素。querySelector 将返回匹配到的第一个元素,如果没有匹配的元素则返回 Null。querySelectorAll 返回一个包含匹配到的元素的数组,如果没有匹配的元素则返回的数组为空。在本文最后一个例子中,我们使用 querySelectorAll 给所有 class 为 emphasis 的元素加粗显示。
var emphasisText = document.querySelectorAll(".emphasis");
for( var i = 0 , j = emphasisText.length ; i < j ; i++ ){
emphasisText[i].style.fontWeight = "bold";
}
这是原生方法,比起jquery速度快,缺点是IE6、7不支持。
W3C的规范与库中的实现
querySelector:return the first matching Element node within the node’s subtrees. If there is no such node, the method must return null .(返回指定元素节点的子树中匹配selector的集合中的第一个,如果没有匹配,返回null)
querySelectorAll:return a NodeList containing all of the matching Element nodes within the node’s subtrees, in document order. If there are no such nodes, the method must return an empty NodeList. (返回指定元素节点的子树中匹配selector的节点集合,采用的是深度优先预查找;如果没有匹配的,这个方法返回空集合)
这在BaseElement 为document的时候,没有什么问题,各浏览器的实现基本一致;但是,当BaseElement 为一个普通的dom Node的时候(支持这两个方法的dom Node ),浏览器的实现就有点奇怪了,举个例子:
<div class= "test" id= "testId" >
<p><span>Test</span></p>
</div>
<script type= "text/javascript" >
var testElement= document.getElementById( 'testId' );
var element = testElement.querySelector( '.test span' );
var elementList = document.querySelectorAll( '.test span' );
console.log(element); // <span>Test</span>
console.log(elementList); // 1
</script>
按照W3C的来理解,这个例子应该返回:element:null;elementList:[];因为作为baseElement的 testElement里面根本没有符合selectors的匹配子节点;但浏览器却好像无视了baseElement,只在乎selectors,也就是说此时baseElement近乎document;这和我们的预期结果不合,也许随着浏览器的不断升级,这个问题会得到统一口径!
人的智慧总是无穷的,Andrew Dupont发明了一种方法暂时修正了这个怪问题,就是在selectors前面指定baseElement的id,限制匹配的范围;这个方法被广泛的应用在各大流行框架中;
Jquery的实现:
var oldContext = context,
old = context.getAttribute( "id" ),
nid = old || id,
try {
if ( !relativeHierarchySelector || hasParent ) {
return makeArray( context.querySelectorAll( "[id='" + nid + "'] " + query ), extra );
}
}
catch (pseudoError) {}
finally {
if ( !old ) {
oldContext.removeAttribute( "id" );
}
}
先不看这点代码中其他的地方,只看他如何实现这个方法的;这点代码是JQuery1.6的片段;当baseElement没有ID的时候,给他设置一个id = "__sizzle__”,然后再使用的时候加在selectors的前面,做到范围限制;context.querySelectorAll( "[id='" + nid + "'] " + query ;最后,因为这个ID本身不是baseElement应该有的,所以,还需要移除:oldContext.removeAttribute( "id" ); ,Mootools的实现:
var currentId = _context.getAttribute( 'id' ), slickid = 'slickid__' ;
_context.setAttribute( 'id' , slickid);
_expression = '#' + slickid + ' ' + _expression;
context = _context.parentNode;
Mootools和Jquery类似:只不过slickid = 'slickid__';其实意义是一样的;方法兼容性:FF3.5+/IE8+/Chrome 1+/opera 10+/Safari 3.2+;IE 8 :不支持baseElement为object;
querySlector的更多相关文章
- getElementById() getElementsByTagName() getElementsByClassName() querySlector() querySlectorAll()区别
1. getElementById() getElementsByTagName() javascript原生的方法,这两个不会有兼容性问题. 2. getElementsByClassName() ...
- js011-DOM扩展
js011-DOM扩展 本章内容 理解Selecters API 使用HTML5 DOM扩展 了解转悠的DOM扩展 11.1选择符API JS中最常用的一项功能,就是根据css选择符选择与某个模式匹配 ...
- javascript入门知识点总结(一)
学了几天javascript,现总结一下原生javascript的基本知识点. 一.javascript基本知识 变量 定义: var a = 123; var b = 'abc'; //连写 var ...
- python基础整理3——前端
html概述和基本结构 html概述 HTML意思是超文本标记语言 html基本结构 一个html的基本结构如下: <!DOCTYPE html> <html lang=" ...
- JS——两个原生选择器
1. document.querySlector() 2.document.querySlectorAll() <!DOCTYPE html> <html lang="en ...
- 关于JavaScript 基础总结
Dom:document object model 即文档对象模型 Bom: browser object model 即浏览器对象模型 文档对象模型即与文本密切相关,比如document.query ...
- 【JavaScript】JS从入门到深入(复习查漏向
[JavaScript]JS从入门到深入(复习查漏向 pre 精细得学过一遍JS后才发现,原来之前CTF中有些nodejs的题目以及一些游戏题的payload就变得很好理解了. 基础知识 ECMASc ...
随机推荐
- docker - 容器里安装mysql
在docker中安装mysql ubuntu官方镜像是精简的ubuntu系统,很多软件和库没有安装,所以直接安装mysql的话依赖较多,建议直接从源码编译安装mysql 通过命令行安装 先启动一个容器 ...
- SpringMvc拦截器小测试
前言 俗话说做项目是让人成长最快的方案,最近小编写项目的时候遇到了一个小问题.小编在项目中所负责的后台系统,但是后台系统是通过系统的页面是通过ifame联动的,那么这时候问题就来了,后台所做的所有操作 ...
- SVM入门(一)
近来,了解了一下SVM(支持向量机 support vector machine)的原理.顺便把自己理解的内容整理一下. 不讲背景啦,直接切入主题. 一.什么是支持向量机 好比说,我们现在在一 ...
- img图片标签alt和title属性的区别
alt 用于图片没显示图片显示区域显示说明文字title 表示鼠标图片停留显示悬浮框其显示文字
- JSON - Qt 对 JSON的处理
1.关于JSON的介绍参考www.json.org Qt提供处理JSON数据的支持.QJSonObject类用于封装JSON object:QJsonDocument类提供读写JSON文档的方法:QJ ...
- devexpress实现模仿Win8桌面metro风格
1.devexpress强大的控件库,可很容易的实现Win8桌面metro风格.使用的TileControl控件,拖动与Win效果相同.所有图片均来自网络资源.每个块也可实现如图所示的四种大小,如何实 ...
- PHP基础学习(函数一)
PHP(Hypertext Preprocessor):超文本预处理器,一种嵌入在HTML中并且运行在服务器端的脚本语言. var_dump--打印变量相关信息 说明: <?php var_d ...
- iOS 创建一个在退出登录时可以销毁的单例
一.单例简介 单例模式是在软件开发中经常用的一种模式.单例模式通俗的理解是,在整个软件生命周期内,一个类只能有一个实例对象存在. 二.遇到的问题 在平时开发使用单例的过程中,有时候会有这样的需求,在用 ...
- BI数据分析中KPI,KGI,CSF概念
1. 行为产生数据 先来谈一谈,自己对数据基础概念的思考.我认为首先要建立的核心观点是:行为产生数据. 翻译一下这个核心观点.意思就是,当我们在思考或描述数据相关需求的时候,必然要包含这样的语素:&q ...
- 设计理念 : popup login 在前后台
popup 意思是一个遮罩层顶在整个网页最前方,在前台设计是这样的,当用户想在那个界面登入时,就可以有一个遮罩层出现. 在employer或admin(后台)操作界面是同个理念,在所有的界面都是有co ...