JavaScript 基础知识 - DOM篇(二)

7. 节点操作

7.1 节点的属性

节点分类：

• 标签节点
• 文本节点
• 属性节点
• 注释节点

节点常用的属性：

• nodeType：节点的类型
• nodeName：节点名称
• nodeValue：节点值

常见的节点类型：

• 标签节点：1
• 文本节点：3
• 注释节点：8
• 属性节点：2

示例代码：判断节点类型 [16-节点的属性.html]

<!-- html 部分-->
<div id="box">
    <p>1</p>
    <!--这是个注释-->
    <p>2</p>
    <p>3</p>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

<!-- js 部分 -->
<script>
    // 节点类型  标签节点：1  文本节点：3   注释节点：8  属性节点：2
    var box = document.getElementById("box");
    var nodes = box.childNodes; // 获取box下的所有的孩子节点
    var arr = [];
    
    console.log(nodes); //NodeList(15)  [text, p, text, comment, text, p, text, p, text, div, text, div, text, div, text]
    for(var i = 0; i < nodes.length; i++) {
        // 如果节点类型为1的时候
        if(nodes[i].nodeType == 1) {
            arr.push(nodes[i]);
        }
    }
    console.log(arr); // [p p p div div div]
</script>

7.2 节点层次

7.2.1 孩子节点

• childNodes:获取所有的孩子节点（包括了元素节点和其他很多类型的节点，基本不常用）
• children:获取所有的子元素（用途很广泛）ie6/7/8会有兼容性 如果有注释 会算在内
• firstChild 第一个节点
• firstElementChild 第一个子元素 有兼容性问题 可以封装一个兼容性方法
• lastChild 最后一个节点
• lastElementChild 最后一个子元素 有兼容性问题 可以封装一个兼容性方法

示例代码：隔行变色 [16-获取孩子元素-隔行变色.html]

<!-- 样式部分 -->
<style>
    .odd {
        background: #FFE5B9;
    }
    
    .even {
        background: #FFBDD4;
    }
</style>

<!-- html 部分 -->
<div id="box">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

<!-- js 部分 -->
<script>
    var box = document.getElementById('box');
    // 通过 box 下的孩子元素，找到所有标签
    var childs = box.children;
    for (var i = 0; i < childs.length; i++) {
        // 下标是从0开始算的 虽然这里判断的是偶数
        if (i % 2 == 0) {
            childs[i].className = "odd";
        } else {
            childs[i].className = "even";
        }
    }
</script>

示例代码：菜单切换 [17-获取孩子元素-菜单切换.html]

<!-- css 部分 -->
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    #box {
        width: 500px;
        margin: 100px auto;
    }
    ul {
        overflow: hidden;
    }
    li {
        float: left;
        width: 100px;
        height: 40px;
        text-align: center;
        background-color: #FFE5B9;
        cursor: pointer;
    }
    a {
        text-decoration: none;
        font: 400 16px/40px "宋体";
        color: #FF5C5C;
    }
    .show {
        color: #333;
        background-color: #FFC77F;
    }
</style>

<!-- html 部分 -->
<div>
    <ul id="box">
        <li class="show"><a href="javascript:void(0)">导航1</a></li>
        <li><a href="javascript:void(0)">导航2</a></li>
        <li><a href="javascript:void(0)">导航3</a></li>
        <li><a href="javascript:void(0)">导航4</a></li>
        <li><a href="javascript:void(0)">导航5</a></li>
    </ul>
</div>

<!-- js 部分 -->
<script>
    var box = document.getElementById('box');
    // 获取box下的所有孩子元素
    lis = box.children;
    for (var i = 0; i < lis.length; i++) {
        lis[i].onclick = function() {
            for (var i = 0; i < lis.length; i++) {
                lis[i].className = "";
            }
            this.className = "show";
        }
    }
</script>

效果图：

javascript:void(0)的作用：

• javascript:是伪协议，表示url的内容通过javascript执行。
• void(0)表示不作任何操作，这样会防止链接跳转到其他页面。
• 让页面不跳转，JavaScript:void(0)是最通用的方式。

children和getElementByTagName的区别：

• children 找子元素，不管是什么标签
• TagName 找的是页面中，是该标签名的标签

7.2.2 兄弟节点

• nextSibling:下一个兄弟节点
• nextElementSibling:下一个兄弟元素（IE678不兼容）
• previousSibling上一个兄弟节点
• previousElementSibling 上一个兄弟元素 有兼容性问题 可以封装一个兼容性方法

示例代码：表单验证 [18-兄弟节点-表单验证.html]

<div id="box">
    <input id="textName" type="text"><span style="color:red; font-size:14px;"></span><br>
    <input id="textPwd" type="text"><span style="color:red; font-size:14px;"></span><br>
    <button>注册</button>
</div>

<script>
    var textName = document.getElementById('textName');
    var textPwd = document.getElementById('textPwd');

    // 键盘弹起事件
    //为什么是键盘弹起事件？ 如果是键盘按下事件，内容还没进去，下面代码就开始做判断了
    textName.onkeyup = function() {
        // 如果输入的值 小于2位或大于6位的时候
        if (this.value.length < 2 || this.value.length > 6) {
            // 当前的下一个兄弟元素
            this.nextSibling.innerHTML = "用户名长度为2-6位";
        } else {
            this.nextSibling.innerHTML = "";
        }
    }
    textPwd.onkeyup = function() {
        if (this.value.length < 6 || this.value.length > 12) {
            this.nextSibling.innerHTML = "密码长度为6-12位";
        } else {
            this.nextSibling.innerHTML = "";
        }
    }
</script>

效果图：

键盘事件：

• onkeydown: 当键盘按下的时候触发
• onkeyup : 当键盘弹起的时候触发

7.2.3 父节点

• parentNode:父节点 没有兼容性问题

8. 样式操作

标签不仅可以通过 class属性操作样式，还可以通过 style属性操作样。同样的 DOM对象可以通过 className操作样式，也可以通过 style属性操作样。

8.1 样式操作注意点

• style属性是一个对象
• style这个对象中属性值都是字符串格式
• 标签中style属性有哪些样式名，在style这个对象中就有对应的属性名。
• 如果获取的时候有单位，设置的时候也要有单位
• 标签中有一些属性带了-，比如background-color,到了style对象中，变成了驼峰命名法，backgroundColor（因为-在js中不是一个合法的标识符）
• DOM中的style属性只能获取和设置行内样式，在类样式中定义的样式通过style获取不到。

示例代码：改变div宽度和背景 [19-改变div宽度和背景]

<!-- css 部分 -->
<style>
    div {
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>

<!-- html 部分 -->
<!-- 行内样式权重最高 -->
<div id="box" style="background-color: #FFECDA; width:300px;" title="点击我 变长"></div>

<!-- js 部分-->
<script>
    var box = document.getElementById('box');

    //1. 标签有style属性， 对象也有style属性， 这个style属性是一个对象。
    console.log(box.style);

    box.onclick = function() {

        //2. 可以通过style来设置样式, 如果获取的时候有单位，设置的时候也要有单位
        box.style.width = "800px";

        //3. background-color这种样式需要变成驼峰命名法
        box.style.backgroundColor = "#A6D0E4";
    }

    //4. 获取的时候，只能获取行内样式  style通常只是用来设置样式的，很少用来获取样式。
    console.log(box.style.width); // 800
    console.log(box.style.height); // 空 行内里没有这个属性
</script>

效果图：

8.2 样式操作案例

1、模仿看电影时页面开关灯案例： [20-样式操作-开关灯案例.html]

<!-- html 部分-->
<button id="btn">关灯</button>

<!-- js 部分 -->
<script>
    var btn = document.getElementById('btn');
    btn.onclick = function() {
        if (btn.innerText == "关灯") {
            //把body的背景颜色改成黑色 可以直接通过  document.body
            document.body.style.backgroundColor = "#000";
            btn.innerText = "开灯";
            btn.style.color = "red";
        } else {
            document.body.style.backgroundColor = "#fff";
            btn.innerText = "关灯";
            btn.style.color = "#000";
        }
    }
</script>

效果图：

2、百度换肤案例： [21-样式操作-百度换肤案例.html]

<!-- css 部分 -->
<style>
    * {
        margin: 0px;
        padding: 0px;
    }
    
    body {
        background-image: url(image/百度换肤/1.jpg);
        background-size: cover;
    }
    
    #nav {
        background-color: rgba(255, 255, 255, 0.3);
        height: 200px;
        text-align: center;
    }
    
    #nav img {
        width: 200px;
        margin-top: 35px;
        cursor: pointer;
    }
</style>

<!-- html 部分 -->
<div id="nav">
    <img src="../image/百度换肤/1.jpg" alt="">
    <img src="../image/百度换肤/2.jpg" alt="">
    <img src="../image/百度换肤/3.jpg" alt="">
    <img src="../image/百度换肤/4.jpg" alt="">
    <img src="../image/百度换肤/5.jpg" alt="">
</div>

<!-- js 部分 -->
<script>
    var nav = document.getElementById('nav');
    var imgs = nav.children;

    // 给所有的img注册点击事件
    for (var i = 0; i < imgs.length; i++) {
        imgs[i].onclick = function() {
            // 改变body的背景图片
            document.body.style.backgroundImage = "url(" + this.src + ")";
        }
    }
</script>

效果图：

3、点击隐藏淘宝二维码 [22-样式操作-淘宝二维码.html]

<!-- css 部分 -->
<style>
    .box {
        border: 1px solid #D9D9D9;
        margin: 100px auto;
        position: relative;
        width: 107px;
    }
    
    #close {
        display: block;
        border: 1px solid #D9D9D9;
        width: 14px;
        height: 14px;
        float: right;
        line-height: 14px;
        text-align: center;
        color: #D6D6D6;
        cursor: pointer;
        position: absolute;
        top: -1px;
        left: -16px;
    }
</style>

<!-- html 部分 -->
<div class="box">
    <img src="../image/淘宝二维码/taobao.jpg" alt="" />
    <span id="close">×</span>
</div>

<!-- js 部分 -->
<script>
    var close = document.getElementById('close');
    close.onclick = function() {
        // 点击的父节点样式设置为none
        this.parentNode.style.display = "none";
    }
</script>

效果图：

4、当前文本框高亮显示 [23-样式操作-当前文本框高亮显示.html]

<!-- html 部分 -->
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>

<!-- js 部分 -->
<script>
    var inputs = document.getElementsByTagName('input');
    for (var i = 0; i < inputs.length; i++) {
    // 1-排他解决
        /* inputs[i].onclick = function() {
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].style.backgroundColor = "";
            }
            this.style.backgroundColor = "cyan";
        } */

    // 2-两个新事件 onfocus onblur
        // 获得焦点时触发的事件
        inputs[i].onfocus = function() {
            this.style.backgroundColor = "hotpink";
        }
        // 失去焦点时触发的事件
        inputs[i].onblur = function() {
            this.style.backgroundColor = "";
        }
    }
</script>

效果图：

5、表格隔行变色(鼠标经过触发)效果： [24-样式操作-表格隔行变色.html]

<!-- css 部分 -->
<style>
    * {
        padding: 0;
        margin: 0;
    }
    #box {
        width: 500px;
        margin: 100px auto 0;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
        border: 1px solid #c0c0c0;
        width: 500px;
    }
    th,
    td {
        border: 1px solid #d0d0d0;
        color: #404060;
        padding: 10px;
    }
    th {
        background-color: #CC376D;
        font: bold 16px "微软雅黑";
        color: #fff;
    }
    td {
        font: 14px "微软雅黑";
        text-align: center;
    }
    tbody tr {
        background-color: #f0f0f0;
    }
</style>

<!-- html 部分 -->
<div id="box">
    <table>
        <thead>
            <tr>
                <th>序号</th>
                <th>英雄</th>
                <th>技能</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td>1</td>
                <td>芈月</td>
                <td>永生之血</td>
            </tr>
            <tr>
                <td>2</td>
                <td>貂蝉</td>
                <td>语·花印</td>
            </tr>
            <tr>
                <td>3</td>
                <td>大乔</td>
                <td>川流不息</td>
            </tr>
            <tr>
                <td>4</td>
                <td>甄姬</td>
                <td>凝泪成冰</td>
            </tr>
        </tbody>
    </table>
</div>

<!-- js 部分 -->
<script>
    var tb = document.getElementById('tb');
    // 获取tbody下的所有子元素
    var trs = tb.children;

    // 隔行变色
    for (var i = 0; i < trs.length; i++) {
        if (i % 2 == 0) {
            trs[i].style.backgroundColor = "#FFC77F";
        } else {
            trs[i].style.backgroundColor = "#FFE5B9";

        }
        //注册鼠标经过事件，变颜色
        //需要存下来原来的颜色， 需要用一个全局变量来存
        var oldColor = null;
        trs[i].onmouseover = function() {
            // 获取原来的背景色，并储存在变量中
            oldColor = this.style.backgroundColor;
            this.style.backgroundColor = "#D1F386";
        };
        //鼠标离开 恢复原来的颜色
        trs[i].onmouseout = function() {
            this.style.backgroundColor = oldColor;
        };
    }
</script>

效果图：

6、修改不透明度 [25-样式操作-不透明度.html]

<!-- css 部分 -->
<style>
    #box {
        width: 300px;
        height: 300px;
        background: #FFCD00;
        line-height: 300px;
        font-size: 20px;
        text-align: center;
        margin: 100px auto;
        position: relative;
    }
    
    #small-box {
        width: 150px;
        height: 150px;
        background: #FF8356;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -75px;
        margin-top: -75px;
    }
    
    button {
        display: block;
        margin: -90px auto;
    }
</style>

<!-- html 部分 -->
<div id="box">
    你看不见我！
    <div id="small-box"></div>
</div>

<!-- js 部分 -->
<script>
    var smallBox = document.getElementById('small-box');

    smallBox.onmouseover = function() {
        /*!*IE678不支持*!*/
        /*opacity: .5;*/
        
        /*!*IE678支持这个*!*/
        /*filter: alpha(opacity = 50);*/
        this.style.opacity = "0.5";
        this.style.filter = "alpha(opacity = 50)";
    }
    smallBox.onmouseout = function() {
        this.style.opacity = "1";
        this.style.filter = "alpha(opacity = 100)";
    }
