扫描二维码,下载手机APP
下载安卓APP箭头
客服QQ
箭头给我发消息

客服QQ:3315713922
论坛 >编程语言 >DOM元素querySelectorAll可能让你意外的特性表现

DOM元素querySelectorAll可能让你意外的特性表现

希尔瓦娜斯发布于 2017-12-19 10:01查看:9645回复:1

        一、时间紧急,废话少说

        本文所在的页面藏匿了下面这些代码:

image.png

        就是下面这样的表现(为了便于观察,我加了边框背景色和文字):

image.png

        首先说点大家都知道的热热身。

            querySelectorquerySelectorAll IE8+浏览器支持。

            querySelector返回的是单个DOM元素;querySelectorAll返回的是NodeList.

            我们一般用的多的是document.querySelectorAll, 实际上,也支持dom.querySelectorAll.例如:

image.png


        选择的就是里面这个妹子。例如,我在控制台输出该选择NodeList的长度和id,如下截图:

image.png

        

        好了,上面都是众所周知的,好,下面开始展示点有意思的。

        大家看下下面2行简单的查询语句:

image.png

image.png

image.png

        实际上:

image.png

image.png

image.png

    第一个符合我们的理解,不解释。那下一个语句,为何返回的NodeList长度是3呢?

    首先,遍历该NodeList会发现,查询的三个dom元素为:div.lonelydiv.outerdiv.inner.

    奇怪,奇怪,怎么会是3个呢?

    jQuery中有个find()方法,大家很可能受到这个方法影响,导致出现了一些认知的问题:

image.png

        如果使用find方法,则是1个匹配;由于结构和作用类似,我们很自然疑问原生的querySelectorAll也是这个套路。真是太错特错!!

        要解释,为何NodeList长度是3,只要一句话就可以了,我特意加粗标红:

        CSS选择器是独立于整个页面的!

        什么意思呢?比如说你在页面很深的一个DOM里面写上:

image.png

        整个网页,包括父级,只要是满足div div父子关系的元素,全部会被选中,对吧,这个大家应该都清楚的。

        这里的querySelectorAll里面的选择器也同样是这也全局特性。document.querySelector("#my-id").querySelectorAll("div div")翻译成白话文就是:查询#my-id的子元素,同时满足整个页面下div div选择器条件的DOM元素们。

        我们页面往上滚动看看原始的HTML结构,会发现,在全局视野下,div.lonelydiv.outerdiv.inner全部都满足div div这个选择器条件,于是,最终返回的长度为3.

        二、:scope与区域选择限制

        其实,要想querySelectorAll后面选择器不受全局影响,也是有办法的,就是使用目前还处于实验阶段的:scope伪类,其作用就是让CSS是在某一范围内使用。此伪类在CSS中使用是大头,但是也可以在querySelectorAll语句中使用:

image.png

        兼容性如下:

image.png


收藏(0)0
查看评分情况

全部评分

此主贴暂时没有点赞评分

总计:0

回复分享

版主推荐

    共有1条评论

    • 课课家运营团队
    • Mr ken
    • YUI
    • cappuccino
    • mr jack
    • IT宅男
    • Mright
    • 课课家软考1
    • 选择版块:

    • 标题:

    • 内容

    • 验证码:

    • 标题:

    • 内容

    • 选择版块:

    移动帖子x

    移动到: