JavaScript之Promise补充与Dom操作

Promise过程分析

    //按照顺序依次引入a-d.js，最后打印加载完毕load('a.js').then(()=>{return load('b.js')//load方法返回Pomise对象//但是没有把这个对象返回//所以这个函数没有返回值//then方法会提供一个空对象作为返回值},()=>{console.log('有错误')}).then(()=>{return load('c.js')//load方法返回Pomise对象},()=>{console.log('有错误')}).then(()=>{return load('d.js')//load方法返回Pomise对象}).then(()=>{console.log('加载完毕')},()=>{console.log('有错误')})

1.load('a.js')返回promise对象，调用后面的第一个then方法

2.第一个then里面的方法会在load('a.js')执行

3.执行第一个then里面的第一个方法，return load('b.js')，返回load('b.js')返回的Promise对象，这个Promise对象会成为第一个then的返回值，并且调用后面第二个then方法

4.第二个then里面的方法会在load('b.js')之后执行

5.以此类推

catch方法

    //按照顺序依次引入a-d.js，最后打印加载完毕load('a.js').then(()=>{return load('b.js')}).then(()=>{return load('c.js')}).then(()=>{return load('d.js')}).then(()=>{console.log('加载完毕')}).catch(()=>{console.log('加载失败')})

catch方法提供过程中进入失败状态时执行的方法

如果没有进入失败状态，则会按照顺序正常执行，catch中的方法不执行；如果其中某一步进入失败状态，则跳过后续的过程，马上执行catch中的方法

Dom

全称：document object model

页面上的标签就是Dom，也称为Dom元素，或者元素

Dom元素的内容（父子关系）

<head><meta charset="UTF-8"><title></title>
</head>

head标签有子节点（几个儿子）：5个

第一个：<head>后到<meta...>前的空格，文本子节点

第二个：<meta...>标签，元素子节点

第三个：<meta...>后到title前的空格，文本子节点

第四个：title标签，元素子节点

第五个：</title>后在</head>前的空格，文本子节点

head标签有几个子元素：2个

title标签有几个子节点：0个

Dom操作

通过JS操作页面上的元素

查操作

获取元素，进而获取元素上的内容

查找

1.通过id，class，name，tagname获取元素的内容和属性

<ul><li id="li1">1</li><li class="li2">2</li><li name="li3">3</li><li>4</li><li>5</li>
</ul>
<script type="text/javascript">let l1 = document.getElementById("li1");console.log(l1);let l2 = document.getElementsByClassName("li2");console.log(l2);//类名为li2的元素组成的类数组let l3 = document.getElementsByName("li3");console.log(l3);//name为li3的元素组成的类数组let l4 = document.getElementsByTagName("li");console.log(l4);//所有li标签的元素组成的类数组
</script>

特殊的，id可以直接代表元素使用，省略获取步骤，但是大部分编辑器对这种方法很不友好

2.通过选择器获取元素（css中怎么写，括号中就怎么写）

    // 获取选择器匹配到的第一个元素let l2 = document.querySelector(".li2");console.log(l2);// 获取选择器匹配到的所有元素let li = document.querySelectorAll("li");console.log(li);//类数组

特殊的，通过id选择器获取所有元素时，尽管结果只有一个元素，但也是类数组

3.通过结构关系获取元素

父子关系

    //通过子元素获取父元素let l1 = document.getElementById("li1");console.log(l1.parentNode);//父元素ul//通过父元素获取子元素let ul = document.querySelector("ul");//第一个子元素console.log(ul.firstElementChild);//最后一个子元素console.log(ul.lastElementChild);//所有子元素console.log(ul.children);//类数组//获取第三个子元素console.log(ul.children[2]);

兄弟关系

    // 获取兄弟元素let l1 = document.getElementById("li1");//下一个兄弟元素console.log(l1.nextElementSibling);//上一个兄弟元素console.log(l1.previousElementSibling);

注：结构关系获取元素可以联合使用

需求：通过第一个ul的li2获取第二个ul中的l4

<ul><li id="li1">1</li><li class="li2">2</li><li name="li3">3</li><li class="li4">4</li><li>5</li>
</ul>
<ul><li id="l1">1</li><li class="l2">2</li><li name="l3">3</li><li class="l4">4</li><li>5</li>
</ul>
<script type="text/javascript">let ul1 = document.getElementsByTagName("ul")[0];console.log(ul1.nextElementSibling.children[3]);
</script>

内容

先获取元素，进而获取内容

<ul id="uu" abc="777"><li>123</li>
</ul>
<script type="text/javascript">let uu = document.getElementById("uu");//所有内容console.log(uu.innerHTML);//文本内容console.log(uu.innerText);//123
</script>

属性

<ul id="uu" abc="777"><li>123</li>
</ul>
<script type="text/javascript">let uu = document.getElementById("uu");//预定义属性console.log(uu.id);//自定义属性console.log(uu.getAttribute.abc.value);//777
</script>

js尽量不要操作，写在html中的自定义属性

改操作

改操作就是个子元素的内容和属性重新赋值

<ul id="uu" abc="777"><li>123</li>
</ul>
<script type="text/javascript">let uu = document.getElementById("uu");uu.innerText='123'uu.innerHTML='123'//在设置纯文本内容时，两个属性没有区别//当内容中包括标签时uu.innerText='<li>123</li>>'uu.innerHTML='<li>123</li>'//innerText无法解析标签，会把标签当做文本处理//innerHTML可以解析内容中的标签//修改属性uu.className='u1'//如果JS需要操作自定义属性，则直接通过JS设置uu.abc=777console.log(uu.abc)console.log(uu)
</script>

增操作

创建一个元素添加到页面中

需求：创建一个p标签，添加到div中

<div id="dd"><p id="target">标志物</p>
</div>
<script type="text/javascript">//1.创建元素let p = document.createElement('p');//设置标签的内容及属性p.innerHTML = 'hello world';p.className = 'p1';//2.将元素添加到页面中,通过父元素添加资源//获取父元素let dd = document.getElementById('dd');//添加成父元素的最后一个子元素// dd.appendChild(p);//添加到父元素指定元素的前面//获取指定元素let target = document.querySelector('#target');dd.insertBefore(p,target);
</script>

<button id="btn">添加</button>
<div class="out"></div>
<script type="text/javascript">//增操作——补充//如何每一次都添加成第一个子元素let btn = document.getElementById('btn');let out = document.querySelector('.out');btn.onclick = function () {let div = document.createElement('div');div.innerHTML = Math.random();//添加到第一个子元素之前out.insertBefore(div,out.firstElementChild);}
</script>

删操作

通过父元素删除子元素

<button id="btn">删除</button>
<ul class="uu"><li class="li">我要被删除了</li>
</ul>
<script type="text/javascript">let btn = document.getElementById('btn');let li = document.querySelector('.li');btn.onclick = function () {li.parentNode.removeChild(li);}
</script>

注：在删除的需求中，不要获取父元素

而是通过子元素.parentNode来代表父元素

小练习1：

<input type="text" />
<button>添加</button>
<ul></ul>
<script type="text/javascript">let btn = document.querySelector('button');let ul = document.querySelector('ul');let inp = document.querySelector('input');btn.onclick = function () {//创建lilet li = document.createElement('li');//设置li的内容li.innerHTML = inp.value;//把li插入到ul的第一个位置ul.insertBefore(li,ul.firstChild);//给创建出来的li绑定事件li.ondblclick = function () {this.parentNode.removeChild(this);}inp.value = '';}
//注：添加元素绑定事件，必须在添加事件触发的方法中实现
</script>

小练习2：

<button id="add">添加</button>
<div class="out"><div><h3>标题</h3><p>内容</p><p class="img">假装有图片</p><p>总结......</p></div>
</div>
<script type="text/javascript">//需求：点击添加按钮，添加一整个div的结构let out = document.querySelector('.out');// add.onclick = function () {//     //创建div//     let div = document.createElement('div');//     //创建h3//     let h3 = document.createElement('h3');//     h3.innerHTML = '标题';//     div.appendChild(h3);//     //创建第一个p//     let p1 = document.createElement('p');//     p1.innerHTML = '内容';//     div.appendChild(p1);//     //创建第二个p//     let p2 = document.createElement('p');//     p2.innerHTML = '假装有图片';//     p2.className = 'img';//     div.appendChild(p2);//     //创建第三个p//     let p3 = document.createElement('p');//     p3.innerHTML = '总结......';//     div.appendChild(p3);//     out.appendChild(div);// }//innerHMTL可以识别标签//可以把要添加的结构，以innerHTMl的形式添加给父元素// add.onclick = function () {//     out.innerHTML += `//     <div>//         <h3>标题</h3>//         <p>//             内容//         </p>//         <p class="img">//             假装有图片//         </p>//         <p>总结......</p>//     </div>//     `// }//注：直接设置成父元素的innnerHTML会有一定的局限性（只能添加成最后一个或者第一个）//而且解构内的元素如果存在事件，有可能产生bug//最好的解决办法//创建结构最外层的标签//结构内的其他内容设置成标签的innerHTML//最后把创建的标签添加到父元素add.onclick = function () {//创建最外层标签let div = document.createElement('div');div.innerHTML = `<h3>标题</h3><p>内容</p><p class="img">假装有图片</p><p>总结......</p>`out.appendChild(div);}
</script>

小练习3：

<input />
<button id="add">添加</button>
<div class="messages">
<!--    <div class="mes">-->
<!--        <p class="content">-->
<!--            123-->
<!--        </p>-->
<!--        <button>×</button>-->
<!--    </div>-->
</div>
<script type="text/javascript">//点击添加按钮，创建mes结构，并添加成messages的第一个子元素//其中mes>p的内容时input的value//点击×按钮，删除当前留言let messages = document.querySelector(".messages");let input = document.querySelector("input");add.onclick = function () {let mes = document.createElement("div");mes.className = "mes";mes.innerHTML=`<p class="content">${input.value}</p><button>×</button>`messages.insertBefore(mes,messages.firstElementChild);input.value = "";let btn = mes.querySelector("button");btn.onclick = function () {this.parentNode.remove(mes);}}</script>