</script>

效果图：

7、随机设置盒子的位置 [26-样式操作-随机盒子位置.html]

<!-- css 部分-->
<style>
    div {
        width: 100px;
        height: 100px;
        background: #FFCD00;
    }
</style>

<!-- html 部分 -->
<div id="box" title="点我啊！"></div>

<!-- js 部分 -->
<script>
    var box = document.getElementById('box');

    box.onclick = function() {
        // 相对于页面body 进行定位
        box.style.position = 'absolute';
        // left 范围 100-600
        var x = parseInt(Math.random() * 501) + 100;
        // 有单位的一定要加上单位
        box.style.left = x + "px";

        // top 范围 50-350
        var y = parseInt(Math.random() * 301) + 50;
        box.style.top = y + "px";
    }
</script>

效果图：

8、点击盒子增加对应盒子的层级： [27-样式操作-点击增加层级.html]

<!-- css 部分 -->
<style>
    div {
        width: 200px;
        height: 200px;
        position: absolute;
        top: 0;
        left: 0;
    }
    .one {
        background-color: #F54D42;
    }
    .two {
        background-color: #FF8356;
        margin: 80px;
    }
    .three {
        background-color: #FFCD00;
        margin: 160px;
    }
</style>

<!-- html 部分 -->
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

<!-- js 部分 -->
<script>
    var divs = document.getElementsByTagName('div');
    // 变量用于存放层级
    var zIndex = 0;
    // 给每个盒子注册点击事件
    for (var i = 0; i < divs.length; i++) {
        divs[i].onclick = function() {
            // 点击 增加层级
            this.style.zIndex = ++zIndex;
        }
    }
</script>

效果图：

9、随机生成位置与层级，并且层级可点： [28-样式操作-获取随机位置、层级随机.html]

<!-- css 部分-->
<style>
    * {
        margin: 0;
        padding: 0;
    }
    #box {
        width: 1000px;
        height: 600px;
        border: 2px solid #1DCD9F;
        box-shadow: 2px 2px 1px #1DCD9F;
        margin: 20px auto;
        position: relative;
    }
    #box div {
        width: 200px;
        height: 200px;
        position: absolute;
    }
</style>

<!-- html 部分 -->
<div id="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

<!-- js 部分 -->
<script>
    var box = document.getElementById('box');
    var divs = box.children;
    // 定义随机的颜色
    var colors = ["#FFCE00", "#E73E51", "#EED690", "#FFECDA", "#D4A5A5", "#E3F3F7", "#CBF078", "#ECEBFF", "#C7E78B", "#D6E4F0", "#8FECC8"];

    var zIndex = 0;
    
    for (var i = 0; i < divs.length; i++) {
        // 随机颜色
        var randomColor = colors[parseInt(Math.random() * colors.length)];
        divs[i].style.backgroundColor = randomColor;
        // 随机位置
        // h: 0-400  w: 0-800 
        var x = parseInt(Math.random() * 801);
        divs[i].style.left = x + "px";
        var y = parseInt(Math.random() * 401);
        divs[i].style.top = y + "px";

        // 点击某一个盒子 层级增加
        divs[i].onclick = function() {
            this.style.zIndex = ++zIndex;
        }
    }
</script>

效果图：

10、手风琴 [29-样式操作-手风琴.html]

<!-- 样式部分 -->
<style>
    * {
        padding: 0;
        margin: 0;
    }
    ul {
        list-style-type: none;
        margin: 100px auto;
    }
    .parentWrap {
        width: 250px;
        text-align: center;
    }
    .menuGroup {
        border: 1px solid #8FBAF3;
        background-color: #BDF1F6;
    }
    .groupTitle {
        display: block;
        height: 30px;
        line-height: 30px;
        font-size: 16px;
        border-bottom: 1px solid #77628C;
        cursor: pointer;
    }
    .menuGroup>div {
        height: 200px;
        background-color: #F2FCFC;
        display: none;
    }
</style>

<!-- html部分 -->
<ul class="parentWrap">
    <li class="menuGroup">
        <span class="groupTitle">标题1</span>
        <div>我是弹出来的div1</div>
    </li>
    <li class="menuGroup">
        <span class="groupTitle">标题2</span>
        <div>我是弹出来的div2</div>
    </li>
    <li class="menuGroup">
        <span class="groupTitle">标题3</span>
        <div>我是弹出来的div3</div>
    </li>
    <li class="menuGroup">
        <span class="groupTitle">标题4</span>
        <div>我是弹出来的div4</div>
    </li>
</ul>

<!-- js部分 -->
<script>
    var spans = document.getElementsByClassName('groupTitle');
    for (var i = 0; i < spans.length; i++) {
        // 给所有 span标题注册点击事件
        spans[i].onclick = function() {
            // 让所有span 的下一个兄弟元素 隐藏
            for (var i = 0; i < spans.length; i++) {
                spans[i].nextElementSibling.style.display = "none";
            }
            // 当前点击的span 的下一个兄弟元素 显示
            this.nextElementSibling.style.display = "block";
        }
    }
</script>

效果图：

11、高亮显示 [30-样式操作-高亮显示.html]

<!-- 样式部分 -->
<style>
    * {
        margin: 0;
        padding: 0;
    }
    ul {
        list-style: none;
    }
    body {
        background-color: #000;
    }
    .wrap {
        margin: 100px auto 0;
        width: 606px;
        background: #000;
        overflow: hidden;
        border: 1px solid #fff;
    }
    .wrap li {
        float: left;
        border: 1px solid #000;
    }
    .wrap img {
        display: block;
        border: 0;
    }
</style>

<!-- html 部分 -->
<div id="wrap" class="wrap">
    <ul>
        <li>
            <a href="#"><img src="../image/高亮显示效果/01.jpg" alt="" /></a>
        </li>
        <li>
            <a href="#"><img src="../image/高亮显示效果/02.jpg" alt="" /></a>
        </li>
        <li>
            <a href="#"><img src="../image/高亮显示效果/03.jpg" alt="" /></a>
        </li>
        <li>
            <a href="#"><img src="../image/高亮显示效果/04.jpg" alt="" /></a>
        </li>
        <li>
            <a href="#"><img src="../image/高亮显示效果/05.jpg" alt="" /></a>
        </li>
        <li>
            <a href="#"><img src="../image/高亮显示效果/06.jpg" alt="" /></a>
        </li>
    </ul>
</div>

<!-- js 部分 -->
<script>
    var wrap = document.getElementById('wrap');
    var lis = wrap.children[0].children;

    for (var i = 0; i < lis.length; i++) {
        lis[i].onmouseover = function() {
            // 排他，全部不透明度为0.4
            for (var i = 0; i < lis.length; i++) {
                lis[i].style.opacity = "0.4";
                lis[i].style.filter = "alpha(opacity = 40)";
            }
            // 当前鼠标悬停位置 不透明度为1
            this.style.opacity = "1";
            this.style.filter = "alpha(opacity = 100)";
        }

    }
    // 鼠标离开大盒子的时候 不透明度全部为1
    wrap.onmouseout = function() {
        for (var i = 0; i < lis.length; i++) {
            lis[i].style.opacity = "1";
            lis[i].style.filter = "alpha(opacity = 100)";
        }
    }
</script>

效果图：../

9. 动态创建元素

9.1 克隆节点

语法：var newNode = node.cloneNode(deep)

功能：在内存中克隆一份节点

参数：deep

• false：默认值：是浅复制，只会复制标签，节点本身，不会复制节点的孩子。
• true:深度复制，会复制标签，还会复制标签的所有内容

注意：

• 克隆出来的节点跟原来的节点没有关系了，修改了也不会相互影响。
• 如果克隆的节点带了id，我们需要给id重新设置一个值，不让id冲突

示例代码： [31-克隆节点.html]

<!-- html 部分 -->
<div id="box">
    <span>我是子元素</span>
</div>
<p id="title">这里是p标签</p>

<!-- js部分 -->
<script>
    var p = document.getElementById('title');
    var box = document.getElementById('box');
    // 克隆上面的两个节点
    var newDiv = box.cloneNode(true);
    var newP = p.cloneNode(true);
    newP.id = "title2";     // 修改了id，防止id冲突
    console.log(newDiv);    // <div id="box"><span>我是子元素</span>w</div>
    console.log(newP);      // <p id="title2">这里是p标签</p>
</script>

9.2 添加节点

9.2.1 appendChild

语法：parent.appendChild(newChild);

• parent:调用者，父节点来调用
• newChild:需要添加的那个孩子。

作用：把newChild添加到parent的孩子的最后面。

如果添加的是页面中本来就存在的元素，是一个剪切的效果，原来的就不在了。

示例代码： [32-添加节点.html]

<!-- 样式部分 -->
<style>
    #box {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
</style>

<!-- html 部分 -->
<div id="box">
    <span>我是子元素</span>
</div>
<p id="des">这里是p标签</p>
<i id="title">这里是i标签</p>

<!-- js部分 -->
<script>
    var p = document.getElementById('des');
    var i = document.getElementById('title');
    var box = document.getElementById('box');
    // 克隆上面的两个节点
    var newP = p.cloneNode(true);
    newP.id = "des2"; // 修改了id，防止id冲突
    // 将newP添加到box中
    box.appendChild(newP);
    // 将i标签添加到box里 这里相当于一个剪切的效果
    box.appendChild(i);
</script>

效果图：

9.2.2 insertBefore

语法：parent.insertBefore(newChild, refChild);

• parent:必须要父节点来调用
• newChild：需要添加的那个节点
• refChild:添加到哪一个节点的前面。

示例代码： [33-添加节点-insertBefore.html]

<!-- html部分 -->
<ul id="wrap">
    <li>大乔</li>
    <li id="xq">小乔</li>
    <li>阿珂</li>
    <li>甄姬</li>
</ul>

<li id="nw">女娲</li>
<li id="ln">露娜</li>
<li id="dj">妲己</li>


<!-- js部分 -->
<script>
    var wrap = document.getElementById('wrap');
    var xq = document.getElementById('xq');
    var nw = document.getElementById('nw');
    var ln = document.getElementById('ln');
    var dj = document.getElementById('dj');

    // 1. insertBefore 可以在任意指定位置添加
    // 将女娲添加到小乔前面
    wrap.insertBefore(nw, xq);

    // 2. insertBefore 添加到最前面 wrap.children[0]
    // 将露娜添加到最前面
    wrap.insertBefore(ln, wrap.children[0]);

    // 3. insertBefore 第二个参数null时，默认在最后面添加
    // 将妲己添加到最后面
    wrap.insertBefore(dj, null);
</script>

效果图：

9.3 创建节点

9.3.1 document.write(基本不用)

• 可以生成新的节点，但是不推荐使用。如果页面已经加载完成了，你还是用document.write写内容的话，会把之前的页面给覆盖掉
• 原理：页面从上往下加载的时候，会开启一个文档流，当页面加载完，文档流就会关闭。
• document.write的本意就是在文档流上写入内容。如果页面没加载完成，文档流还是开着的，document.write直接在这个文档流上写东西
• 如果页面加载完成了，还是用document.write写东西，会重新开启一个新的文档流，往新的文档流上写东西，旧的文档流就被新的文档流覆盖了。

示例代码： [34-创建节点-document.write.html]

<!-- html 部分 -->
<div>呵呵呵</div>
<div>哈哈哈</div>
<div>嘻嘻嘻</div>
<button id="btn">加载完，document.write一下</button>

<!-- js 部分 -->
<script>
    var btn = document.getElementById('btn');
    // 创建一个节点
    document.write("<h2>嘿嘿嘿</h2>")

    // 页面加载完成后，再点击按钮触发document.write的时候，页面内容就会被覆盖
    btn.onclick = function() {
        document.write("<h2>叽叽叽</h2>")
    }
</script>

效果图：

9.3.2 innerHTML

innerHTML也可以创建节点。 innerHTML创建节点的时候有一个特点，如果原来有内容的话，使用 innerHTML会把原先的内容给干掉。

示例代码： [35-创建节点-innerHTML.html]

<!-- 样式部分 -->
<style>
    #box {
        width: 300px;
        height: 300px;
        background: #E0FF59;
    }
</style>

<!-- html 部分 -->
<input type="button" value="按钮" id="btn">
<div id="box"></div>

<!-- js 部分 -->
<script>
    var btn = document.getElementById("btn");
    var box = document.getElementById("box");

    btn.onclick = function() {
        // innerHTML:也能达到创建元素的效果
        // 直接box.innerHTML = "<button>我是一个按钮</button>" 重复点击的时候不会继续创建下去，会把原来的覆盖掉
        // box.innerHTML 或取到之前的内容，然后与新创建的拼串，再一起添加进去
        box.innerHTML = box.innerHTML + "<button>我是一个按钮</button>";
    };
</script>

慎用：很容易出现效率问题，效率不高，多次使用，每次创建都会获取到之前的，然后拼接新添加的，再将原来的全部重新替换掉。

效果图：

9.3.3 createElement

语法：var element = document.createElement("tagName");

作用：在内存里面创建了一个节点

返回：一个元素

示例代码： [36-创建节点-createElement.html]

<!-- 样式部分 -->
<style>
    #box {
        width: 300px;
        height: 300px;
        background: #E0FF59;
    }
</style>

<!-- html 部分 -->
<input type="button" value="创建" id="btn">
<div id="box"></div>

<!-- js 部分 -->
<script>
    var box = document.getElementById("box");
    var btn = document.getElementById("btn");
    btn.onclick = function() {
        //1. 创建一个button
        var button = document.createElement("button");
        //2. 设置内容
        button.innerHTML = "我是要给按钮";
        //3. 添加到box中
        box.appendChild(button);
    };
</script>

用途非常的广泛,不会影响效率。

效果图：

9.4 删除节点

语法：parent.removeChild(child);

功能：由父盒子调用，删除里面的一个子元素。

示例代码： [37-删除节点.html]

<!-- 样式部分 -->
<style>
    #box {
        width: 200px;
        height: 200px;
        background-color: #E0FF59;
        text-align: center;
    }
