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的更多相关文章

  1. javascript选择器querySelector和querySelectorAll的使用和区别

    querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...

  2. js高级选择器querySelector和querySelectorAll

    querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...

  3. js的querySelector跟querySelectorAll

    querySelector:document.querySelector('.className')------->可以选中.className的一个dom(注意只是一个) document.q ...

  4. document.querySelector和querySelectorAll方法

    querySelector和querySelectorAll是W3C提供的新的查询接口,其主要特点如下: 1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null.  2.q ...

  5. 跟随标准与Webkit源码探究DOM -- 获取元素之querySelector,querySelectorAll

    使用CSS选择器获取元素 -- querySelector,querySelectorAll(HTML5) 标准 W3C Selector API Level 1为Document,DocumentF ...

  6. 重要选择器querySelector和querySelectorAll

    他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏览器均支持了他们.包括 IE8(含) 以上版本. Firefox. Chrome.Safari.Opera. queryS ...

  7. 高级选择器querySelector和querySelectorAll

    Javascript新提供的querySelector和querySelectorAll方法,是仿照CSS选择器功能编写的 querySelector 功能:该方法返回满足条件的单个元素.按照深度优先 ...

  8. HTML5中querySelector()和querySelectorAll()

    HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的选择器 ...

  9. querySelector 和 querySelectorAll 的使用

    querySelector 和 querySelectorAll 的使用非常的简单,就像标题说到的一样,它和 CSS 的写法完全一样,对于前端开发人员来说,这是难度几乎为零的一次学习.假如我们有一个 ...

随机推荐

  1. Spring IOC 注入方式

    依赖注入通常有如下两种方式: ①设值注入:IOC容器使用属性的Setter方法来注入被依赖的实例. 设值注入是指IOC容器使用属性的Setter方法来注入被依赖的实例.这种注入方式简单.直观,因而在S ...

  2. Java 类反射机制分析

    Java 类反射机制分析 一.反射的概念及在Java中的类反射 反射主要是指程序可以访问.检测和修改它本身状态或行为的一种能力.在计算机科学领域,反射是一类应用,它们能够自描述和自控制.这类应用通过某 ...

  3. app启动速度

    跟踪代码发现,应用启动时的白屏会持续到draw调用完成,这个过程中任何耗时操作将导致白屏时间增长. 1.adb shell am start -W -n yourpakagename/MainActi ...

  4. Html/Css(新手入门第三篇)

    一.学习心得---参考优秀的网页来学习. 1我们只做的静态网页主要用的技术?html+css 只要网上看到的,他的源代码公开的.[1].先去分析,他们页面是如何布局(结构化)[2].再试着去做一下,- ...

  5. ubuntu 安装JAVA jdk的两种方法:

    ubuntu 安装jdk 的两种方式: 1:通过ppa(源) 方式安装. 2:通过官网下载安装包安装. 这里推荐第1种,因为可以通过 apt-get upgrade 方式方便获得jdk的升级 使用pp ...

  6. 使用extjs6官方模板admin-dashboard

    1.生成项目: sencha generate app -s templates/admin-dashboard/ Dashboard ../my-folder 2.修改app.json的output ...

  7. knapsack problem 背包问题 贪婪算法GA

    knapsack problem 背包问题贪婪算法GA 给点n个物品,第j个物品的重量,价值,背包的容量为.应选哪些物品放入包内使物品总价值最大? 规划模型 max s.t. 贪婪算法(GA) 1.按 ...

  8. Ubuntu搭建Ruby on Rails环境

    安装Ruby 由于Ubuntu的apt包管理器的ruby版本过旧,故考虑从源码编译安装.这里以安装ruby2.3.0为例: sudo apt-get install build-essential z ...

  9. GCD in Swfit 3.0

    这里包括了Queue, Group, Barrier, Semaphore等内容.基本上常用的GCD对象和方法在Swift3.0的改变都囊括其中. 代码在这里:https://github.com/f ...

  10. [ImportNew] Perforce - Restoring Mistakenly Deleted Files in Workspace

    Shit happens when you accidentally delete some files in your workspace and you have no ideas which o ...