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=777
console.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 () {
//创建li
let 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>