querySelector和querySelectorAll
jQuery被开发者如此的青睐和它强大的选择器有很大关系,比起笨重的document.getElementById、document.getElementByName… ,查找元素很方便,其实W3C中提供了querySelector和querySelectorAll查询接口已经实现了类似功能。
定义
其实这两个方法看名字就能明白什么意思,不过还是引用一下W3C的解释
querySelector:return the first matching Element node within the node’s subtrees. If there is no such node, the method must return null .(返回指定元素节点的子树中匹配选择器的集合中的第一个元素,如果没有匹配返回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. (按文档顺序返回指定元素节点的子树中匹配选择器的元素集合,如果没有匹配返回空集合)
从定义可以看到Document和Element都实现了NodeSelector接口。即这三种类型的元素都拥有者两个方法。querySelector和querySelectorAll的参数是CSS选择器字符串。区别在于querySelector返回的是一个第一个匹配元素,querySelectorAll返回的一个所有匹配元素集合(NodeList)。
用法
如果使用过jQuery或者了解CSS,这两个方法使用很简单,传入选择器即可
<div id="test">
<div class="dialog">
<p>
123</p>
<span>456</span>
<div>
789</div>
<div class="text">
452</div>
</div>
</div>
var test=document.querySelector('#test');
var subDivs = test.querySelectorAll('div');
var text = document.querySelectorAll('div[class=text]');
缺陷及解决办法
确实很好用,但是浏览器对Element.querySelector和Element.querySelectorAll的实现有错误,看个例子
<div id="test">
<p>
<span>123</span>
</p>
</div>
var test=document.querySelector('#test');
var span = test.querySelectorAll('div span');
按照我们的理解span因该是搜索test内部祖先元素为div的span元素,但是其祖先必须在test内部,而不能包括test本身甚至test的父元素,所以应该返回空基赫才对,但是浏览器会返回
大神Andrew Dupont提出了一种方法修复这个bug,被广泛应用到各个框架中,在selector前面指定调用元素的id,限制匹配范围。在jQuery中大概是这么个意思
var span, selector = 'div span',context=document.querySelector('#test'); var oldContext = context,
oldId = context.getAttribute('id'),
newId = oldId || '__sizzle__';
try {
span= context.querySelectorAll('#'+newId+' '+selector);
} catch (e) { } finally {
if (!oldId) {
oldContext.removeAttribute('id');
}
}
这样做其实是给搜索加了一层id的限制,巧妙的利用了这个bug,得到正确结果
浏览器兼容性
虽然有些问题,但瑕不掩瑜,这么好用的两个方法咋没火呢?浏览器兼容性。。。其实比起一些HTML5和CSS3的特性来说这两个方法还没那么让人绝望,因为IE8都已经支持了,其它各个主力主流浏览器自然是实现了。
IE8+
Firefox
Chrome
Safari
Opera
Android
所以骚年们如果你是针对Mobile web优化,不要引用jQuery了,直接使用这两个方法吧
querySelector和querySelectorAll的更多相关文章
- javascript选择器querySelector和querySelectorAll的使用和区别
querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...
- js高级选择器querySelector和querySelectorAll
querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...
- js的querySelector跟querySelectorAll
querySelector:document.querySelector('.className')------->可以选中.className的一个dom(注意只是一个) document.q ...
- document.querySelector和querySelectorAll方法
querySelector和querySelectorAll是W3C提供的新的查询接口,其主要特点如下: 1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null. 2.q ...
- 跟随标准与Webkit源码探究DOM -- 获取元素之querySelector,querySelectorAll
使用CSS选择器获取元素 -- querySelector,querySelectorAll(HTML5) 标准 W3C Selector API Level 1为Document,DocumentF ...
- 重要选择器querySelector和querySelectorAll
他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏览器均支持了他们.包括 IE8(含) 以上版本. Firefox. Chrome.Safari.Opera. queryS ...
- 高级选择器querySelector和querySelectorAll
Javascript新提供的querySelector和querySelectorAll方法,是仿照CSS选择器功能编写的 querySelector 功能:该方法返回满足条件的单个元素.按照深度优先 ...
- HTML5中querySelector()和querySelectorAll()
HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的选择器 ...
- querySelector 和 querySelectorAll 的使用
querySelector 和 querySelectorAll 的使用非常的简单,就像标题说到的一样,它和 CSS 的写法完全一样,对于前端开发人员来说,这是难度几乎为零的一次学习.假如我们有一个 ...
随机推荐
- Qt Qwt之坐标轴移动
最近接触到个pro需要做到这方面,于是找了相关材料,也跟好些人讨论,目前就最简单的使用方法,通过按钮触发去控制 X,Y轴的移动,比例自己定义 这个是X轴放大的 QwtInterval tempInte ...
- group_concat函数详解
来自: http://hchmsguo.iteye.com/blog/555543 MySQL中group_concat函数 完整的语法如下: group_concat([DISTINCT] 要连接的 ...
- innodb的存储结构
如下所示,innodb的存储结构包含:表空间,段,区,页(块),行 innodb存储结构优化的标准是:一个页里面存放的行数越多,其性能越高 表空间:零散页+段 独立表空间存放的是:数据.索引.插入缓冲 ...
- backbone框架思路
Backbone是MVC框架.如何使用这个框架来简化前端过程呢?作为一个初学者,虽然网上有它的官方文档,但是都是讲的一些方法,思路分析的却对初学者来说,看得晕乎乎的.现在就把自己对这个框架的理解记录在 ...
- socket 通信
type TWinSocketStringStream = class(TWinSocketStream) public function ReadString(nMaxLength: Integer ...
- Python基于pandas的数据处理(一)
import pandas as pd, numpy as np dates = pd.date_range(', periods=6) df = pd.DataFrame(np.random.ran ...
- iscroll5 上拉,下拉 加载数据
我这里的思路是上拉时候只是加载第一页的内容,可根据实际情况修改其中的代码.请勿照搬.样式没怎么调,可以加载gif动画.1.没有数据时候,下拉可以加载数据.2.没有数据时候,点击也可以加载数据.3.其余 ...
- Object-C内存管理-对象引用计数的特例
看到OC中内存管理这块,其中的引用计数部分,部分10.5上的EBOOK示例已经在10.9上不能运行正确了,比如下面的代码: NSString * str1 = @"string 1" ...
- bochs上网及配置
下载并安装bochs2.6:(不能是更高版本) 创建bochs 时注意勾选Dlx linux Demo,但是其文件bochsrc.bxrc中无Ne2k网卡选项,这一段要自己添加,详情见后. 先确定我们 ...
- usage of elinks (命令行下的firefox)
No.0 Press "Esc" to show main menu ============================================= No.1 tyep ...