ag旗舰厅官网_ag旗舰厅下载客户端

热门关键词：　ag旗舰厅官网,ag旗舰厅下载客户端

前端技术

当前位置：ag旗舰厅官网 > 前端技术 > DOM元素querySelectorAll只怕让你想不到的特色表现

DOM元素querySelectorAll只怕让你想不到的特色表现

来源：http://www.pedaLyourcycLe.com 作者：ag旗舰厅官网 时间：2019-12-03 08:48

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

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

  • querySelector和querySelectorAll 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.lonely, div.outer, div.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.lonely, div.outer, div.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年八月尾，近期基本上就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");

三、结语还是要的

参谋文章：querySelectorAll from an element probably doesn’t do what you think it does

谢谢阅读，接待纠错，款待沟通！

1 赞 1 收藏 评论

图片 6

4：如何成立二个因素？怎么着给成分设置属性？如何删除属性

开改过因素
1.document.createElement(卡塔尔(英语：State of Qatar),该方法创造新的要素，那几个措施只选用一个参数，便是要开创的新的因素标签字。如:

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

出于新因素未被加到文书档案树中，由此不会潜移暗化浏览器的展示，要用，appendChild(卡塔尔，或然insertBefore(卡塔尔把新因素增添到文书档案中。
2.接纳document.createTextNode(卡塔尔(英语：State of Qatar)来创制新的文书节点，那个办法选取二个参数，即要插入节点中的文本。
3.还足以选择appendChild(卡塔尔(英语：State of Qatar)方法向节点增多最终一个子节点只怕用insertBefore(卡塔尔(英语：State of Qatar)在钦赐的已某个子节点早前插入新节点。(也不知道那三个算不算新创造叁个因素卡塔尔(قطر‎
哪些给成分设置属性
应用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

5：咋样给页面成分增添子成分？怎样删除页面元素下的子成分?

利用appendChild(卡塔尔(英语：State of Qatar)方法向节点增加最终一个子成分恐怕用insertBefore(卡塔尔国在钦命的已有些子节点此前插入新节点,那几个艺术平常与创制新节点的createElement(卡塔尔和createTextNode(卡塔尔(英语：State of Qatar)方法同盟使用。

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

6： element.classList有怎么着方法？怎样判别一个因素的 class 列表中是带有有个别 class？怎样增添多少个class？怎么着删除二个class?

classList 属性重返成分的类名,该属性用于在要素中增加，移除及切换 CSS 类,有以下那一个方法：
1.add(class1, class2, ...卡塔尔(英语：State of Qatar)：该方法在要素中增加二个或多个类名。假若钦赐的类名已存在，则不会添加。

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

本文由ag旗舰厅官网发布于前端技术,转载请注明出处：DOM元素querySelectorAll只怕让你想不到的特色表现

关键词：

上一篇：巨型网站优化技能

下一篇：没有了

相关阅读：