JS学习731~761（操作元素+节点操作+DOM重点）

最新推荐文章于 2024-10-11 17:39:47 发布

前进的北极熊

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量609

点赞数

分类专栏： JavaScript 文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/m0_57809042/article/details/127039614

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

6 操作元素

6.5 排他思想

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

所有元素全部清除样式(干掉其他人)
给当前元素设置样式(留下我自己)
注意顺序不能颠倒,首先干掉其他人,再设置自己

<!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>
</head>
<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        // 1.获取所有按钮元素
        var btns = document.getElementsByTagName('button');
        // btn得到的是伪数组 里面的每一个元素btn[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>

案例：百度换肤

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

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background: url(images/1.jpg) no-repeat center top;
        }
        
        li {
            list-style: none;
        }
        
        .baidu {
            overflow: hidden;
            margin: 100px auto;
            background-color: #fff;
            width: 410px;
            padding-top: 3px;
        }
        
        .baidu li {
            float: left;
            margin: 0 1px;
            cursor: pointer;
        }
        
        .baidu img {
            width: 100px;
        }
    </style>
</head>
<body>
    <ul class="baidu">
        <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('.baidu').querySelectorAll('img');
        // console.log(imgs);
        // 2. 循环注册事件
        for (var i = 0; i < imgs.length; i ++) {
            imgs[i].onclick = function() {
                // this.src 就是我们点击图片的路径
                // console.log(this.src);
                // 把这个路径 this.src 给body就可以了
                document.body.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
    </script>
</body>
</html>

案例：表格隔行变色

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

<!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>
        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');
        // 2. 利用循环绑定注册事件
        for (var i = 0; i < trs.length; i ++ ) {
            // 3. 鼠标经过事件 onmouseover
            trs[i].onmouseover = function() {
                // console.log(1);
                this.className = 'bg';
            }
            // 4.鼠标离开事件 onmouseout
            trs[i].onmouseout = function() {
                this.className = '';
            }
        }
    </script>
</body>
</html>

案例:表单全选取消全选案例

业务需求：

点击上面全选复选框，下面所有的复选框都选中(全选)
再次点击全选复选框，下面所有的复选框锅不中选(取消全选)
如果下面复选框全部选中，上面全选按钮就自动选中
如果下面复选框有一个没有选中，上面全选按钮就不选中
所有复选框一开始默认都没选中状态

案例分析

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

<!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;
        }
        
        .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>
        // 获取元素
        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 (var i = 0; i < j_tbs.length; i ++ ) {
            j_tbs[i].onclick = function() {
                // flag控制全选按钮是否选中
                var flag = true;
                // 每次点击下面的复选框都要循环检查这4个小按钮是否全被选中
                for (var i = 0; i < j_tbs.length; i ++ ) {
                    if (!j_tbs[i].checked) {
                        flag = false;
                        break;  //退出for循环 可以提改效率 因为只要一个没有选中 剩下的就无需循环判断了
                    }
                }
                j_cbAll.checked = flag;
            }
        }
    </script>
</body>
</html>

6.6 自定义属性的操作

获取属性值

element.属性 获取属性值。
element.getAttribute(‘属性’);

区别:

element.属性 获取内置属性值(元素本身自带的属性)
element.getAttribute(‘属性’); 主要获得自定义的属性(标准)我们程序员自定义的属性

设置属性值

element.属性 = '值' 设置内置属性值。
element.setAttribute(‘属性’，‘值’);

移除属性 removeAttribute(属性)

element.removeAttribute(‘属性’);

<!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>
</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属性的意思 程序员自己添加的属性称为自定义属性
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));
        // 2. 设置元素属性值
        // （1）element.属性值 = '值'
        div.id = 'test';
        div.className = 'navs';
        // (2) element.serAttribute('属性值', '值'); 主要针对自定义属性
        div.setAttribute('index', 2);
        div.setAttribute('class', 'footer'); // class特殊 这里面写的就是class 不是className
        // 移除属性 removeAttribute(属性)
        div.removeAttribute('index');
    </script>
</body>
</html>

tab栏切换（重点案例）

当鼠标点击上面相应的选项卡（tab），下面内容跟随变化

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

