Web APIs-02基础：排他思想 + 自定义属性 + 节点操作

雨点打透心脏的1/2处 2022-12-01 15:44 77阅读 0赞

# day02 - Web APIs #

## 1.1. 排他操作 ##

### 1.1.1 排他思想 ###

![在这里插入图片描述][20200827225215617.png_pic_center]

如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法：

1.  所有元素全部清除样式（干掉其他人）
2.  给当前元素设置样式 （留下我自己）
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>
    </head>
    
    <body>
        <button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
        <button>按钮4</button>
        <button>按钮5</button>
        <script>
            // 思路：
            // 1.获取所有元素
            // 2.变历所有元素、为所以元素设置 点击事件处理程序 
    
            // 3.排他思想（核心）：
            // 如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：
            // 1.所以元素全部清除样式（干掉所以人，包括自己）2.给自己设置样式（复活自己）
            // 注意：顺序不能颠倒
    
    
            // 1. 获取所有按钮元素
            var btns = document.getElementsByTagName('button');
            console.log(btns); // [button, button, button, button, button]
    
            // btns得到的是伪数组 里面的每一个元素 btns[i]
            for (var i = 0; i < btns.length; i++) { 
                btns[i].onclick = function() { 
                    // (1) 我们先把所有的按钮背景颜色去掉 干掉所有人
                    for (var j = 0; j < btns.length; j++) { 
                        btns[j].style.backgroundColor = '';
    
                    }
                    // (2) 然后才让当前的元素背景颜色为pink 留下我自己
                    this.style.backgroundColor = 'pink';
                }
            }
            //2. 首先先排除其他人，然后才设置自己的样式 这种排除其他人的思想我们成为排他思想
        </script>
    </body>
    
    </html>

## 1.2 案例：百度换肤 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2NjY0NA_size_16_color_FFFFFF_t_70_pic_center]

案例分析：

1.  这个案例练习的是给一组元素注册事件
2.  给4个小图片利用循环注册点击事件
3.  当我们点击了这个图片，让我们页面背景改为当前的图片
4.  核心算法：把当前图片的src路径取过来，给body做为背景即可

## 1.3 案例：表格隔行变色 ##

![在这里插入图片描述][20200827225302899.png_pic_center]

案例分析：

1.  用到新的鼠标事件：鼠标经过onmouseover、鼠标离开 onmouseout
2.  核心思路：鼠标经过tr行，当前的行变背景颜色，鼠标离开去掉当前的背景颜色
3.  注意：第一行（thead里面的行）不需要变换颜色，因此我们获取的是tbody里面的行

<!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;
                text-align: center;
                border-collapse: collapse;
                font-size: 14px;
            }
            
            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');
            console.log(trs); // [tr, tr, tr, tr, tr, 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>

## 1.4 案例：全选 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2NjY0NA_size_16_color_FFFFFF_t_70_pic_center 1]

案例分析：

1.  `全选和取消全选的做法`：让下面所有复选框的checked属性（选中状态）跟随全选按钮即可。
2.  `下面复选框需要全部选中，上面全选才能选中做法`：
    
    给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的，上面全选就不选中。
3.  可以设置一个变量，来控制全选是否选中

<!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;
            }
            
            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属性（选中状态） 跟随 全选按钮即可
            // 获取元素
            var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮
            var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 小的按钮
    
            // 注册事件：跟两步走
            // 第一步：点击全选--里面的每个小按钮都要勾选；反之亦然！（小按钮状态与全选按钮状态保持一致）
            j_cbAll.onclick = function() { 
                // this.checked 它可以得到当前复选框的选中状态如果是true 就是选中，如果是false 就是未选中
                console.log(this.checked);
                for (var i = 0; i < j_tbs.length; i++) { 
                    j_tbs[i].checked = this.checked;
                }
            }
    
            // 第二步：小按钮 影响 全选按钮 （核心）
            // 思路：
            // 2. 下面复选框需要全部选中，上面全选才能选中做法： 
            // 给下面所有复选框绑定点击事件， for循环遍历
            // 每次点击，都要循环查看下面所有的复选框是否有没选中的， for循环遍历
            // 如果有一个没选中的， 上面全选就不选中。 if(有一个没选中的){全选就不选中；break} 
            // 否则，复选框全部选中，全选才能选中
    
            // 首先：给下面所有复选框绑定点击事件(使用for循环遍历)
            for (var i = 0; i < j_tbs.length; i++) { 
                j_tbs[i].onclick = function() { 
                    // 小技巧：flag 控制全选按钮是否选中
                    var flag = true;
                    // 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中 ~ for循环
                    for (var j = 0; j < j_tbs.length; j++) { 
                        if (!j_tbs[j].checked) { 
                            flag = false; // 必须为全局变量，不能在前面声明var,如：var flag=false(错误写法)
                            break; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了
                        }
                    }
                    j_cbAll.checked = flag;
                }
            }
        </script>
    </body>
    
    </html>

## 1.5. 自定义属性操作 ##

<!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>
    </head>
    
    <body>
        <div id="demo" index="1" class="nav"></div>
        <script> var div = document.querySelector('div'); // 1. 获取元素的属性值 // (1) element.属性 console.log(div.id); //(2) element.getAttribute('属性') get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index console.log(div.getAttribute('id')); console.log(div.getAttribute('index')); // 2. 设置元素属性值 // (1) element.属性= '值' div.id = 'test'; div.className = 'navs'; // (2) element.setAttribute('属性', '值'); 主要针对于自定义属性 div.setAttribute('index', 2); div.setAttribute('class', 'footer'); // class 特殊 这里面写的就是class 不是className // 3 移除属性 removeAttribute(属性) div.removeAttribute('index'); </script>
    </body>
    
    </html>

### 1.5.1 获取属性值 ###

*  `element.属性` 获取属性值
 *  `element.getAttribute('属性')`

区别：

*  `element.属性` 获取内置属性值 （元素本身自带的属性）
 *  `element.getAttribute('属性')`; 主要获取自定义的属性 （标准） 我们程序员自定义的属性

<div id="demo" index="1" class="nav"></div>
        <script>
            var div = document.querySelector('div');
            // 1. 获取元素的属性值
            // (1) element.属性
            console.log(div.id);
            //(2) element.getAttribute('属性') get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index
            console.log(div.getAttribute('id'));
            console.log(div.getAttribute('index'));
    	</script>

### 1.5.2. 设置属性值 ###

#### 设置属性值 ####

*  `element.属性 = '值'` 设置内置属性值
 *  `element.setAttribute('属性','值')`

区别：

*  `element.属性` 设置内置属性值
 *  `element.setAttribute('属性');` 主要设置自定义的属性 （标准）

// 2. 设置元素属性值
            // (1) element.属性= '值'
            div.id = 'test';
            div.className = 'navs';
            // (2) element.setAttribute('属性', '值'); 主要针对于自定义属性
            div.setAttribute('index', 2);
            div.setAttribute('class', 'footer'); // class 特殊 这里面写的就是

### 1.5.3. 移出属性 ###

*  `element.removeAttribute('属性')`

// class 不是className
            // 3 移除属性 removeAttribute(属性) 
            div.removeAttribute('index');

### 1.5.4. 案例：tab栏 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2NjY0NA_size_16_color_FFFFFF_t_70_pic_center 2]

案例分析：

1.  Tab栏切换有2个大的模块
2.  上的模块选项卡，点击某一个。当前这一个底色会是红色，其余不变（排他思想）修改类名的方式
3.  下面的模块内容，会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面。
4.  规律：下面的模块显示和上面的选项卡一一对应，相匹配。
5.  核心思路：给上面的tab\_list里面的所有小li添加自定义属性，属性值从0开始编号。
6.  当我们点击tab\_list里面的某个小li，让tab\_con里面对应序号的内容显示，其余隐藏（排他思想）