</style>

<!-- html 部分 -->
<div id="box">
    <p id="des">我是第一句话</p>
    <p>我是第二句话</p>
</div>

<button id="btn">点击移除第一句话</button>

<!-- js 部分 -->
<script>
    var btn = document.getElementById('btn');
    var box = document.getElementById('box');
    var des = box.children[0];

    btn.onclick = function() {
        box.removeChild(des);
    }
</script>

效果图：

removeChild 与 display:"none"的区别

• removeChild删除的是一个节点，你删除了，在页面中就不会再有这个节点了
• display:"none"只是隐藏一个元素，元素隐藏了，在页面中看不见，但是节点还是存在页面中的

9.5 动态创建元素综合练习

1、选好友案例： [38-动态创建元素-选好友.html]

<!-- 样式部分 -->
<style>
    select {
        height: 300px;
        width: 80px;
        overflow: hidden;
        text-align: center;
        font-size: 18px;
        background-color: #F1E9E3;
    }
</style>

<!-- html 部分 -->
<select id="left" multiple>
    <option>大乔0</option>
    <option>小乔1</option>
    <option>甄姬2</option>
    <option>虞姬3</option>
    <option>妲己4</option>
    <option>女娲5</option>
    <option>芈月6</option>
    <option>露娜7</option>
</select>

<button id="all-right">&gt;&gt;</button>
<button id="all-left">&lt;&lt;</button>
<button id="only-right">&gt;</button>
<button id="only-left">&lt;</button>

<select id="right" multiple></select>

<!-- js 部分 -->
<script>
    var left = document.getElementById('left');
    var right = document.getElementById('right');
    var allRight = document.getElementById('all-right');
    var allLeft = document.getElementById('all-left');
    var onlyRight = document.getElementById('only-right');
    var onlyLeft = document.getElementById('only-left');

    // 全选往右按钮
    allRight.onclick = function() {
        // 获取左边所有的option
        var options = left.children;
        // appendChild 只能一个个添加，不能一次添加一个数组
        for (var i = 0; i < options.length; i++) {
            right.appendChild(options[i]);
            // 为什么要 --？，因为js执行是一步步往下执行的
            /* 
                i = 0 时 "大乔0"会被添加到右边去，此时options数组中就没有了下标为0项
                i = 1 原本的"小乔1"此时在数组中下标就为0了，但for循环下一次添加的时候，是添加下标为1的项，就是"甄姬2"
                所以你会看到，点击全选按钮，只有四项过去，原因就在上面
                i-- 的目的就是 添加时，下标会往后一次
             */
            i--;
        }
    };

    // 全选往左按钮
    allLeft.onclick = function() {
        var options = right.children;
        for (var i = 0; i < options.length; i++) {
            left.appendChild(options[i]);
            i--;
        }

    };

    // 选中的往右边
    onlyRight.onclick = function() {
        // 获取到左边所有的选项
        var options = left.children;
        for (var i = 0; i < options.length; i++) {
            // 判断左边的选中项(表单属性)
            if (options[i].selected) {
                // 如果是选中的 将它添加到右边
                right.appendChild(options[i]);
                i--;
            }
        }
    };

    // 选中的往左边
    onlyLeft.onclick = function() {
        var options = right.children;
        for (var i = 0; i < options.length; i++) {
            if (options[i].selected) {
                left.appendChild(options[i]);
                i--;
            }
        }
    };
</script>

效果图：

2、动态创建新闻列表： [39-动态创建元素-新闻列表.html]

<!-- 样式部分 -->
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    #btn {
        display: block;
        margin: 100px auto;
        margin-bottom: 10px;
    }
    #box {
        width: 500px;
        height: 350px;
        border: 1px dashed #BD4682;
        margin: 10px auto;
    }
</style>

<!-- html 部分-->
<button id="btn">生成</button>
<div id="box"></div>

<!-- js 部分 -->
<script>
    var arr = [
        '"红船精神" 理上网来 新时代 新气象 新作为',
        '互联网大会蓝皮书发布 中国数字经济规模全球第二',
        '教育部回应"取消中考"传言:不实 条件不具备',
        '中泰铁路12月下旬开工 昆明到曼谷将朝发夕至',
        '中消协约谈摩拜等共享单车企业:尽可能免收押金',
        '温度 | 成都81岁捡垃圾老太已被纳入关爱援助',
        '车晓前夫拒履行判决被限制出境 曾是山西首富',
        '首艘国产航母进入最后试验阶段 与辽宁舰有何不同',
        '揭秘：身价多少 才能参加乌镇的“大佬”饭局？',
        '西成高铁明日开通运营 首发车车票约半小时售罄',
        '离婚女子见网友失联 警方千里奔波解救却被撒狗粮',
        '西安回应38车相撞事故:接受批评 洒水将灵活调整',
        '魔鬼在人间，专骗救命钱',
        '儿子服毒割腕 父母第一句话问"他包里有没有钱"',
        '看完复联3预告片,为什么都在骂漫威？',
        '3年少卖80亿包，方便面的饭碗被谁抢了'
    ];

    var btn = document.getElementById('btn');
    var box = document.getElementById('box');

    // 点击"生成"，手动创建一个列表
    btn.onclick = function() {
        // 创建ul 添加到box中
        var ul = document.createElement("ul");
        box.appendChild(ul);

        // 根据arr里的数据 创建li
        for (var i = 0; i < arr.length; i++) {
            // 创建li
            var li = document.createElement("li");
            ul.appendChild(li);

            // 设置li的内容
            li.innerHTML = arr[i];

            // 隔行变色
            if (i % 2 == 0) {
                li.style.background = "#F4E7D3";
            } else {
                li.style.background = "#F9F8ED";
            }
        }
    }
</script>

效果图：

3、微博发布案例： [40-动态创建元素-微博发布.html]

<!-- 样式部分 -->
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .box {
        width: 600px;
        margin: 100px auto;
        border: 2px solid #000;
        padding: 20px;
        box-shadow: 2px 2px 4px #666;
    }
    textarea {
        width: 450px;
        height: 160px;
        outline: none;
        resize: none;
    }
    ul {
        width: 450px;
        padding-left: 70px;
    }
    ul li {
        line-height: 25px;
        border-bottom: 1px dashed #BD4682;
    }
    #del {
        float: right;
    }
</style>

<!-- html 部分 -->
<div class="box" id="weibo">
    <span>微博发布</span>
    <textarea rows="10" cols="30" id="txt"></textarea>
    <button id="btn">发布</button>
    <ul id="ul">

    </ul>
</div>

<!-- js 部分 -->
<script>
    var txt = document.getElementById('txt');
    var btn = document.getElementById('btn');
    var ul = document.getElementById('ul');

    // 给发布按钮注册点击事件
    btn.onclick = function() {
        var content = txt.value.trim();
        if (content.length == 0) {
            return;
        }

        // 创建li
        var li = document.createElement("li");
        // 把li添加到ul的最前面
        ul.insertBefore(li, ul.children[0]);
        // 把textarea的内容给li
        li.innerHTML = content;
        // 发布后textarea里面就应该没有文字了 这里content=""是没有用的  content仅仅只是一个变量，用来存储textarea的value值
        txt.value = "";

        // 添加一个删除按钮
        var button = document.createElement("button");
        button.innerHTML = "删除";
        button.id = "del";
        // 将删除按钮添加到li中
        li.appendChild(button);
        button.onclick = function() {
            // 点击删除按钮，移除ul下的li 这里的li是删除按钮的父节点
            ul.removeChild(this.parentNode);
        }
    }