<!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>
        * {
            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. 上的模块选项卡,点击某一个,当前这一个底色会是红色,其余不变(排他思想)修改类名的方式
        // 获取元素
        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() {
                // 干掉所有人 其余的li清除class这个类
                for (var i = 0; i < lis.length; i ++ ) {
                    lis[i].className = '';
                }
                // 留下我自己
                this.className = 'current';
                // 2. 下面显示内容模块
                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>

6.7 H5自定义属性

自定义属性目的:是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
自定义属性获取是通过getAttribute (‘属性’)获取。

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

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

设置H5自定义属性

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

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

获取H5自定义属性
兼容性获取element.getAttribute( ‘data-index’); 常用！
H5新增element.dataset.index或者element.dataset['index'] ie 11才开始支持

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

7 节点操作

7.1 为什么学节点操作

利用DOM提供的方法获取元素

document.getElementById()
document.getElementsByTagName()
document.querySelector等
逻辑性不强、繁琐

利用节点层级关系获取元素

利用父子兄节点关系获取元素
逻辑性强，但是兼容性稍差

7.2 节点概述

网页中的所有内容都是节点(标签、属性、文本、注释等),在DOM中,节点使用node来表示。
HTML DOM树中的所有节点均可通过JavaScript进行访问,所有HTML元素(节点)均可被修改,也可以创建或删除。

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

元素节点nodeType为1
属性节点nodeType为2
文本节点nodeType为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>
    <!-- 节点的优点 -->
    <div>我是div</div>
    <span>我是span</span>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <div class="box">
        <span class="erweima">×</span>
    </div>
    <script>
        var box = document.querySelector('.box');
        console.dir(box);
    </script>
</body>

</html>

7.3 节点层级

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

父级节点

node.parentNode

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

<!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>
</head>
<body>
    <div>我是div</div>
    <span>我是span</span>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <div class="box">
        <span class="erweima">×</span>
    </div>
    <script>
        // 1. 父节点 parentNode
        var erweima = document.querySelector('.erweima');
        // var box = document.querySelector('.box');
        // 得到的是离元素最近的父级节点（亲爸爸）  如果找不到父节点就返回为null
        console.log(erweima.parentNode);;
    </script>
</body>
</html>

子节点

parentNode.childNode(标准)

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

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

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

parentNode.children

parentNode.children是一个只读属性,返回所有的子元素节点。它只返回子元素节点,其余节点不返回(重点掌握)。

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

<!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>
</head>
<body>
    <div>我是div</div>
    <span>我是span</span>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <ol>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ol>
    <div class="box">
        <span class="erweima">×</span>
    </div>
    <script>
        var ul = document.querySelector('ul');
        var lis = ul.querySelector('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>
</body>
</html>

parentNode.firstChild

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

parentNode.lastChild

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

parentNode.firstElementChild

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

parentNode.lastElementChild

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

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

<!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>
</head>
<body>
    <ol>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
        <li>我是li5</li>
    </ol>
    <script>
        var ol = document.querySelector('ol');
        // 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>
</body>
</html>

下拉菜单

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

<!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>
        * {
            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>

兄弟节点

node.nextSibling

nextSibling返回当前元素的下一个兄弟节点，找不到则返回null。同样，也是包含所有的节点

node.previousSibling

previousSibling返回当前元素的上一个兄弟节点，找不到则返回null。同样，也是包含所有的节点

node.nextElementSibling

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

node.previousElementSibling

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

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

<!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>
</head>
<body>
    <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>
</body>
</html>

如何解决兼容性问题？

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

function getNextElementSibling(element) {
    var el = element;
    while (el = el.nextSibling) {
        if(el.nodeType === 1){
            return el;
        }
    }
    return null;
}

7.4 创建节点

document.createElement(‘tagName’);

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

node.appendChild(child)

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

node.insertBefore(child, 指定元素)

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

<!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>
</head>
<body>
    <ul>123</ul>
    <script>
        // 1. 创建节点元素节点
        var li = document.createElement('li');
        // 2. 添加节点 node.appendChild(child) node 父级 child 子级  后面追加元素  类似于数组中的push
        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>
</body>
</html>

简单版发布留言案例

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

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            padding: 100px;
        }
        
        textarea {
            width: 200px;
            height: 100px;
            border: 1px solid pink;
            outline: none;
            resize: none;
        }
        
        ul {
            margin-top: 50px;
        }
        
        li {
            width: 300px;
            padding: 5px;
            background-color: rgb(245, 209, 243);
            color: red;
            font-size: 14px;
            margin: 15px 0;
        }
    </style>
</head>
<body>
    <textarea name="" id="">123</textarea>
    <button>发布</button>
    <ul>
    </ul>
    <script>
        // 1.获取元素
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        // 注册事件
        btn.onclick = function() {
            console.log(text.value);
            if (text.value == '') {
                alert('您没有输入内容');
                return false;
            } else {
                console.log(text.value);
                // （1）创建元素
                var li = document.createElement('li');
                // 先有li 才能赋值 
                li.innerHTML = text.value;
                // （2）添加元素
                // ul.appendChild(li);
                ul.insertBefore(li, ul.children[0]);
            }

        }
    </script>
</body>
</html>

7.5 删除节点

node.removeChild(child)

node.removeChild()方法从DOM中删除一个子节点，返回删除的节点

<!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>
</head>
<body>
    <button>删除</button>
    <ul>
        <li>熊大</li>
        <li>熊二</li>
        <li>光头强</li>
    </ul>
    <script>
        // 1. 获取元素
        var ul = document.querySelector('ul');
        var btn = document.querySelector('button');
        // 2. 删除元素 node.removeChild(child);
        // ul.removeChild(ul.children[0]);
        // 3. 点击按钮依次删除里面的孩子
        btn.onclick = function() {
            if (ul.children.length == 0) {
                this.disabled = true;
            } else {
                ul.removeChild(ul.children[0]);
            }
        }
    </script>
</body>
</html>

删除留言案例

当我们把文本域里面的值赋值给li的时候，多添加一个删除的链接
需要把所有的链接获取过来,当我们点击当前的链接的时候,删除当前链接所在的li
阻止链接跳转需要添加javascript:void(0);或者javascript:;

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            padding: 100px;
        }
        
        textarea {
            width: 200px;
            height: 100px;
            border: 1px solid pink;
            outline: none;
            resize: none;
        }
        
        ul {
            margin-top: 50px;
        }
        
        li {
            width: 300px;
            padding: 5px;
            background-color: rgb(245, 209, 243);
            color: red;
            font-size: 14px;
            margin: 15px 0;
        }

        li a {
            float: right;
        }
    </style>
</head>
<body>
    <textarea name="" id="">123</textarea>
    <button>发布</button>
    <ul>
    </ul>
    <script>
        // 1.获取元素
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        // 注册事件
        btn.onclick = function() {
            console.log(text.value);
            if (text.value == '') {
                alert('您没有输入内容');
                return false;
            } else {
                console.log(text.value);
                // （1）创建元素
                var li = document.createElement('li');
                // 先有li 才能赋值 
                li.innerHTML = text.value + "<a href='javascrpt:;'>删除</a>";
                // （2）添加元素
                // ul.appendChild(li);
                ul.insertBefore(li, ul.children[0]);
                // (3)删除元素 删除的是当前的链接的li  它的父亲
                var as = document.querySelectorAll('a');
                for (var i = 0; i < as.length; i ++ ) {
                    as[i].onclick = function() {
                        // node.removeChild(child); 删除的是 li 当前a所在的li  this.parentNode
                        ul.removeChild(this.parentNode);
                    }
                }
            }
        }
    </script>
</body>
</html>

7.6 复制节点（克隆节点）

node.cloneNode()

node.cloneNode()方法返回调用该方法的节点的一个副本，也称为克隆节点/拷贝节点

注意：

如果括号参数为空或者为false,则是浅拷贝,即只克隆复制节点本身,不克隆里面的子节点。
如果括号参数为true,则是深度拷贝,会复制节点本身以及里面所有的子节点。

<!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>
</head>
<body>
    <ul>
        <li>1111</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        // 1. node.cloneNode();  括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
        // 1. node.cloneNode(true);  括号为true 深拷贝 复制标签复制里面的内容
        var lili = ul.children[0].cloneNode(true);
        ul.appendChild(lili);
    </script>
</body>
</html>

7.7 案例：动态生成表格

<!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>
        table {
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }
        
        td,
        th {
            border: 1px solid #333;
        }
        
        thead tr {
            height: 40px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <table cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
        // 1. 先去准备好学生的数据
        var datas = [
            {
            name: '魏璎珞',
            subject: 'JavaScript',
            score: 100
        }, {
            name: '弘历',
            subject: 'JavaScript',
            score: 98
        }, {
            name: '傅恒',
            subject: 'JavaScript',
            score: 99
        }, {
            name: '明玉',
            subject: 'JavaScript',
            score: 88
        }, {
            name: '大猪蹄子',
            subject: 'JavaScript',
            score: 0
        }];
        // 2. 往tbody里面创建行  有几个人（通过数组的长度）我们就创建几行
        var tbody = document.querySelector('tbody');
        for (var i = 0; i < datas.length; i ++ ) {  // 外面的for循环遍历对象
            // 1. 创建 tr行
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            // 2. 行里面创建单元格 td 单元格的数量取决于每个对象里面的属性个数  for循环遍历对象  datas[i]
            for (var k in datas[i]) { // 里面的for循环管列 td
                // 创建单元格
                var td = document.createElement('td');
                // 把对象里面的属性值 datas[i][k]给 td
                // console.log(datas[i][k]);
                td.innerHTML = datas[i][k];
                tr.appendChild(td);
            }
            // 3. 创建有删除两个字的单元格
            var td = document.createElement('td');
            td.innerHTML = '<a href="javascript:;">删除</a>';
            tr.appendChild(td);
        }
        // 4. 删除操作开始
        var as = document.querySelectorAll('a');
        for (var i = 0; i < as.length; i ++ ) {
            as[i].onclick = function() {
                // 点击a 删除当前a所在的行（链接的爸爸的爸爸） node.removeChild(child)
                tbody.removeChild(this.parentNode.parentNode);
            }
        }
    </script>
</body>
</html>

7.8 三种动态创建元素区别

document.write
element.innerHTML
document.createElement

区别

document.write是直接将内容写入页面的内容流,但是文档流执行完毕,则它会导致页面全部重绘
innerHTML是将内容写入某个DOM节点,不会导致页面全部重绘
innerHTML创建多个元素效率更高(不要拼接字符串,采取数组形式拼接),结构稍微复杂
createElement()创建多个元素效率稍低一点点,但是结构更清晰

总结:不同浏览器下,innerHTML效率要比createElement高

<!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>
</head>
<body>
    <button>点击</button>
    <p>abc</p>
    <div class="inner"></div>
    <div class="create"></div>
    <script>
        // windows.onload = function() {
        //     document.write('<div>123</div>');
        // }         
        // 三种动态创建元素区别
        // 1. document.write() 创建元素  如果页面文档流加载完毕，再调用这句话会导致页面重绘
        // var btn = document.querySelector('button');
        // btn.onclick = function() {
        //     document.write('<div>123</div>');
        // }
        
        // 2. innerHTML 创建元素
        var inner = document.querySelector('.inner');
        // for (var i = 0; i < 100; i ++ ) {  //拼接字符串 效率低
        //     inner.innerHTML += '<a href="#">百度</a>';
        // }
        var arr = []; // 数组形式拼接
        for (var i = 0; i < 100; i ++ ) {
            arr.push('<a href="#">百度</a>');
        }
        inner.innerHTML = arr.join(''); //数组转换为字符串
        // 3. document.createElement() 创建元素
        var create = document.querySelector('.create');
        for (var i = 0; i < 100; i ++ ) {
            var a = document.createElement('a');
            create.appendChild(a);
        }
    </script>
</body>
</html>

8 DOM重点核心

文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。

W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。

对于JavaScript,为了能够使JavaScript操作HTML,JavaScript就有了一套自己的dom编程接口。
对于HTML,dom使得html形成一棵dom树.包含文档、元素、节点

我们或取过来的DOM元素是一个对象（object），所以称为文档对象模型

关于dom操作，主要针对元素的操作，主要有创建、增、删、改、查、属性操作、事件操作

8.1 创建

document.write
innerHTML
createElement

8.2 增

appendChild
insertBefore

8.3 删

removeChild

8.4 改

主要修改dom的元素属性, dom元素的内容、属性,表单的值等

修改元素属性: srC、href、title等
修改普通元素内容:innerHTML、innerText
修改表单元素:value、type、disabled等
修改元素样式:style、className

8.5 查

主要获取查询dom的元素

DOM提供的API方法: getElementById、 getElementsByTagName 古老用法不太推荐
H5提供的新方法: querySelector、 querySelectorAll 提倡
利用节点操作获取元素:父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling) 提倡