深入理解querySelector(All)
var elem = document.getElementById("test"),
frag = document.createDocumentFragment();
frag.appendChild(document.createElement("div"));
elem.querySelector("p");// Element, querySelectorAll
document.querySelector("div");// Document, querySelectorAll
document.body.querySelector("div");// querySelectorAll
frag.querySelector("div");// documentFragment, querySelectorAll
方法接收唯一的一个参数，该参数可为任意合法的CSS选择器字符串。不过在IE8下，对于大部分的CSS3选择器都不支持（只支持相邻兄弟element1~element2；属性选择器[attr^=val], [attr$=val],[attr*=val]）。除此之外，如果想要在IE8下使用伪元素选择器，需要用:，而不是CSS3规定的::（css3选择器的浏览器支持参考：http://caniuse.com/#search=nth-of-type）。
Selectors API返回的内容是静态的NodeList，而非实时更新的NodeList，这和get系列（早期的chrome等浏览器返回的是NodeList，现在已经改为HTMLCollection实例。NodeList和HTMLCollection最大的不同就是NodeList可包括文本、注释等非元素节点，而HTMLCollection只包括元素节点）、document.images返回动态的集合（HTMLCollection）以及childNodes(NodeList)是不一样的。
Selectors API虽然好用，不过在使用的时候还是需要注意一些问题。以下面代码为例：
<body>
<div id="test"><p>test</p></div>
</body>
var ele = document.getElementById("test");
ele.querySelector("div p").length; // A
jQuery(ele).find("div p").length; // B
ele.querySelector("body p").length; // C
jQuery(ele).find("body p").length; // D
对于代码A，返回值为1,；代码B，返回值为0。代码C，返回值仍为1；代码D，返回值为0。（结果适用于所有支持Selectors API的浏览器）
对于习惯使用jQuery的人来说，上面的结果可能有点接受不了。不过在规范中明确写明：
Even though the method is invoked on an element, selectors are still evaluated in the context of the entire document. In the following example, the method will still match the
divelement's childpelement, even though thebodyelement is not a descendant of thedivelement itself.var div = document.getElementById("bar");
var p = div.querySelector("body p");
// qSA works strangely on Element-rooted queries
// We can work around this by specifying an extra ID on the root
// and working up from there (Thanks to Andrew Dupont for the technique)
// IE 8 doesn't work on object elements
} else if ( context.nodeType === 1 && context.nodeName.toLowerCase() !== "object" ) {
var old = context.id, id = context.id = "__sizzle__"; try {
return makeArray( context.querySelectorAll( "#" + id + " " + query ), extra ); } catch(pseudoError) {
} finally {
if ( old ) {
context.id = old; } else {
context.removeAttribute( "id" );
}
}
}
不过，如果文档中真的有的元素id为“__sizzle__”，这个方法应该就会悲剧了。
在zepto中，并没有针对elem使用querySelector（All）时的特殊处理，So：
<!DOCTYPE html>
<html>
<head>
<script src="http://zeptojs.com/zepto.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="a"><div><p></p></div></div>
</body>
<script>
var ele = Zepto("#a").find("body div div p");
alert(ele.length); // 1
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="a"><div><p></p></div></div>
</body>
<script>
var ele =document.getElementById("a").querySelectorAll("*");
var chd = document.getElementById("a").childNodes;
alert(ele.querySelectorAll); // undefined
alert(chd.querySelectorAll); // undefined
</script>
</html>
深入理解querySelector(All)的更多相关文章
- 深入理解javascript选择器API系列第三篇——h5新增的3种selector方法
× 目录 [1]方法 [2]非实时 [3]缺陷 前面的话 尽管DOM作为API已经非常完善了,但是为了实现更多的功能,DOM仍然进行了扩展,其中一个重要的扩展就是对选择器API的扩展.人们对jQuer ...
- HTML5中类jQuery选择器querySelector的使用
简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的 ...
- javascript选择器querySelector和querySelectorAll的使用和区别
querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...
- querySelector和querySelectorAll
jQuery被开发者如此的青睐和它强大的选择器有很大关系,比起笨重的document.getElementById.document.getElementByName… ,查找元素很方便,其实W3C中 ...
- 原生的强大DOM选择器querySelector
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
- 深入理解JavaScript 事件
本文总结自<JavaScript高级程序设计>以及自己平时的经验,针对较新浏览器以及 DOM3 级事件标准(2016年8月),对少部分内容作了更正,增加了各种例子及解析. 如无特殊说明,本 ...
- 新增的querySelector、querySelectorAll测试
从IE9开始DOM开始支持支持CSS的选择器了,DOM提供了两个接口 querySelector 得到一个DOM querySelectorAll 得到一组DOM 一个个的解释这些选择器也没有必要,我 ...
- HTML5中querySelector()和querySelectorAll()
HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的选择器 ...
- 理解JavaScript中的事件路由冒泡过程及委托代理机制
当我用纯CSS实现这个以后.我开始用JavaScript和样式类来完善功能. 然后,我有一些想法,我想使用Delegated Events (事件委托)但是我不想有任何依赖,插入任何库,包括jQuer ...
随机推荐
- Android SHA1与Package获取方式
获取应用包名 打开Android 应用工程的 AndroidManifest.xml配置文件,package 属性所对应的内容为应用包名. 如下图所示,红框中的内容: 获取 Sha1 值 开发模式(d ...
- Guava Collect
Guava是什么 进入新公司就会接触一些新的东东,Guava就是一个,Guava是Google的一个开源类库,丰富了JDK的API,并且使用起来非常方便,本文介绍的是Guava collect包下的一 ...
- UVa 340 Master-Mind Hints (优化查找&复制数组)
340 - Master-Mind Hints Time limit: 3.000 seconds http://uva.onlinejudge.org/index.php?option=com_on ...
- 05-图2. Saving James Bond - Easy Version (25)
1 边界和湖心小岛分别算一个节点.连接全部距离小于D的鳄鱼.时间复杂度O(N2) 2 推断每一个连通图的节点中是否包括边界和湖心小岛,是则Yes否则No 3 冗长混乱的函数參数 #include &l ...
- JAVA 多线程同步与互斥
1. 为什么需要互斥: 互斥操作 保证了 多线程操作的 原子性 , java的 互斥 语义 有 synchronized 关键字 提供. 主要方式 有 同步代码块 和 同步方法 两种 2. ...
- linux sudo环境变量设置
这是第一次在博客园中写自己的随笔,也是第一次使用Markdown的编辑环境,值得纪念一下!希望在以后学习linux的道路上能多多记录自己的学习心得和遇到问题的解决方法,朝着运维的方向迈出坚实的脚步. ...
- nyoj 756 重建二叉树
重建二叉树主要是给你一颗二叉树的前序遍历的结果和中序遍历的结果或者后序遍历的结果或者中序遍历的结果,让你求出其中的后序遍历的结果或者前序遍历的结果,这里知道其中的两个就能求出第三个,但是知道的两个必须 ...
- #include<iostream.h>与#include<iostream> using namespace std的区别
所谓namespace,是指标识符的各种可见范围.C++标准程序库中的所有标识符都被定义于一个名为std的namespace中. 一 :<iostream>和<iostream.h ...
- Android-Eclipse汉化
首先下载好汉化包 解压后得到eclipse文件夹 然后在eclipse根目录下创建language文件夹 将eclipse文件夹放入 在eclipse根目录下创建links文件夹 然后在里面添加这个文 ...
- (转)javascript中return的作用
这里面的return含有一些细节知识: 例如:onClick='return add_onclick()'与 onClick='add_onclick()'的区别 JAVASCRIPT在事件中调用函数 ...