美高梅游戏官网娱乐_美高梅手机登录网站

美高梅游戏官网娱乐是公司推出的企业级即时在线娱乐平台,美高梅手机登录网站业界专业、信誉最好的博彩网站,美高梅游戏官网娱乐拥有最高优惠活动和返水,拥有丰富的管理经验和专业的技术队.。

来自 web前端 2019-11-01 13:12 的文章
当前位置: 美高梅游戏官网娱乐 > web前端 > 正文

innerHTML会根据指定的值,我加了边框背景色和文

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年三月首,前段时间也许就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(),该方法成立新的因素,那些主意只选用一个参数,正是要创制的新的成分标签字。如:

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

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

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

本文由美高梅游戏官网娱乐发布于web前端,转载请注明出处:innerHTML会根据指定的值,我加了边框背景色和文

关键词: