365bet亚洲版登录-bet官网365入口

365bet亚洲版登录拥有超过百间客房,bet官网365入口的文化历经几十年的传承和积淀形成的核心内容获得业界广泛的认可,365bet亚洲版登录是目前信誉最高的娱乐场所,同国内外几百家网上内容供应商建立了合作关系。

DOM成分querySelectorAll大概令你想不到的特征表现

DOM成分querySelectorAll大概让您想不到的风味表现

2015/11/07 · HTML5 · DOM, querySelectorAll

原作出处: 张鑫旭   

一、时间急迫,废话少说

本文所在的页面藏匿了上面那个代码:

<img id="outside"> <div id="my-id"> <img id="inside"> <div class="lonely"></div> <div class="outer"> <div class="inner"></div> </div> </div>

1
2
3
4
5
6
7
8
<img id="outside">
<div id="my-id">
    <img id="inside">
    <div class="lonely"></div>
    <div class="outer">
        <div class="inner"></div>
    </div>
</div>

正是上面那样的显现(为了便利阅览,笔者加了边框背景观和文字):

图片 1

先是说点大家都精通的热热身。

  • querySelectorquerySelectorAll IE8+浏览器扶助。
  • querySelector回去的是单个DOM成分;querySelectorAll重临的是NodeList.
  • 咱俩经常用的多的是document.querySelectorAll, 实际上,也支持dom.querySelectorAll.例如:
JavaScript

document.querySelector("#my-id").querySelectorAll("img")

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f2fbc48034065158916-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f2fbc48034065158916-1" class="crayon-line">
document.querySelector(&quot;#my-id&quot;).querySelectorAll(&quot;img&quot;)
</div>
</div></td>
</tr>
</tbody>
</table>

挑选的正是里面那么些妹子。举个例子,作者在决定台出口该选取NodeList的长度和id,如下截图:
图片 2

好了,上边都以众人周知的,好,上边早先体现点风趣的。

世家看下上边2行轻便的查询语句:

JavaScript

document.querySelectorAll("#my-id div div");

1
document.querySelectorAll("#my-id div div");

JavaScript

document.querySelector("#my-id").querySelectorAll("div div");

1
document.querySelector("#my-id").querySelectorAll("div div");

图片 3

咨询:上面四个语句重临的NodeList的剧情是还是不是是同样的?

给我们1分钟的小运思索下。

//zxx: 要是1分钟已经过去了

好了,答案是:不等同的。估算不菲人跟小编同一,会感觉是一模二样的。

实际上:

JavaScript

document.querySelectorAll("#my-id div div").length === 1;

1
document.querySelectorAll("#my-id div div").length === 1;

JavaScript

document.querySelector("#my-id").querySelectorAll("div div").length === 3;

1
document.querySelector("#my-id").querySelectorAll("div div").length === 3;

世家只要有疑点,能够在调整台测验下,下图正是本人要好测量检验的结果:

图片 4

为啥会如此?

率先个相符我们的领会,不表达。那下二个言语,为什么重临的NodeList长度是3呢?

首先,遍历该NodeList会意识,查询的多个dom成分为:div.lonelydiv.outerdiv.inner.

意外,奇异,怎会是3个吗?

jQuery中有个find()主意,我们很可能遇到那些点子影响,导致现身了有个别体会的标题:

JavaScript

$("#my-id").find("div div").length === 1;

1
$("#my-id").find("div div").length === 1;

借使使用find方法,则是1个相当;由于协会和效率类似,大家很自然疑问原生的querySelectorAll也是以此套路。真是太错特错!!

要解释,为何NodeList长度是3,只要一句话就能够了,小编特意加粗标红:

CSS选拔器是单独于整个页面包车型客车!

如何意思啊?举个例子说你在页面很深的七个DOM里面写上:

<style> div div { } </style>

1
2
3
<style>
div div { }
</style>

 

万事网页,包涵父级,只倘诺知足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语句中动用:

JavaScript

document.querySelector("#my-id").querySelectorAll(":scope div div");

1
document.querySelector("#my-id").querySelectorAll(":scope div div");

宽容性如下:

图片 5

自个儿写此文时候是15年二月首,近日大概就FireFox浏览器辅助,作者预计,今后,会援救更增添的。为何吗?

因为Web Components需求它,能够完毕真正独立包装,不会受外部影响的HTML组件。

关于:scope当下支持尚浅,机缘未到,笔者就没供给乱张开了,点到甘休。

三、结语依然要的

参照他事他说加以考察文章:querySelectorAll from an element probably doesn’t do what you think it does

谢谢阅读,款待纠错,欢迎沟通!

1 赞 1 收藏 评论

图片 6

本文由365bet亚洲版登录发布于 Web前端,转载请注明出处:DOM成分querySelectorAll大概令你想不到的特征表现

您可能还会对下面的文章感兴趣: