在HTML5中，提供了强大的DOM元素选择API querySelector/querySelectorAll，允许使用JavaScript代码来完成类似CSS选择器的DOM元素选择功能。通常情况下，我们都是使用的document.querySelector/querySelectorAll来选择DOM元素，但是有些时候会使用DOM元素上的querySelector/querySelectorAll方法，此时就有些怪异了。

比如说，下面的这样一个HTML页面（示例页面中为了方面说明问题，我为每个元素都加上了ID，但是我们不使用ID选择器来选择元素）：

 <body>

     <span id="s0">This is a span direct child of body</span>

     <div id="d1" style="border: 1px solid red;">

         This is div d1

         <div id="d1-1" style="border: 1px solid blue;">

             This is div d1-1 <br/>

             <span id="d1-1-1">This span d1-1-1</span>

         </div>

         <span id="d1-2">This is span d1-2</span>

     </div>

 </body>

在这个场景中，元素div#d1有2个子元素，分别是div#d1-1和span#d1-2，而元素div#d1-1有一个span#div-1-1-1的子元素。如果我想从div#d1上选择span#d1-1-1，如果使用子元素选择器的话，在jQuery中看起来应该是这样的：

$("#d1").find("div > span")

这段代码会返回span#d1-1-1，就是我们预期的结果。

那么对应到HTML5中的选择器API就应该是这样写的：

var d1 = document.querySelector("#d1");

var spans = d1.querySelectorAll("div > span")

你期望上面这段代码会返回span#d1-1-1，但是实际上的运行结果会连同span#d1-1一并返回！如下图所示：

这个……实在是让我迷惑了一阵子。查阅了一下文档，虽然没有找到官方的说明，但是也基本明白了DOM元素的querySelector和querySelectorAll的运行逻辑了。

当在一个DOM元素上调用querySelector/querySelectorAll的时候，查找机制是这样的：首先在document的范围内进行查找所有满足选择器条件的元素，在上面这段代码中，我们的选择器是div > span，就是所有的直接父元素为div的span元素。然后，再看哪些元素是调用querySelector/querySelectorAll的元素的子元素，这些元素将会被返回。这也就说明了为什么d1.querySelectorAll("div > span") 会连同span#d1-2一并返回。

所以，在DOM元素上调用querySelector/querySelectorAll的时候要小心，最好加上ID选择器进行一个限定，例如上面的代码可以写成：

d1.querySelectorAll("#d1 > div > span");

就会准确的返回我们预期的span#d1-1-1了（当然是这样了，否则就更加的错了！）。

在W3C官方文档中，有提到使用:context （现已更名为:scope）伪类来限制选择器开始工作的上下文，也就是说，可以这样写：

d1.querySelectorAll(":scope > div > span");

但是实际测试的结果是 Safari 6.0.4 和 Chrome 27 统统没有按照预期工作，因为W3C也说了，这个不是标准的。

总结一下，在DOM元素上使用querySelector/querySelectorAll的行为说实话有点儿奇怪，他并不是按照你的预期或者jQuery那种大家都已经习惯了的思路来处理的，所以，有时候可能碰巧你能够获取到正确的结果集，有时候就不是你期望的结果集，这个和你的页面DOM元素的结构和你所使用的选择器都有关系。知道了这个工作原理之后，就不会再发生莫名其妙的问题了。