<!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;
            }
            
            .tab { 
                width: 978px;
                margin: 100px auto;
            }
            
            .tab_list { 
                height: 39px;
                border: 1px solid #ccc;
                background-color: #f1f1f1;
            }
            
            .tab_list li { 
                float: left;
                height: 39px;
                line-height: 39px;
                padding: 0 20px;
                text-align: center;
                cursor: pointer;
            }
            
            .tab_list .current { 
                background-color: #c81623;
                color: #fff;
            }
            
            .item_info { 
                padding: 20px 0 0 20px;
            }
            
            .item { 
                display: none;
            }
        </style>
    </head>
    
    <body>
        <div class="tab">
            <div class="tab_list">
                <ul>
                    <li class="current">商品介绍</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>
        <script>
            // 思路：
            // 1.获取元素
            // 2.for循环 每个小li绑定点击事件包含两部分 
            // for(){ 每个小li绑定点击事件{1.干掉所有人(for循环) 留下自己 2.干掉所有人(for循环) 留下自己} } 
            // 然后排他思想 1.干掉所有人 2.留下自己 （点击某一个，当前这一个底色会是红色，其余不变）
    
            // 获取元素
            var tab_list= document.querySelector('.tab_list');
            var lis = tab_list.querySelectorAll('li');
            var items = document.querySelectorAll('.item');
            // for循环绑定点击事件
            for (var i = 0; i < lis.length; i++) { 
                // 开始给5个小li 设置索引号 
                lis[i].setAttribute('index', i);
                lis[i].onclick = function() { 
                    // 1. 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式
                    // 干掉所有人 其余的li清除 class 这个类
                    for (var i = 0; i < lis.length; i++) { 
                        lis[i].className = '';
                    }
                    // 留下我自己 
                    this.className = 'current';
    
    
                    // 2. 下面的显示内容模块 给每个xioa
                    var index = this.getAttribute('index');
                    console.log(index);
                    // 干掉所有人 让其余的item 这些div 隐藏
                    for (var i = 0; i < items.length; i++) { 
                        items[i].style.display = 'none';
                    }
                    // 留下我自己 让对应的item 显示出来
                    items[index].style.display = 'block';
                }
            }
        </script>
    </body>
    
    </html>

### 1.5.5. H5自定义属性 ###

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

自定义属性获取是通过getAttribute(‘属性’) 获取。

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

H5给我们新增了自定义属性：

#### 1. 设置H5自定义属性 ####

H5规定自定义属性data-开头做为属性名并且赋值

比如：`<div data-index="1"></div>`或者使用 `element.setAttribute('data-index',2)`

#### 2. 获取H5自定义属性 ####

*  兼容性获取：`element.getAttribute('data-index')`
 *  H5新增：`element.dataset.index` 或者 `element.dataset['index']` ie11 才开始支持

<!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>
    </head>
    
    <body>
        <div getTime="20" data-index="2" data-list-name="andy"></div>
        <script>
            var div = document.querySelector('div');
            // console.log(div.getTime);
            console.log(div.getAttribute('getTime')); // 20
            div.setAttribute('data-time', 20);
            console.log(div.getAttribute('data-index')); // 2
            console.log(div.getAttribute('data-list-name')); // andy
            // h5新增的获取自定义属性的方法 它只能获取data-开头的
            // dataset 是一个集合里面存放了所有以data开头的自定义属性
            console.log(div.dataset); // {index: "2", listName: "andy", time: "20"}
            console.log(div.dataset.index); // 2
            console.log(div.dataset['index']); // 2
            // 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法
            console.log(div.dataset.listName); // andy
            console.log(div.dataset['listName']); // andy
        </script>
    </body>
    
    </html>

## 1.6. 节点操作 ##

### 1.6.1. 节点概述 ###

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2NjY0NA_size_16_color_FFFFFF_t_70_pic_center 3]

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

*  元素节点：nodeType 为 1
 *  属性节点：nodeType 为 2
 *  文本节点：nodeType 为 3 （文本节点包含文字、空格、换行等）

`我们在实际开发中，节点操作主要操作的是元素节点`

### 1.6.2. 节点层级 ###

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2NjY0NA_size_16_color_FFFFFF_t_70_pic_center 4]

### 1.6.3. 父级节点 ###

> node.parentNode

*  parentNode 属性可返回某节点的父节点，注意是：`最近的一个父节点`
 *  如果指定的节点没有父节点则返回 null

<div class="demo">
            <div class="box">
                <span class="erweima">×</span>
            </div>
        </div>
        <script>
            // 1. 父节点 parentNode
            var erweima = document.querySelector('.erweima');
            // var box = document.querySelector('.box');
            // 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null
            console.log(erweima.parentNode);
        </script>

### 1.6.4. 子节点 ###

#### 所有子节点 ####

parentNode.childNodes (标准)

`parentNode.childNodes` 返回包含指定节点的子节点的集合，该集合为即时更新的集合。

注意：返回值里面包含了所有的子节点，包括：元素节点、文本节点等。

如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用`childNodes`

#### 子元素节点 ####

parentNode.children  (非标准)

`parentNode.children` 只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回（`重点`）

虽然children是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用

<ul>
            <li>我是li</li>
            <li>我是li</li>
            <li>我是li</li>
            <li>我是li</li>
        </ul>
        <script>
            // DOM 提供的方法（API）获取
            var ul = document.querySelector('ul');
            var lis = ul.querySelectorAll('li');
            // 1. 子节点 childNodes 所有的子节点 包含 元素节点 文本节点等等
            console.log(ul.childNodes);
            console.log(ul.childNodes[0].nodeType);
            console.log(ul.childNodes[1].nodeType);
            // 2. children 获取所有的子元素节点 也是我们实际开发常用的
            console.log(ul.children);
        </script>

#### 第1个子节点 ####

parentNode.firstChild

`firstChild`返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。

#### 最后1个子节点 ####

parentNode.lastChild

`lastChild` 返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点。

#### 第1个子元素节点 ####

parentNode.firstElementChild

`firstElementChild` 返回第一个子元素节点，找不到则返回null。

**最后1个子元素节点**

parentNode.lastElementChild

`lastElementChild` 返回最后一个子元素节点，找不到则返回null。

注意：这两个方法有兼容性问题， IE9 以上才支持。

实际开发中，`firstChild`和`lastChild` 包含其他节点，操作不方便，而`firstElementChild` 和 `lastElementChild`又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？

解决方案：

1.  如果想要第一个子元素节点，可以使用：`parentNode.children[0]`
2.  如果想要最后一个子元素节点，可以使用：`parentNode.children[parentNode.children.length-1]`

<ol>
            <li>我是li1</li>
            <li>我是li2</li>
            <li>我是li3</li>
            <li>我是li4</li>
            <li>我是li5</li>
        </ol>
        <script>
            var ol = document.querySelector('ol');
            // 1. firstChild 第一个子节点 不管是文本节点还是元素节点
            console.log(ol.firstChild);
            console.log(ol.lastChild);
            // 2. firstElementChild 返回第一个子元素节点 ie9才支持
            console.log(ol.firstElementChild);
            console.log(ol.lastElementChild);
            // 3. 实际开发的写法 既没有兼容性问题又返回第一个子元素
            console.log(ol.children[0]);
            console.log(ol.children[ol.children.length - 1]);
        </script>

### 1.6.5. 案例：新浪下拉菜单 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2NjY0NA_size_16_color_FFFFFF_t_70_pic_center 5]

案例分析：

1.  导航栏里面的li都要有鼠标经过效果，所以需要循环注册鼠标事件
2.  核心原理：当鼠标经过li里面的第二个孩子 ul 显示，当鼠标离开，则 ul 隐藏

