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

DOM成分querySelectorAll恐怕让您意外的风味表现

2015/11/07 · HTML5 ·
DOM,
querySelectorAll

原来的小讲出处:
张鑫旭   

1: dom对象的innerText和innerHTML有怎么着界别

innerText:
透过innerText读取值时,它会遵守鲁人持竿的逐个将子文档树中的全部子文本节点拼接起来。在写入值时,会删除成分的有所字节点,插入包罗文本节点与相应的文本值。

innerHTML:
在读形式下,innerHTML重临调用成分的全数子节点(富含成分,注释,文本节点)的对应html标签。在写方式下,innerHTML会基于钦点的值
创设新的DOM树,然后新建的DOM树会完全替换调用成分之前的全数子节点。

一、时间迫切,废话少说

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

<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.

2: elem.children和elem.childNodes的区别

elem.children:它回到钦命成分的子成分群集,只回去html节点,不回去文本节点。
elem.childNodes:它是正规属性,重临内定成分的子成分集合,包罗HTML节点,全数属性,文本节点。

二、: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年3月底,如今大概就FireFox浏览器援助,笔者揣度,现在,会支持越来越多的。为啥呢?

因为Web
Components供给它,可以完结真正独立包装,不会受外部影响的HTML组件。

关于:scope脚下辅助尚浅,时机未到,作者就没要求乱打开了,点到结束。

3:查询成分有二种常见的措施?ES5的要素采纳格局是怎样?

询问元素
1.document.getElementsByTagName方法重临全部内定HTML标签的要素,再次来到结果中,各种成员的各种正是它们在文书档案中出现的逐一。
2.document.getElementsByClassName方法重返一个好像数组的指标,包涵了具有class名字相符钦点条件的成分。
3.document.getElementsByName艺术用于选用具备name属性的HTML成分,如<form>、<img>等。
4.getElementById方法重临相称钦定id属性的成分节点。

//返回当前文档的所有p元素节点
var els = document.getElementsByTagName('td');
//返回所有class=classname的所有元素。
var els = document.getElementsByClassName('classname');
//返回name属性为name的所有元素。
var els = document.getElementsByName('name');
//返回id为xxx元素。
var el = document.getElementById('xxx');

ES5的要素采纳情势:
1.document.querySelector主意接受叁个CSS选择器作为参数,重临相称该采用器的因上秋点。借使有多个节点满意匹配原则,则赶回第一个地位极其的节点。
2.document.querySelectorAll主意重回全部相配给定选用器的节点。

// 返回当前文档中第一个类名为 "myclass" 的元素
var el = document.querySelector(".myclass");

// 返回一个文档中所有的class为"xx"或者 "xxx"的div元素
var els = document.querySelectorAll(".xx, .xxx");

发表评论

电子邮件地址不会被公开。 必填项已用*标注