本文所在的页面藏匿了下面这些代码:
就是下面这样的表现(为了便于观察,我加了边框背景色和文字):
首先说点大家都知道的热热身。
querySelector
和querySelectorAll
IE8+浏览器支持。
querySelector
返回的是单个DOM元素;querySelectorAll
返回的是NodeList
.
我们一般用的多的是document.querySelectorAll
, 实际上,也支持dom.querySelectorAll
.例如:
选择的就是里面这个妹子。例如,我在控制台输出该选择NodeList
的长度和id
,如下截图:
好了,上面都是众所周知的,好,下面开始展示点有意思的。
大家看下下面2行简单的查询语句:
实际上:
第一个符合我们的理解,不解释。那下一个语句,为何返回的NodeList
长度是3
呢?
首先,遍历该NodeList
会发现,查询的三个dom元素为:div.lonely
, div.outer
, div.inner
.
奇怪,奇怪,怎么会是3个呢?
jQuery中有个find()
方法,大家很可能受到这个方法影响,导致出现了一些认知的问题:
如果使用find
方法,则是1
个匹配;由于结构和作用类似,我们很自然疑问原生的querySelectorAll
也是这个套路。真是太错特错!!
要解释,为何NodeList
长度是3
,只要一句话就可以了,我特意加粗标红:
CSS选择器是独立于整个页面的!
什么意思呢?比如说你在页面很深的一个DOM里面写上:
整个网页,包括父级,只要是满足div div
父子关系的元素,全部会被选中,对吧,这个大家应该都清楚的。
这里的querySelectorAll
里面的选择器也同样是这也全局特性。document.querySelector("#my-id").querySelectorAll("div div")
翻译成白话文就是:查询#my-id
的子元素,同时满足整个页面下div div
选择器条件的DOM元素们。
我们页面往上滚动看看原始的HTML结构,会发现,在全局视野下,div.lonely
, div.outer
, div.inner
全部都满足div div
这个选择器条件,于是,最终返回的长度为3
.
其实,要想querySelectorAll
后面选择器不受全局影响,也是有办法的,就是使用目前还处于实验阶段的:scope
伪类,其作用就是让CSS是在某一范围内使用。此伪类在CSS中使用是大头,但是也可以在querySelectorAll
语句中使用:
兼容性如下: