9月18日-9月19日（Web APIs：操作元素、节点操作）-CSDN博客

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        // 1. 获取所有按钮元素
        var btns = document.getElementsByTagName('button');
        // btns得到的是伪数组，里面的每一个元素是：btns[i]
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                // (1) 我们先把所有的按钮背景颜色去掉  （干掉所有人）
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                // (2) 然后才让当前的元素背景颜色为pink （留下我自己）
                this.style.backgroundColor = 'pink';  // this指向当前函数的调用者，也就是btn[i]
            }
        }
    </script>
</body>

效果：

案例2：换肤效果（仿百度换肤）

代码（简洁版）：

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background: url(images/1.jpg) no-repeat center;
        }
        
        li {
            list-style: none;
        }
        
        .box {
            overflow: hidden;
            width: 410px;
            background-color: #fff;
            margin: 100px auto;
            padding-top: 3px;
        }
        
        .box li {
            float: left;
            margin: 0 1px;
            cursor: pointer;
        }
        
        .box img {
            width: 100px;
        }
    </style>
</head>

<body>
    <ul class="box">
        <li><img src="images/1.jpg"></li>
        <li><img src="images/2.jpg"></li>
        <li><img src="images/3.jpg"></li>
        <li><img src="images/4.jpg"></li>
    </ul>
    <script>
        // 1. 获取元素 
        var imgs = document.querySelector('.box').querySelectorAll('img'); // 选择百度下的所有图片
        // console.log(imgs);
        // 2. 循环注册事件 
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function() {
                // this.src 就是我们点击图片的路径   images/1.jpg
                // console.log(this.src);
                // 把这个路径 this.src 给body 作为背景图 就可以了
                // document.body.style.backgroundImage = 'url(images/1.jpg)';
                document.body.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
    </script>
</body>

</html>

效果：

最开始写的比较麻烦：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background: url('images/1.jpg') no-repeat center;
        }

        .box {
            display: flex;
            width: 326px;
            height: 50px;
            margin: 100px auto;
            border: 2px solid #fff;
        }

        img {
            flex: 25%;
        }

        img:nth-child(-n+3) {
            border-right: 2px solid #fff;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="images/1.jpg" alt="">
        <img src="images/2.jpg" alt="">
        <img src="images/3.jpg" alt="">
        <img src="images/4.jpg" alt="">
    </div>
    <script>
        var bodyEle = document.body;
        var imgs = document.getElementsByTagName('img'); // 获得的是伪数组的形式

        for (let i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function () {
                for (let j = 0; j < imgs.length; j++) {// 在每一次设置样式之前先清除所有的样式
                    bodyEle.style.backgroundImage = '';
                }
                // 开始设置单独的样式
                if (i === 0) {
                    bodyEle.style.backgroundImage = "url('images/1.jpg')";
                }
                else if (i === 1) {
                    bodyEle.style.backgroundImage = "url('images/2.jpg')";
                }
                else if (i === 2) {
                    bodyEle.style.backgroundImage = "url('images/3.jpg')";
                }
                else {
                    bodyEle.style.backgroundImage = "url('images/4.jpg')";
                }
            }

        }
    </script>
</body>

</html>

案例3：表格隔行变色（仿新浪财经）

当鼠标经过表格的某一行时，将这一行的底色变深。

用className来设置元素样式。

代码：

<!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>Document</title>
    <style>
        table {
            width: 800px;
            margin: 100px auto;
            /* 将表格的两边框合并为一条 */
            border-collapse: collapse;
            font-size: 14px;
            text-align: center;
        }
        
        thead tr {
            height: 30px;
            background-color: skyblue;
        }
        
        tbody tr {
            height: 30px;
        }
        
        tbody td {
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }
        
        /* 鼠标点击事件 设置样式的类 */
        .bg {
            background-color: pink;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>净值增长率</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
        </tbody>
    </table>
    <script>
        // 1.获取元素 获取的是 tbody 里面所有的行
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        // 2. 利用循环绑定注册事件
        for (var i = 0; i < trs.length; i++) {
            // 3. 鼠标经过事件 onmouseover
            trs[i].onmouseover = function() {
                    // console.log(11);
                    this.className = 'bg';  // 添加类的方式 设置样式
                }
                // 4. 鼠标离开事件 onmouseout
            trs[i].onmouseout = function() {
                this.className = '';
            }
        }
    </script>
</body>

</html>

效果：

案例4：复选框全选、反选效果（重点）

核心：

（1）上面的全选按钮选中时，下面的每一个按钮都选中做法：

让下面所有复选框的checked属性（选中状态）跟随全选按钮即可

（2）下面复选框需要全部选中，上面全选按钮才能选中做法：

给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的，上面全选就不选中。

可以设置一个变量，来控制全选是否选中。

代码：

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            /* 表格的两边框合并为一条 */
            border-collapse: collapse;
            /* border-spacing: 0; */
            border: 1px solid #c0c0c0;
            width: 300px;
        }

        /* 每一个小格子 */
        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        /* 案例3的效果 */
        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

</head>

<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll" />
                    </th>
                    <th>商品</th>
                    <th>价钱</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPhone8</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Pro</td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Air</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>Apple Watch</td>
                    <td>2000</td>
                </tr>

            </tbody>
        </table>
    </div>
    <script>
        // 1 上面的全选按钮选中时， 下面的每一个按钮都选中 做法：  
        //     让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
        // （1）获取元素
        var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮
        var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 下面所有的复选框
        // (2) 注册全选按钮的点击事件 (全选按钮选中时，每一个小按钮也选中，二者状态)
        j_cbAll.onclick = function () {
            // console.log(this.checked);
            // this.checked 它可以得到当前复选框的选中状态。如果是true 就是选中，如果是false 就是未选中
            // 注意： 只要一点击全选按钮，它的状态就成为了checked
            for (var i = 0; i < j_tbs.length; i++) {  // 通过遍历的方法，选中每个小按钮
                j_tbs[i].checked = this.checked;
            }
        }
        // 2. 下面复选框需要全部选中， 上面全选才能选中做法： 
        //     给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的， 上面全选就不选中。
        // (1) 用for循环 为 每一个小按钮添加点击事件
        for (var i = 0; i < j_tbs.length; i++) {
            j_tbs[i].onclick = function () {
                var flag = true;  // （2）flag 用来控制全选按钮是否选中
                // （3）每次点击下面的复选框都要循环检查这4个小按钮是否全被选中，然后更新flag的值
                for (var j = 0; j < j_tbs.length; j++) {
                    if (!j_tbs[j].checked) {
                        flag = false;
                        break; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了
                    }
                } // 内循环说明：如果没有找到 一个未被选中的 就不执行flag= flase; flag就是true
                j_cbAll.checked = flag;  // 核心！！！！（4）将flag的值赋给全选按钮的checked属性
            }
        }
    </script>
</body>

</html>

效果：

4.8 自定义属性的操作

1）获取属性值

语法格式：（两种方式）

区别：

方式1获取的是内置属性值；

方式2主要获得自定义的属性（程序员自定义的属性）

2）设置属性值

语法格式：（两种方式）区别：

方式1 设置的是内置属性；

方式2主要设置的是自定义属性。

3）移除属性

语法格式：

4）案例：tab栏点击切换（重点）

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .tab {
            width: 1000px;
            height: 45px;
            margin: 0 auto;
            margin-top: 200px;
        }

        /* 让里面的内容撑开tab_list盒子*/
        .tab_list ul {
            width: 700px;
            height: 45px;
            background-color: rgb(241, 241, 241);
            padding-right: 300px;
            border: 1px solid rgb(204, 204, 204);
        }

        .tab_list ul li {
            float: left;
            font-size: 18px;
            line-height: 45px;
            text-align: center;
            padding: 0 20px;
            /* 小手 */
            cursor: pointer;
        }

        /* 开始JS前的两个准备工作 */
        /* 默认打开页面，第一个小li显示样式 ,在html结构中用类名来调用这个样式*/
        .current_list {
            background-color: rgb(200, 22, 35);
            color: #fff;
        }

        /* 默认打开页面，所有的文字部分隐藏（只设置第一个文字部分为显示，用行内样式display:block;） */
        .item {
            display: none;
        }
    </style>
</head>

<body>
    <!-- html结构 -->
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current_list">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（50000）</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display:block">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价（50000）模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>

        </div>
    </div>

    <!-- JS部分 -->
    <script>
        var lis = document.querySelector('.tab_list').getElementsByTagName('li'); // 使用tagname必须是父元素是单个，子元素是一组
        var items = document.querySelector('.tab_con').querySelectorAll('.item');
        // console.log(items);

        // 为m每一个li添加点击事件
        for (let i = 0; i < lis.length; i++) {
            lis[i].setAttribute('index', i); // 为每一个li添加自定义属性index,并赋值 01234(在点击事件前)
            lis[i].onclick = function () {

                // 上面部分：tab_list的变化
                for (let j = 0; j < lis.length; j++) {  // 在设置单独小li的样式之前，先清除所有小li的所有样式
                    lis[j].className = ''; // 为空 的类，说明没有设置样式
                }
                this.className = 'current_list';

                // 下面部分：tab_con的变化
                var index = this.getAttribute('index');  // 将被点击的小li的自定义属性index值的获取过来
                console.log(index);
                // 根据自定义属性index来设置下部分的内容（index是和下部分内容的索引号对应起来的）
                for (let k = 0; k < items.length; k++) {   // 在单独设置每一个item之前，先把所有的item设置为隐藏
                    items[k].style.display = 'none';
                }
                items[index].style.display = 'block'; // 在每个被点击的小li 下面显示文字内容
            }
        }
    </script>
</body>

</html>

效果：

5）H5自定义属性

自定义属性目的：

是为了保存并使用数据。

有些数据可以保存到页面中而不用保存到数据库中。

有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。

H5给我们新增了自定义属性。可以避免歧义。

（1）设置H5自定义属性

（只能是以data开头的属性）

方式1：在行内设置，<div data-index=“1”></div>

方式2：用JS设置，element.setAttribute(‘data-index’, 2)

（2）获取 H5自定义属性

（dataset 是一个集合，里面存放了所有以data开头的自定义属性）

方式1：不用考虑兼容性问题， element.getAttribute(‘data-index’);

方式2：ie 11及以上才支持， element.dataset.index

方式3：ie 11及以上才支持，element.dataset[‘index’]

注意：如果自定义属性里面有多个-连接的单词，我们获取的时候采取 驼峰命名法：

设置：<div data-list-name="red"></div>

获取： console.log(div.dataset.listName); // 而不是list-name

or console.log(div.dataset['listName']);

五、节点操作

5.1 节点概述

页面中所有内容都是节点，（标签、属性、文本、注释等）

在DOM 中，节点使用node 来表示；

HTML DOM树中的所有节点均可通过 JavaScript 进行访问，所有HTML 元素（节点）均可被修改，也可以创建或删除。

一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和 nodeValue（节点值）这三个基本属性。

使用console.dir( )可以查看详细信息：

（div是元素节点，nodeType为1）

5.2 节点层级

利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。

1）获取父级节点

2）获取子级节点

（1）获取子节点的集合

有两种方式：

①parentNode.childNodes

②parentNode.children 是一个只读属性

二者区别：

用方式1获取的是所有的子节点（包括多种类型的节点），获取子元素节点需要做专门处理，如下，所以我们一般不提倡使用childNodes。

用方式2获取的是所有的子元素节点。它只返回子元素节点，其余节点不返回，且没有兼容性问题，可以放心使用。

试一下：

（2）获取单独的节点（第一个、最后一个）

有三种方式：

①parentNode.firstChild / parentNode.lastChild

②parentNode.firstElementChild / parentNode.lastElementChild

③parentNode.chilren[0] / parentNode.chilren[parentNode.chilren.length - 1]

试一下：

（3）案例：新浪导航栏（重点）

核心布局：

代码：

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        a {
            text-decoration: none;
            font-size: 14px;
        }

        .nav {
            width: 320px;
            margin: 100px auto;
        }

        .nav>li {
            /* li的孩子ul后面设置了绝对定位，定到li的下边 */
            position: relative;
            /* 小li在一行显示 */
            float: left;
            width: 80px;
            height: 40px;
        }

        /* 包括nav下的亲儿子小li 和 每个亲儿子小li里面的ul里面的小li */
        .nav li a {
            /* a是行内元素 */
            display: block;
            width: 100%;
            height: 100%;
            line-height: 40px;
            text-align: center;
            color: #333;
        }

        .nav>li>a {
            background-color: #eee;
        }

        /* 没有用鼠标经过事件 */
        .nav>li>a:hover {
            background-color: #FECC5B;
        }

        .nav li ul {
            /* 先全部隐藏起来 */
            display: none;
            /* 定位到li的下面（绝对定位不占位置） */
            position: absolute;
            top: 40px;
            left: 0;
            width: 100%;
        }

        .nav li ul li {
            border: 1px solid #FECC5B;
            border-top: 0px;
        }

        /* 没有用鼠标经过事件 */
        .nav li ul li a:hover {
            /* 浅黄色 */
            background-color: #FFF5DA;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        // 1. 获取元素
        var nav = document.querySelector('.nav');
        var lis = nav.children; // 得到4个亲儿子小li
        // 2.循环注册事件
        // 鼠标经过上部分的每个li时，对应的详细菜单出现
        for (var i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function () {
                this.children[1].style.display = 'block'; // 当前小li的第二个子元素 ul
            }
            lis[i].onmouseout = function () {
                this.children[1].style.display = 'none';
            }

        }

    </script>
</body>

</html>

效果：

3）获取兄弟节点

获取上一个和下一个节点有两种方式：

① node.nextSibling \ node.previousSibling

② node.nextElementSibling \ node.previousElementSibling

试一下：

问：如何解决兼容性问题？

答：自己封装一个兼容性的函数，代码如下：

5.3 创建和添加节点

1）创建节点

语法规范：document.createElement('tagName')

因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。

2）添加节点（两种方式）

3）案例：简单版发布留言（重要）

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .box {
            position: relative;
            margin-left: 200px;
            margin-top: 60px;
            width: 300px;
        }

        textarea {
            outline: none;
            border-color: pink;
            padding: 10px;
        }

        button {
            position: absolute;
            top: 90px;
            right: 10px;

        }

        li {
            list-style: none;
            width: 236px;
            height: 30px;
            background-color: pink;
            color: aliceblue;
            line-height: 30px;
            text-align: left;
            padding-left: 10px;
            font-size: 16px;
            /* 每个小li的间隔 */
            margin-top: 10px;

        }
    </style>
</head>

<body>
    <div class="box">
        <textarea name="" id="text" cols="30" rows="6" value=""></textarea>
        <button>发布</button>
        <ul></ul>
    </div>

    <script>
        var text = document.getElementById('text');
        var btn = document.querySelector('button');
        var ul = document.querySelector('ul');

        // var li = document.createElement('li'); // 这样只能创建1个小li,应该是点击过后就创建小li
        btn.onclick = function () {
            if (text.value === '') {
                alert('请在留言板输入内容！');
            }
            else {
                var li = document.createElement('li');  // 创建li
                li.innerHTML = text.value;              // 给li赋值
                ul.insertBefore(li, ul.children[0]);    // 添加li到ul里
            }
        }

    </script>
</body>

</html>

效果：

5.4 删除节点

语法格式：父元素.removeChild(子元素)

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .box {
            position: relative;
            margin-left: 200px;
            margin-top: 60px;
            width: 300px;
        }

        textarea {
            outline: none;
            border-color: pink;
            padding: 10px;
        }

        button {
            position: absolute;
            top: 90px;
            right: 10px;

        }

        li {
            list-style: none;
            width: 236px;
            height: 30px;
            background-color: pink;
            color: aliceblue;
            line-height: 30px;
            text-align: left;
            padding: 0 10px;
            font-size: 16px;
            /* 每个小li的间隔 */
            margin-top: 10px;

        }

        a {
            text-decoration: none;
            float: right;
        }
    </style>
</head>

<body>
    <div class="box">
        <textarea name="" id="text" cols="30" rows="6" value=""></textarea>
        <button>发布</button>
        <ul></ul>
    </div>

    <script>
        var text = document.getElementById('text');
        var btn = document.querySelector('button');
        var ul = document.querySelector('ul');

        // var li = document.createElement('li'); // 这样只能创建1个小li,应该是点击过后创建小li
        btn.onclick = function () {
            if (text.value === '') {
                alert('请在留言板输入内容！');
                return false;
            }
            else {
                var li = document.createElement('li');  // 创建li
                li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";  // 给li赋值, 在内容里多加一个链接(此时的a是li的子元素)
                ul.insertBefore(li, ul.children[0]);    // 添加li到ul里

                // 获取a，并为a依此添加点击事件 (注意a是li的孩子)
                var as = document.querySelectorAll('a');  // 这里是获取所有的a 而不是第一个a
                for (let i = 0; i < as.length; i++) {
                    as[i].onclick = function () {
                        // 删除的格式： 父元素.removeChild(子元素);
                        // ul.removeChild(li); 这样肯定是不对的，没有指定是哪一个小li
                        ul.removeChild(this.parentNode); // 小li是： 当前a的最近一个父亲
                    }
                }
            }
        }

    </script>
</body>

</html>

效果：

5.5 复制节点

又称为克隆节点。

试一下:

<body>
    <ul>
        <li>1111</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        var lili = ul.children[0].cloneNode(true);
        ul.appendChild(lili);

        // 注意区分：         
        // 1）浅拷贝： node.cloneNode(); 括号为空或者里面是false ，只复制标签不复制里面的内容
        // 2）深拷贝： node.cloneNode(true); 括号为true ，复制标签并且复制里面的内容
    </script

结果:

5.6 案例：动态创建表格（重要）

可以练习到以下内容：

        表格的html结构的书写；

        获取、创建、添加、删除节点；

        修改元素内容；

        对象的初始化、遍历；

        鼠标点击事件

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- css样式部分 -->
    <style>
        table {
            width: 400px;
            margin: 100px auto;
            text-align: center;
            /* 设置表格的边框是否被合并为一个单一的边框 */
            border-collapse: collapse;
        }

        thead tr {
            height: 30px;
            background-color: #ccc;
        }

        th,
        td {
            border: 0.5px solid #333;
        }
    </style>
</head>

<body>
    <!-- html结构部分 -->
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>

        <tbody>
            <!-- 里面的内容用JS动态创建 -->
        </tbody>
    </table>

    <!-- JS部分 -->
    <script>

        var datas = [
            {
                name: '张三',
                subject: 'JavaScript',
                score: '99'
            },
            {
                name: '李四',
                subject: 'C语言',
                score: '98'
            },
            {
                name: '王五',
                subject: 'python',
                score: '97'
            }
        ]
        // console.log(datas); // 数组
        // console.log( typeof datas[0]); // 数组元素：为一个对象

        var tbody = document.querySelector('tbody');
        for (let i = 0; i < datas.length; i++) {  // 创建行 
            var tr = document.createElement('tr');
            tbody.appendChild(tr);

            for (var k in datas[i]) {   // 三个单元格      创建数据列
                var td = document.createElement('td');
                td.innerHTML = datas[i][k];
                tr.appendChild(td);
            }


            var td = document.createElement('td'); // 一个单元格   创建删除列 
            td.innerHTML = "<a href='javascript:void(0);'>删除</a>";
            tr.appendChild(td);

            var del_as = document.querySelectorAll('a');       // 实现删除效果
            for (let j = 0; j < del_as.length; j++) {
                del_as[j].onclick = function () {
                    tbody.removeChild(this.parentNode.parentNode);
                }
            }

        }

    </script>
</body>

</html>

效果：