JavaScript 基础知识 - DOM篇(二) - Levi丶知识库

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篇

JavaScript 基础知识 - DOM篇(二)

7. 节点操作

7.1 节点的属性

7.2 节点层次

7.2.1 孩子节点

7.2.2 兄弟节点

7.2.3 父节点

8. 样式操作

8.1 样式操作注意点

8.2 样式操作案例

9. 动态创建元素

9.1 克隆节点

9.2 添加节点

9.2.1 appendChild

9.2.2 insertBefore

9.3 创建节点

9.3.1 document.write(基本不用)

9.3.2 innerHTML

9.3.3 createElement

9.4 删除节点

9.5 动态创建元素综合练习

深海丶Deepsea

引用和评论

原生 js 实现移动端 Touch 滑动反弹

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号