</script>

效果图：

4、许愿墙案例(一)： [41-动态创建元素-许愿墙(一).html]

<!-- 样式部分 -->
<style>
    body {
        margin: 0 auto;
        padding: 0px;
        font-size: 12px;
        background: url(../image/许愿墙/bg.gif) repeat center 36px;
        text-align: center;
        background-color: #c30230;
    }
    #content {
        margin: 0 auto;
        width: 960px;
        background: url(../image/许愿墙/content_bg.jpg) no-repeat left top;
        height: 627px;
        position: relative;
    }
    #content .tip1 {
        position: absolute;
        width: 227px;
        left: 200px;
        top: 100px;
    }
    #content .tip1 .tip_h {
        background: url(../image/许愿墙/tip1_h.gif) no-repeat left top;
    }
    #content .tip1 .tip_h {
        width: 227px;
        padding-top: 45px;
        height: 23px;
        text-align: left;
        cursor: move;
    }
    #content .tip1 .tip_c {
        background: url(../image/许愿墙/tip1_c.gif) repeat-y;
    }
    #content .tip1 .tip_c {
        width: 200px;
        padding-left: 12px;
        padding-right: 15px;
        min-height: 40px;
        text-align: left;
        line-height: 20px;
        max-height: 160px;
        word-wrap: break-word;
        word-break: break-all;
        overflow: hidden;
    }
    #content .tip1 .tip_f {
        background: url(../image/许愿墙/tip1_f.gif) no-repeat left top;
    }
    #content .tip1 .tip_f {
        width: 227px;
        height: 53px;
        padding-top: 20px;
    }
    #content .close {
        float: left;
        font-size: 12px;
        cursor: pointer;
        color: #000000;
    }
    .clr {
        clear: both;
        overflow: auto;
        display: block;
        height: 0px;
    }
    #content .icon {
        float: left;
        width: 35px;
        padding-left: 15px;
        height: 35px;
        text-align: center;
    }
    #content .name {
        float: right;
        padding-right: 15px;
        text-align: right;
        font-size: 14px;
        line-height: 35px;
        color: #C0F;
    }
    #content .num {
        float: left;
        padding-left: 7px;
        width: 195px;
    }
</style>

<!-- html 部分 -->
<div id="content">
    <div class="tip1" id="cc">
        <div class="tip_h" title="双击关闭纸条">
            <div class="num">第[49568]条 2016-02-17 22:51:52</div>
            <div class="close" title="关闭纸条">×</div>
            <div class="clr"></div>
        </div>
        <div class="tip_c">
            每天都要被自己给帅醒，希望以后越来越帅！！！
        </div>
        <div class="tip_f">
            <div class="icon">
                <img src="../image/许愿墙/bpic_1.gif" alt="" title="">
            </div>
            <div class="name">成真的人</div>
            <div class="clr"></div>
        </div>
    </div>
</div>

<!-- js 部分 -->
<script>
    var content = document.getElementById('content');
    var cc = document.getElementById('cc');
    var zIndex = 0;

    // 克隆10份添加到content中
    for (var i = 0; i < 10; i++) {
        // 克隆cc节点
        var newDiv = cc.cloneNode(true);
        // 添加到content中
        content.appendChild(newDiv);
        // 修改id
        newDiv.id = "cc" + i;
    }

    // 找到所有便签
    var divs = content.children; // 11个
    for (var i = 0; i < divs.length; i++) {
        // 给每一个便签随机位置
        var x = parseInt(Math.random() * 701);
        divs[i].style.left = x + "px";

        var y = parseInt(Math.random() * 441);
        divs[i].style.top = y + "px";

        // 点击便签的时候，层级要提升
        divs[i].onclick = function() {
            this.style.zIndex = ++zIndex;
        }

        // 双击tip_h部分 让便签隐藏
        divs[i].children[0].ondblclick = function() {
            this.parentNode.style.display = "none";
        };
        // 单击关闭按钮
        // console.log(divs[i].children[0].children[1]); // 关闭按钮
        divs[i].children[0].children[1].onclick = function() {
            this.parentNode.parentNode.style.display = "none";
        }
    }
</script>

效果图：

5、许愿墙案例(二)： [42-动态创建元素-许愿墙(二).html]

上面的案例每个便利贴里面的文字用户信息都是一样的，并且是通过克隆节点完成的，那我们能不能动态创建呢，并且获取不同的信息

<!-- 样式部分 -->
 <style>
    body {
        margin: 0 auto;
        padding: 0px;
        font-size: 12px;
        background: url(../image/许愿墙/bg.gif) repeat center 36px;
        text-align: center;
        background-color: #c30230;
    }
    #content {
        margin: 0 auto;
        width: 960px;
        background: url(../image/许愿墙/content_bg.jpg) no-repeat left top;
        height: 627px;
        position: relative;
    }
    #content .tip1 {
        position: absolute;
        width: 227px;
        left: 200px;
        top: 100px;
    }
    #content .tip1 .tip_h {
        background: url(../image/许愿墙/tip1_h.gif) no-repeat left top;
    }
    #content .tip1 .tip_h {
        width: 227px;
        padding-top: 45px;
        height: 23px;
        text-align: left;
        cursor: move;
    }
    #content .tip1 .tip_c {
        background: url(../image/许愿墙/tip1_c.gif) repeat-y;
    }
    #content .tip1 .tip_c {
        width: 200px;
        padding-left: 12px;
        padding-right: 15px;
        min-height: 40px;
        text-align: left;
        line-height: 20px;
        max-height: 160px;
        word-wrap: break-word;
        word-break: break-all;
        overflow: hidden;
    }
    #content .tip1 .tip_f {
        background: url(../image/许愿墙/tip1_f.gif) no-repeat left top;
    }
    #content .tip1 .tip_f {
        width: 227px;
        height: 53px;
        padding-top: 20px;
    }
    #content .close {
        float: left;
        font-size: 12px;
        cursor: pointer;
        color: #000000;
    }
    .clr {
        clear: both;
        overflow: auto;
        display: block;
        height: 0px;
    }
    #content .icon {
        float: left;
        width: 35px;
        padding-left: 15px;
        height: 35px;
        text-align: center;
    }
    #content .name {
        float: right;
        padding-right: 15px;
        text-align: right;
        font-size: 14px;
        line-height: 35px;
        color: #C0F;
    }
    #content .num {
        float: left;
        padding-left: 7px;
        width: 195px;
    }
</style>


<!-- html 部分 -->
<div id="content">

</div>