HTML5中DOM元素的querySelector/querySelectorAll的工作机制的更多相关文章

  1. javascript DOM操作之 querySelector,querySelectorAll

    javascript DOM操作之 querySelector,querySelectorAll

  2. html5中output元素详解

    html5中output元素详解 一.总结 一句话总结: output元素是HTML5新增的元素,用来设置不同数据的输出,没什么大用,了解即可 <form action="L3_01. ...

  3. html5中section元素详解

    html5中section元素详解 一.总结 一句话总结: section元素 用来定义文章中的章节(通常应该有标题和段落内容) section元素的作用就是给内容分段,给页面分区 1.section ...

  4. html5中time元素详解

    html5中time元素详解 一.总结 一句话总结: time的使用的话主要是将时间放在datetime属性里面:<time datetime="2015-10-22"> ...

  5. HTML5中dialog元素尝鲜

    对话框(别称模态框,浮层)是web项目中用于用户交互的重要部分,我们最常见的就是js中 alert(),confirm(),但是这个对话框的不美观,也不能自定义样式,所以在开发的过程中,一般根据自己自 ...

  6. jquery中dom元素的attr和prop方法的理解

    一.背景 在编写使用高版本[ jQuery 1.6 开始新增了一个方法 prop()]的jquery插件进行编写js代码的时候,经常不知道dom元素的attr和prop方法到底有什么区别?各自有什么应 ...

  7. 【HTML5】HTML5中video元素事件详解（实时监测当前播放时间）

    html 代码..video后边几个元素,可处理ios 系统的兼容性 <video id="myVideo" controls="controls" po ...

  8. 详解JS中DOM 元素的 attribute 和 property 属性

    一.'表亲戚':attribute和property 为什么称attribute和property为'表亲戚'呢?因为他们既有共同处,也有不同点. attribute 是 dom 元素在文档中作为 h ...

  9. 笔记：HTML5中input元素新增的type值

    在HTML5中,input元素的type值增加了不少,使input的功能强大了很多. 但在各大浏览器中并不是所有的type值都支持. 以下是比较有用.并且浏览器支持的稍好一些的值: type=colo ...

随机推荐

  1. 【重走Android之路】【Java面向对象基础（二）】细说String、StringBuffer和StringBuilder

    [重走Android之路][基础篇(二)][Java面向对象基础]细说String.StringBuffer和StringBuilder   1.String String是Java中的一个final ...

  2. 求1+2+…+n，要求不能使用乘除法、for、while、if、else、s witch、case 等关键字以及条件判断语句（A?B:C）和不用循环/goto/递归输出1~100的10种写法

    来源:据说是某一年某个公司的面试题 题目:求1+2+…+n, 要求不能使用乘除法.for.while.if.else.s witch.case 等关键字以及条件判断语句(A?B:C) 分析:这题本来很 ...

  3. JVM的相关知识整理和学习--(转载)

    JVM是虚拟机,也是一种规范,他遵循着冯·诺依曼体系结构的设计原理.冯·诺依曼体系结构中,指出计算机处理的数据和指令都是二进制数,采用存储程序方式不加区分的存储在同一个存储器里,并且顺序执行,指令由操 ...

  4. linux 系统 tar 的用法详解

    [root@localhost xu]# tar --help 用法: tar [选项...] [FILE]... GNU ‘tar’ 将许多文件一起保存至一个单独的磁带或磁盘归档,并能从归档中单独还 ...

  5. 利用SOLR搭建企业搜索平台 之——配置文件

    运行solr是个很简单的事,如何让solr高效运行你的项目,这个就不容易了.要考虑的因素太多.这里很重要一个就是对solr的配置要了解.懂得配置文件每个配置项的含义,这样操作起来就会如鱼得水! 在so ...

  6. How to install cacti With Nginx

    转载于:https://github.com/blackyboy/Ubuntu-Linux-Stuffs/blob/master/How-to-install-Cacti-Monitoring-Ser ...

  7. NDK(10)Android.mk各属性简介，Android.mk 常用模板

    参考 : http://blog.csdn.net/hudashi/article/details/7059006 本文内容: Android.mk简介, 各属性表, 常用Android.mk模板 1 ...

  8. leetcode：Add Two Numbers

    题目描述:You are given two linked lists representing two non-negative numbers. The digits are stored in ...

  9. WinCE5.0中文模拟器SDK(VS2005)的配置

    WinCE5.0中文模拟器SDK的安装过程不细说了,一路默认即可,下面主要介绍如何配置,使其能在VS2005中正常使用. 安装完成后,打开VS2005,点击菜单“工具”——“选项”——“设备工具”—— ...

  10. POJ (线段树) Who Gets the Most Candies?

    这道题综合性挺强的,又牵扯到数论,又有线段树. 线段树维护的信息就是区间中有多少个人没跳出去,然后计算出下一个人是剩下的人中第几个. 我在这调程序调了好久,就是那个模来模去的弄得我头晕. 不过题确实是 ...