<!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 { 
                margin: 100px;
            }
            
            .nav>li { 
                position: relative;
                float: left;
                width: 80px;
                height: 41px;
                text-align: center;
            }
            
            .nav li a { 
                display: block;
                width: 100%;
                height: 100%;
                line-height: 41px;
                color: #333;
            }
            
            .nav>li>a:hover { 
                background-color: #eee;
            }
            
            .nav ul { 
                display: none;
                position: absolute;
                top: 41px;
                left: 0;
                width: 100%;
                border-left: 1px solid #FECC5B;
                border-right: 1px solid #FECC5B;
            }
            
            .nav ul li { 
                border-bottom: 1px solid #FECC5B;
            }
            
            .nav 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.循环注册事件
            for (var i = 0; i < lis.length; i++) { 
                lis[i].onmouseover = function() { 
                    this.children[1].style.display = 'block';
                }
                lis[i].onmouseout = function() { 
                    this.children[1].style.display = 'none';
                }
            }
        </script>
    </body>
    
    </html>

### 1.6.6. 兄弟节点 ###

#### 下一个兄弟节点 ####

node.nextSibling

`nextSibling` 返回当前元素的下一个兄弟节点，找不到则返回null

#### 上一个兄弟节点 ####

node.previousSibling

`previousSibling` 返回当前元素上一个兄弟节点，找不到则返回null

<div>我是div</div>
        <span>我是span</span>
        <script>
            var div = document.querySelector('div');
            // 1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
            console.log(div.nextSibling);
            console.log(div.previousSibling);
            // 2. nextElementSibling 得到下一个兄弟元素节点
            console.log(div.nextElementSibling);
            console.log(div.previousElementSibling);
        </script>

#### 下一个兄弟元素节点（有兼容性问题） ####

node.nextElementSibling

`nextElementSibling` 返回当前元素下一个兄弟元素节点，找不到则返回null

#### 上一个兄弟元素节点（有兼容性问题） ####

node.previousElementSibling

`previousElementSibling` 返回当前元素上一个兄弟节点，找不到则返回null

注意：`nextElementSibling` 和 `previousElementSibling` 有兼容性问题， IE9 以上才支持

如何解决兼容性问题？

答：自己封装一个兼容性的函数

### 1.6.7. 创建节点 ###

document.createElement('tagName')

`document.createElement()` 方法创建由 tagName 指定的 HTML 元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为`动态创建元素节点`

### 1.6.8. 添加节点 ###

node.appendChild(child)

`node.appendChild()` 方法将一个节点添加到指定父节点的子节点列表`末尾`。类似于 CSS 里面的 after 伪元素

node.insertBefore(child,指定元素)

`node.insertBefore()` 方法将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before 伪元素

<ul>
            <li>123</li>
        </ul>
        <script>
            // 1. 创建节点元素节点
            var li = document.createElement('li');
            // 2. 添加节点 node.appendChild(child) node 父级 child 是子级 后面追加元素
            var ul = document.querySelector('ul');
            ul.appendChild(li);
            // 3. 添加节点 node.insertBefore(child, 指定元素);
            var lili = document.createElement('li');
            ul.insertBefore(lili, ul.children[0]);
            // 4. 我们想要页面添加一个新的元素 ： 1. 创建元素 2. 添加元素
        </script>

### 1.6.9. 案例：简单版发布留言 ###

![在这里插入图片描述][20200827225802304.png_pic_center]

案例分析：

1.  核心思路：点击按钮之后，就动态创建一个li，添加到ul里面。
2.  创建 li 的同时，把文本域里面的值通过 `li.innerHTML`赋值给 li
3.  如果想要新的留言后面显示就用`appendChild` 如果想要前面显示就用 `insertBefore`

[20200827225215617.png_pic_center]: /images/20221123/fcd535de9e104cd297e409fce32a13b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2NjY0NA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/cc0573b7d5144c8b9109ba78d767ee96.png
[20200827225302899.png_pic_center]: /images/20221123/e31c678d972d4ed081c66a7f97c1c3ea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2NjY0NA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/67d42fb43d184ded85aac85a95da1923.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2NjY0NA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/56438cda36d84df3bd596e0b424e37b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2NjY0NA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/a13c42120902496f91cbbe5ae1bceb26.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2NjY0NA_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/6f79d78f1e704c7f807cd46f394eaf01.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2NjY0NA_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/b87fdd548f2247a49170da278b596261.png
[20200827225802304.png_pic_center]: /images/20221123/2d2d5759002944feb6ef18682a08a590.png