<!-- js 部分 -->
<script>
    var datas = [{
        "id": 1,
        "name": "mahu",
        "content": "今天你拿苹果支付了么",
        "time": "2016-02-17 00:00:00"
    }, {
        "id": 2,
        "name": "haha",
        "content": "今天天气不错，风和日丽的",
        "time": "2016-02-18 12:40:00"
    }, {
        "id": 3,
        "name": "jjjj",
        "content": "常要说的事儿是乐生于苦",
        "time": "2016-03-18 12:40:00"
    }, {
        "id": 4,
        "name": "9.8的妹纸",
        "content": "把朋友家厕所拉堵了 不敢出去 掏了半小时了都",
        "time": "2016-03-18 12:40:00"
    }, {
        "id": 5,
        "name": "雷锋ii.",
        "content": "元宵节快乐",
        "time": "2016-02-22 12:40:00"
    }, {
        "id": 6,
        "name": "哎呦哥哥.",
        "content": "据说今晚央视的元宵晚会导演和春晚导演是同一个人，真是躲得过初一，躲不过十五。",
        "time": "2016-02-22 01:30:00"
    }, {
        "id": 7,
        "name": "哎呦杰杰.",
        "content": "真搞不懂你们地球人，月亮有什么好看的，全是坑，还是对面那哥们好看，",
        "time": "2016-02-22 01:30:00"
    }, {
        "id": 8,
        "name": "哎呦哎呦",
        "content": "今天哪里的烟花最好看！！？答：朋友圈。。。",
        "time": "2016-02-22 02:30:00"
    }, {
        "id": 9,
        "name": "没猴哥，不春晚",
        "content": "班主任:“小明，你都十二岁了，还是三年级，不觉得羞愧吗”？。小明:“一点也不觉得，老师你都四十多岁了，不也是年年在三年级混日子吗？羞愧的应该是你”。老师:……",
        "time": "2016-02-22 01:30:00"
    }];

    // 找到外部大盒子
    var content = document.getElementById('content');
    var zIndex = 0;
    // 根据数据创建div
    for (var i = 0; i < datas.length; i++) {
        // 创建一个div
        var div = document.createElement("div");
        // 将div添加到content中
        content.appendChild(div);
        // 给div添加一个id和class
        div.className = "tip1";
        div.id = "cc" + i;
        // 给这个div设置内容
        div.innerHTML = '<div class="tip_h" title="双击关闭纸条">' +
            '<div class="num">第[' + datas[i].id + ']条 ' + datas[i].time + '</div>' +
            '<div class="close" title="关闭纸条">×</div>' +
            '<div class="clr"></div>' +
            '</div>' +
            '<div class="tip_c">' +
            datas[i].content +
            '</div>' +
            '<div class="tip_f">' +
            '<div class="icon">' +
            '<img src="../image/许愿墙/bpic_1.gif" alt="" title="">' +
            '</div>' +
            '<div class="name">' + datas[i].name + '</div>' +
            '<div class="clr"></div>' +
            '</div>';

        // 给每一个便签随机位置
        var x = parseInt(Math.random() * 701);
        div.style.left = x + "px";

        var y = parseInt(Math.random() * 441);
        div.style.top = y + "px";

        // 点击便签的时候，层级要提升
        div.onclick = function() {
            this.style.zIndex = ++zIndex;
        }

        // 双击tip_h部分 让便签隐藏
        div.children[0].ondblclick = function() {
            this.parentNode.style.display = "none";
        };
        // 单击关闭按钮
        // console.log(divs[i].children[0].children[1]); // 关闭按钮
        div.children[0].children[1].onclick = function() {
            this.parentNode.parentNode.style.display = "none";
        }
    }
</script>

效果图：

6、随机选中英雄案例： [43-动态创建元素-随机选中.html]

<!-- 样式部分 -->
<style>
    * {
        margin: 0;
        padding: 0;
    }
    table {
        margin: 50px auto;
    }
    td {
        width: 80px;
        height: 80px;
        text-align: center;
        border: 1px dashed #4586FF;
        position: relative;
    }
    img {
        width: 80px;
        height: 80px;
        display: block;
    }
    #btn {
        width: 100px;
        height: 40px;
        display: block;
        margin: 20px auto;
    }
    .mask {
        width: 80px;
        height: 80px;
        background: rgba(161, 234, 251, 1);
        z-index: 2;
        position: absolute;
        top: 0;
        left: 0;
    }
</style>

<!-- html 部分 -->
<button id="btn">点击开始</button>

<!-- js 部分 -->
<script>
    // 随机选中的名单 @为空，随机的时候 不会选择@的项
    var heros = [
        ["../image/wzry/105.jpg", "@", "../image/wzry/106.jpg", "@", "../image/wzry/107.jpg", "@", "../image/wzry/146.jpg", "@", "../image/wzry/109.jpg", "@", "../image/wzry/110.jpg"],
        ["../image/wzry/149.jpg", "@", "../image/wzry/115.jpg", "@", "../image/wzry/114.jpg", "@", "../image/wzry/113.jpg", "@", "../image/wzry/119.jpg", "@", "../image/wzry/120.jpg"],
        ["../image/wzry/148.jpg", "@", "../image/wzry/116.jpg", "@", "../image/wzry/117.jpg", "@", "../image/wzry/118.jpg", "@", "../image/wzry/137.jpg", "@", "../image/wzry/136.jpg"],
        ["../image/wzry/140.jpg", "@", "../image/wzry/125.jpg", "@", "../image/wzry/124.jpg", "@", "../image/wzry/123.jpg", "@", "../image/wzry/122.jpg", "@", "../image/wzry/121.jpg"],
        ["../image/wzry/141.jpg", "@", "../image/wzry/126.jpg", "@", "../image/wzry/127.jpg", "@", "../image/wzry/128.jpg", "@", "../image/wzry/129.jpg", "@", "../image/wzry/130.jpg"],
        ["../image/wzry/142.jpg", "@", "../image/wzry/135.jpg", "@", "../image/wzry/134.jpg", "@", "../image/wzry/144.jpg", "@", "../image/wzry/132.jpg", "@", "../image/wzry/131.jpg"]
    ];
    var btn = document.getElementById('btn');
    var newArr = [];
    // 创建table 添加到body中
    var table = document.createElement("table");
    document.body.insertBefore(table, btn);

    // 根据heros数组的长度创建tr
    for (var i = 0; i < heros.length; i++) {
        var tr = document.createElement("tr");
        table.appendChild(tr);

        // tr代表的是行数，上面的for循环，是循环的外面一个数组。下面需要创建td 
        for (var j = 0; j < heros[i].length; j++) {
            var td = document.createElement("td");
            tr.appendChild(td);
            // 当td里面的内容不等于"@"的时候 将数组里面的内容添加进去
            if (heros[i][j] != "@") {
                td.innerHTML = "<img src=" + heros[i][j] + ">";
                // 将符合条件的td添加到一个新的数组中
                newArr.push(td);
                // 创建一个遮罩层
                var mask = document.createElement("div");
                td.appendChild(mask);
                mask.className = "mask";
            }

        }
    }

    // 给按钮注册点击事件
    btn.onclick = function() {
        for (var i = 0; i < newArr.length; i++) {
            // 每次点击按钮的时候，都让遮罩层恢复
            newArr[i].children[1].className = "mask";
        }

        // 根据新数组的长度，返回一个随机数
        var random = parseInt(Math.random() * newArr.length);
        // 将随机到的td下的遮罩层属性名清空
        newArr[random].children[1].className = "";
    }
