图片 14

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

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

2015/11/07 · HTML5 ·
DOM,
querySelectorAll

初藳出处:
张鑫旭   

1: dom对象的innerText和innerHTML有啥样差距

innerText:
通过innerText读取值时,它会遵照由表及里的朝气蓬勃风流倜傥将子文书档案树中的全体子文本节点拼接起来。在写入值时,会删除成分的具备字节点,插入包罗文本节点与相应的文本值。

innerHTML:
在读格局下,innerHTML再次来到调用元素的全数子节点(包涵成分,注释,文本节点卡塔 尔(阿拉伯语:قطر‎的照望html标签。在写形式下,innerHTML会遵照钦定的值
创造新的DOM树,然后新建的DOM树会完全替换调用成分在此之前的全数子节点。

querySelector和querySelectorAll是W3C提供的新的询问接口

生机勃勃、时间当务之急,废话少说

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

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

正是上边那样的显现(为了便利观察,作者加了边框背景象和文字卡塔 尔(英语:State of Qatar):

图片 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年5月首,这段时间多数就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");

module dom {
[Supplemental, NoInterfaceObject]
interface NodeSelector {
Element querySelector(in DOMString selectors);
NodeList querySelectorAll(in DOMString selectors);
};
Document implements NodeSelector;
DocumentFragment implements NodeSelector;
Element implements NodeSelector;
};
[html]
从接口定义可以见见Document、DocumentFragment、Element都贯彻了NodeSelector接口。即那三类别型的元素都具备者两个点子。querySelector和querySelectorAll的参数须是符合css selector
的字符串。不一致的是querySelector再次回到的是叁个对象,querySelectorAll重回的一个集合(NodeList)。

三、结语还是要的

参谋小说:querySelectorAll from an element probably doesn’t do what you
think it
does

谢谢阅读,款待纠错,接待调换!

1 赞 1 收藏
评论

图片 6

4:怎样创制三个要素?怎样给成分设置属性?怎么着删除属性

创办新因素
1.document.createElement(),该形式创制新的成分,那些点子只选拔一个参数,便是要开创的新的要素标签字。如:

var div =document.createElement("div");

由于新因素未被加到文书档案树中,因而不会潜移暗化浏览器的来得,要用,appendChild(),恐怕insertBefore()把新因素增多到文书档案中。
2.用到document.createTextNode()来创设新的公文节点,这么些方法选拔四个参数,即要插入节点中的文本。
3.还足以行使appendChild()方法向节点增添最终三个子节点或然用insertBefore()在内定的已部分子节点早先插入新节点。(也不驾驭那三个算不算新创立贰个成分)
什么给成分设置属性
行使setAttribute() 方法增加钦赐的性情,并为其赋钦赐的值。
如若这几个钦点的性质已存在,则仅设置/改革值。

    <input type="text" >   
<script>
     document.getElementsByTagName("input") [0].setAttribute("class","test");
</script>

图片 7

Paste_Image.png

除去属性
动用removeAttribute() 方法删除内定的习性

  <input type="text" >   
<script>
  document.getElementsByTagName("input")[0].removeAttribute("class","test");
</script>

图片 8

Paste_Image.png

一时一刻 IE8/9及Firefox/Chrome/Safari/Opera 的摩登版已经帮忙它们。

5:怎么着给页面元素加多子成分?如何删除页面成分下的子成分?

利用appendChild()方法向节点增多最后一个子元素可能用insertBefore()在钦赐的已部分子节点早先插入新节点,这一个办法平时与创设新节点的createElement()和createTextNode()方法同盟使用。

1.
<body>
<ul id="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<script>
    var newLi=document.createElement("li");
    document.getElementById("demo").appendChild(newLi);
</script>
</body>

2.
<body>
<ul id="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<script>
    var newLi=document.createElement("li");
    var li=document.getElementsByTagName("li");
    document.getElementById("demo").insertBefore(newLi,li[1]);//插到第二个li的前面
</script>
</body>

图片 9

Paste_Image.png

图片 10

Paste_Image.png

删去子元素
1.使用element.remove()方法,

<div id="rele">删除元素</div>
<script>
   var rele=document.getElementById("rele");
    rele.remove();
</script>

2.removechild
函数方可去除父成分的钦点子成分,借使此函数删除子节点成功,则赶回被剔除的节点,不然重返null。

<body>
<ul id="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<script>
   var ul=document.getElementById("demo");
    var lis=ul.getElementsByTagName("li");
    ul.removeChild(lis[0]);
</script>
</body>

图片 11

Paste_Image.png

归来第一个li

图片 12

Paste_Image.png

如想获取页面class属性为”red”的要素,除了行使document.getElementsByClassName(‘red’)还足以行使document.querySelector(‘.red’)和document.querySelectorAll(‘.red’)。

6: element.classList有怎么着措施?怎样判别一个要素的 class 列表中是含有某些 class?怎么样增添三个class?怎么样删除五个class?

classList 属性重临元素的类名,该属性用于在要素中拉长,移除及切换 CSS
类,有以下那几个办法:
1.add(class1, class2,
…):该措施在要素中增添四个或多少个类名。假设钦定的类名已存在,则不会加多。

 <style>
        .myDiv{
            width: 200px;
            height: 200px;
            background: #2b2b2b;
        }
        .myDiv2{
            background: #ff0000;
        }
    </style>
</head>
<body>
  <div>测试</div>
<script>
   document.getElementsByTagName("div")[0].classList.add("myDiv","myDiv2");
</script>
</body>

未加多早前:

图片 13

Paste_Image.png

增加然后:

图片 14

Paste_Image.png

2.contains(class):该情势再次回到布尔值,推断钦命的类名是还是不是存在。
true – 成分包已经饱含了该类名
false – 成分中荒诞不经该类名

  <div class="myDiv">测试</div>
<script>
  console.log( document.getElementsByTagName("div")[0].classList.contains("myDiv"));//true
</script>```
3.item(index):返回类名在元素中的索引值。索引值从 0 开始。如果索引值在区间范围外则返回 null。

<body>
<div class=”myDiv myDiv2″>测试</div>
<script>
console.log(
document.getElementsByTagName(“div”)[0].classList.item(0));//myDiv
</script>
</body>

4.remove(class1, class2, ...):移除元素中一个或多个类名

<style>
    .myDiv{
        width: 200px;
        height: 200px;
        background: #00ff00;
    }
    .myDiv2{
        background: #ff0000;
    }
</style>

</head>
<body>
<div class=”myDiv myDiv2″>测试</div>
<script>
document.getElementsByTagName(“div”)[0].classList.remove(“myDiv2”);
</script>

未移除之前:

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/5572128-fa338b4aa641813a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
移除之后:

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/5572128-3b446202f5922a8b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

5.toggle(class, true|false): 在元素中切换类名。

<style>
.myDiv{
width: 200px;
height: 200px;
background: #00ff00;
}
.myDiv2{
background: #ff0000;
}
</style>
</head>
<body>
<div class=”myDiv”>测试</div>
<button onclick=”toggle()”>点本人切换</button>
<script>
function toggle(){
document.getElementsByTagName(“div”)[0].classList.toggle(“myDiv2”);
}

</script>

使用classList.contains()判断是否包含某个class。
使用classList.add()添加class。
使用classList.remove()删除元素的一个class。

## 7: 如何选中如下代码所有的li元素? 如何选中btn元素?

<div class=”mod-tabs”>
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<button class=”btn”>点我</button>
</div>

选中li:

var lis=document.getElementsByTagName(“li”);

var lis=document.querySelectorAll(“li”);

选中btn:
  1. var btn=document.getElementsByClassName(“btn”);

var btn=document.querySelector(‘.btn’)

但Element.querySelector和Element.querySelectorAll的落实有不当,如下

[code]
<div id=”d1″>
<p><a
href=”;
</div>
<script type=”text/javascript”>
function $(id){return document.getElementById(id);}
var d1 = $(‘d1’);
var obj1 = d1.querySelector(‘div a’);
var obj2 = d1.querySelectorAll(‘div a’);
alert(obj1); // ->
alert(obj2.length); // -> 1
</script>

在支撑那八个主意的浏览器能够看出个别弹出了“
“1”。表达查询到了想要的因素或因素集结。那与W3C的定义却是不合的,依照定义应该是在要素d1范围内搜寻”div
a”,而d1内压根未有div。由此应当分别重回null,空群集。

jQuery1.4.2
及前面版本中只使用了document.querySelectorAll,未有运用Element.querySelectorAll。
jQuery1.4.3
后采用了Element.querySelectorAll,但做了修复。在接收器前加了”#__sizzle__”以强制其在钦赐成分内搜寻(3903-3918行卡塔尔国。简化下

复制代码 代码如下:

function $(id){return document.getElementById(id);}
var d1 = $(‘d1’);
var obj1 = d1.querySelector(‘div a’);
var obj2 = d1.querySelectorAll(‘div a’);
var old = d1.id, id = d1.id = “__sizzle__”;
try {
var query = ‘#’ + id + ‘ div a’;
alert(d1.querySelector( query ));
alert(d1.querySelectorAll( query ).length);
} catch(e) {
} finally {
old ? d1.id = old : d1.removeAttribute( “id” );
}

落实很抢眼,钦赐范围的成分假设有id,将其保存在old,”__sizzle__”赋值其看成有的时候id,在采纳器”div
a”前线指挥部定查找范围为”#__sizzle__”,即d1。finally语句来最终清理,倘使钦点范围的成分本身有id将其回复为old,未有则去掉不常的id属性”__sizzle__”。

相关:

复制代码 代码如下: module dom { [Supplemental, NoInterfaceObject]
interface NodeSelector { Element querySel…

发表评论

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