JavaScript之Promise补充与Dom操作

Promise过程分析

javascript 复制代码

    //按照顺序依次引入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方法

javascript 复制代码

    //按照顺序依次引入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元素的内容（父子关系）

html 复制代码

<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获取元素的内容和属性

html 复制代码

<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中怎么写，括号中就怎么写）

javascript 复制代码

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

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

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

父子关系

javascript 复制代码

    //通过子元素获取父元素
    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]);

兄弟关系

javascript 复制代码

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

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

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

html 复制代码

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

内容

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

html 复制代码

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

属性

html 复制代码

<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中的自定义属性

改操作

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

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中

html 复制代码

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

html 复制代码

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

删操作

通过父元素删除子元素

html 复制代码

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

html 复制代码

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

html 复制代码

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

html 复制代码

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