DOM操作

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>

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

图片 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年11月初,目前基本上就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’)。

Copyright @ 2015-2019 ca88 版权所有
网站地图xml地图