</script>

效果图：

7、动态创建表格： [44-动态创建元素-动态创建表格.html]

封装一个css文件：createTable.css

/*
 * @Author: Levi丶lxh 
 * @Date: 2017-12-07 14:45:09 
 */
 
/* 封装了一个createTable.css 文件 */
.my_table {
    margin: 100px auto;
    width: 800px;
    border: 1px solid #000;
    border-collapse: collapse;
}
.my_table th {
    border: 1px solid #000;
    height: 30px;
    background-color: #C4E3CB;
}
.my_table td {
    border: 1px solid #000;
    height: 30px;
    text-align: center;
    background: #F4F9F4;
}
.my_table a {
    text-decoration: none;
    color: #FF5C5C;
}

封装一个用于创建表格的js文件：createTable.js

/*
 * @Author: Levi丶lxh 
 * @Date: 2017-12-07 14:07:54 
 */

// 封装了一个createTable.js 文件
function createTable(element, json) {
    // 创建table 添加到 body
    var table = document.createElement("table");
    // 添加类名 my_table
    table.className = "my_table";
    // 添加到element中
    element.appendChild(table);

    // 创建thead，添加到 table
    var thead = document.createElement("thead");
    table.appendChild(thead);

    // 创建tr 添加到thead中
    var tr = document.createElement("tr");
    thead.appendChild(tr);

    // 根据数据的长度创建th，并添加到tr里
    var header = json.header;
    for (var i = 0; i < header.length; i++) {
        var th = document.createElement("th");
        tr.appendChild(th);
        th.innerHTML = header[i];
    }

    // 单独再添加一个按钮
    var th = document.createElement("th");
    tr.appendChild(th);
    th.innerHTML = "操作";


    // 创建 tbody 添加到 table
    var tbody = document.createElement("tbody");
    table.appendChild(tbody);
    // tbody.className = "my_tbody";

    // 根据 json的datas.length创建tr
    var datas = json.datas;
    for (var i = 0; i < datas.length; i++) {
        var tr = document.createElement("tr");
        tbody.appendChild(tr);

        // 根据 datas[i] 创建td
        for (key in datas[i]) {
            var td = document.createElement("td");
            tr.appendChild(td);
            td.innerHTML = datas[i][key];
        }

        //创建 一个操作按钮
        var td = document.createElement("td");
        tr.appendChild(td);
        td.innerHTML = "<a href='javascript:void(0);'>删除</a>";

        // 给a标签注册点击事件
        td.children[0].onclick = function() {
            // 点击这个删除按钮的时候，删除这一行 tr
            tbody.removeChild(this.parentNode.parentNode);
        }

    }
    return table;
}

页面主体部分

<!-- html 部分 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动态创建表格</title>
    <link rel="stylesheet" href="css/createTable.css">
    <script src="js/createTable.js"></script>
</head>

<body>
    <div id="box"></div>

    <script>
        var json = {
            "header": ["姓名", "性别", "年龄", "属性", "技能"],
            "datas": [{
                "name": "甄姬",
                "gender": "女",
                "age": 20,
                "attribute": "法师",
                "skill": "洛神降临"
            }, {
                "name": "小乔",
                "gender": "女",
                "age": 16,
                "attribute": "法师",
                "skill": "星华缭乱"
            }, {
                "name": "不知火舞",
                "gender": "女",
                "age": 18,
                "attribute": "刺客",
                "skill": "必杀·忍蜂"
            }, {
                "name": "阿珂",
                "gender": "女",
                "age": 18,
                "attribute": "刺客",
                "skill": "幻舞"
            }, {
                "name": "吕布",
                "gender": "男",
                "age": 28,
                "attribute": "战士",
                "skill": "魔神降世"
            }, {
                "name": "典韦",
                "gender": "男",
                "age": 38,
                "attribute": "战士",
                "skill": "嗜血"
            }, {
                "name": "后羿",
                "gender": "男",
                "age": 1888,
                "attribute": "射手",
                "skill": "惩戒射击"
            }, ]
        };
        var box = document.getElementById('box');
        createTable(box, json);
    </script>
</body>

</html>

效果图：

8、百度搜索提示案例： [45-动态创建元素-仿百度搜索提示.html]

<!-- 样式部分 -->
<style>
    * {
        margin: 0;
        padding: 0;
        border: none;
        list-style: none;
    }
    #box {
        width: 405px;
        margin: 200px auto;
        position: relative;
    }
    input {
        float: left;
        width: 300px;
        height: 32px;
        padding-left: 4px;
        border: 1px solid #b6b6b6;
        border-right: 0;
    }
    button {
        float: left;
        width: 100px;
        height: 34px;
        font: 400 14px/34px "microsoft yahei";
        color: white;
        background: #3385ff;
        cursor: pointer;
    }
    button:hover {
        background: #317ef3;
    }
    #pop {
        width: 303px;
        border: 1px solid #ccc;
        padding: 0px;
        position: absolute;
        top: 34px;
    }
    #pop ul li {
        padding-left: 5px;
    }
    #pop ul li:hover {
        background-color: #CCC;
    }
</style>


<!-- html 部分 -->
<div id="box">
    <input id="text" type="text">
    <button id="search">百度一下</button>
</div>


<!-- js 部分 -->
<script>
    var text = document.getElementById('text');
    var box = document.getElementById('box');

    // 假设后台的提示数据是datas
    var datas = ["a", "ab", "abc", "abcd", "爱奇艺", "爱康国宾体检中心", "爱奇艺会员领取", "爱思助手官方下载", "如何开网店", "如何瘦肚子", "如何翻墙"];
    // 给text注册键盘弹起事件
    text.onkeyup = function() {
        //1. 根据用户输入的值  获取到一个数组  这个数组就是需要展示的内容
        var newArr = [];
        // 获取到输入凡人内容
        var content = text.value;

        for (var i = 0; i < datas.length; i++) {
            // 判断输入的内容在数据中是否存在
            if (datas[i].indexOf(content) != -1) {
                // 说明存在
                newArr.push(datas[i]);
            }
        }
        // 要将提示信息显示在搜索框下方 需要创建一个div
        // 每一次触发事件都会创建一个div，如果发现box中存在id pop，就删除它
        var pop = document.getElementById('pop');
        if (pop) {
            box.removeChild(pop);
        }

        // 生成 div的前提是newArr要有长度
        if (newArr.length == 0 || content == "") {
            return;
        }

        var div = document.createElement("div");
        div.id = "pop";
        box.appendChild(div);

        // 创建ul 添加到div中，用来显示提示信息列表
        var ul = document.createElement("ul");
        div.appendChild(ul);

        // 根据 newArr 创建li 并且添加到ul中
        for (var i = 0; i < newArr.length; i++) {
            var li = document.createElement("li");
            ul.appendChild(li);
            li.innerHTML = newArr[i];
        }
    }
</script>

效果图：

上一篇：JavaScript 基础知识 - DOM篇(一)
下一篇：JavaScript 基础知识 - BOM篇