品牌动态

当前位置:新萄京娱乐场手机版 > 品牌动态 > 本文所在的页面藏匿了下面这些代码,它返回指

本文所在的页面藏匿了下面这些代码,它返回指

来源:http://www.chrisproduction.com 作者:新萄京娱乐场手机版 时间:2019-10-05 16:46

三、结语还是要的

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

感谢阅读,欢迎纠错,欢迎交流!

1 赞 1 收藏 评论

图片 1

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>

图片 2

Paste_Image.png

删除属性
使用removeAttribute() 方法删除指定的属性

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

图片 3

Paste_Image.png

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

2015/11/07 · HTML5 · DOM, querySelectorAll

原文出处: 张鑫旭   

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

elem.children:它返回指定元素的子元素集合,只返回html节点,不返回文本节点。
elem.childNodes:它是标准属性,返回指定元素的子元素集合,包括HTML节点,所有属性,文本节点。

一、时间紧急,废话少说

本文所在的页面藏匿了下面这些代码:

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

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

图片 4

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

  • 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,如下截图:
图片 5

好了,上面都是众所周知的,好,下面开始展示点有意思的。

大家看下下面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");

图片 6

提问:上面两个语句返回的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;

大家如果有疑问,可以在控制台测试下,下图就是我自己测试的结果:

图片 7

为啥会这样?

第一个符合我们的理解,不解释。那下一个语句,为何返回的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.

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>

图片 8

Paste_Image.png

图片 9

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>

图片 10

Paste_Image.png

返回第一个li

图片 11

Paste_Image.png

二、:scope与区域选择限制

其实,要想querySelectorAll后面选择器不受全局影响,也是有办法的,就是使用目前还处于实验阶段的:scope伪类,其作用就是让CSS是在某一范围内使用。此伪类在CSS中使用是大头,但是也可以在querySelectorAll语句中使用:

JavaScript

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

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

兼容性如下:

图片 12

我写此文时候是15年11月初,目前基本上就FireFox浏览器支持,我估计,以后,会支持越来越多的。为什么呢?

因为Web Components需要它,可以实现真正独立封装,不会受外界影响的HTML组件。

关于:scope目前支持尚浅,时机未到,我就没必要乱展开了,点到为止。

1: dom对象的innerText和innerHTML有什么区别

innerText:
通过innerText读取值时,它会按照由浅入深的顺序将子文档树中的所有子文本节点拼接起来。在写入值时,会删除元素的所有字节点,插入包含文本节点与相应的文本值。

innerHTML:
在读模式下,innerHTML返回调用元素的所有子节点(包括元素,注释,文本节点)的对应html标签。在写模式下,innerHTML会根据指定的值 创建新的DOM树,然后新建的DOM树会完全替换调用元素之前的所有子节点。

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");

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

本文由新萄京娱乐场手机版发布于品牌动态,转载请注明出处:本文所在的页面藏匿了下面这些代码,它返回指

关键词: