javascript 基础（76-107）

O_oregou

已于 2023-01-15 16:51:34 修改

阅读量1.6k

点赞数

文章标签： javascript 前端 html

于 2023-01-10 21:31:44 首次发布

本文链接：https://blog.csdn.net/O_osange/article/details/128636648

版权

文章目录

1.DOM（Document Object Model）
- 节点
- 节点的属性
2.事件
3.文档的加载
4.DOM查询
- 1.获取元素节点
- 2.获取元素节点的子节点
- 3.获取父节点和兄弟节点
- 轮播图设置
5.全选练习
6.DOM查询其余方法介绍
- getElementsByClassName( )根据class属性值获取一组元素节点对象
- document.querySelector( )根据一个css选择器来查询一个元素节点对象
- document.querySelectorAll( ) 将符合条件的元素封装到一个数组中返回
- appendChild( ) 把新的子节点添加到指定节点
- removeChild( ) 删除子节点
- replaceChild( ) 替换子节点
- insertBefore( ) 在指定的子节点前面插入新的子节点
- createElement( ) 创建元素节点
- createElement( ) 创建文本节点
- 自定义属性
7.添加删除记录练习
- confirm( ) 用于弹出一个带有确认和取消的按钮提示框
8.使用DOM操作css
- 通过style操作
- 读取元素当前样式
- 其他样式相关属性
9.事件对象
- 元素.onmousemove 该事件将会在鼠标在元素中移动时触发
- 事件对象.clientX 可以获取可见窗口鼠标指针的水平坐标
- 事件对象.clientY 可以获取可见窗口鼠标指针的垂直坐标
- 事件对象.pageX 获取鼠标相对于当前页面的水平坐标
- 事件对象.pageY 获取鼠标相对于当前页面的垂直坐标
10.冒泡
- 取消冒泡
- 事件对象.cancelBubble
11.事件的委派
- 事件对象.target 表示的是触发事件的对象
12.事件的绑定
- addEventListener( )
13.事件的传播
14.事件练习：拖拽

1.DOM（Document Object Model）

节点

节点分为四类

文档节点：整个HTML文档
元素节点：HTML文档中的HTML标签
属性节点：元素的属性
文本节点：HTML标签中的文本内容

节点的属性

在这里插入图片描述

<body>
    <button id="btn">这是一个按钮</button>
    <script>
        //获取button对象
        var btn = document.getElementById("btn");
        console.log(btn);
        //修改按钮里面的文字
        console.log(btn.innerHTML);
        btn.innerHTML = "被修改的按钮";
    </script>
</body>

在这里插入图片描述

2.事件

在这里插入图片描述
事件，就是用户和浏览器之间的交互行为
比如：点击按钮，鼠标移动，关闭窗口… …

<body>
<button id="btn" onclick="alert('你点我干嘛')">我是一个按钮</button>
<!-- 我们可以在事件对应的属性中设置一些js代码，这样当事件被触发时，这些代码将会执行
但是这种写法我们称为结构和行为耦合，不方便维护，不推荐使用 -->
</body>

<body>
    <!-- <button id="btn" οnclick="alert('你点我干嘛')">我是一个按钮</button> -->
    <!-- 我们可以在事件对应的属性中设置一些js代码，这样当事件被触发时，这些代码将会执行
    但是这种写法我们称为结构和行为耦合，不方便维护，不推荐使用 -->
    <button id="btn">我是一个按钮</button>
    <script>
        //可以为按钮的对应事件绑定处理函数的形式来响应事件,这样当事件被触发时，其对应的函数将会被调用
        var btn = document.getElementById("btn");
        //绑定一个双击事件
        //像这种双击事件绑定的函数，我们称为双击响应函数
        btn.ondblclick = function(){
            alert("你点我两下干嘛");
        }
    </script>
</body>

在这里插入图片描述

3.文档的加载

onload 事件会在整个页面加载完成之后才会触发

<head>
    <script>
        window.onload = function(){
            var btn = document.getElementById("btn");
            btn.ondblclick = function(){
                btn.innerHTML = "这是被双击后的按钮";
            }
        }
    </script>
</head>
<body>
    <button id="btn">这是一个按钮</button>
</body>

4.DOM查询

在这里插入图片描述

1.获取元素节点

getElementById( ) 通过id属性获取一个元素节点对象

getElementsByTagName( ) 通过标签名字获取一组元素节点对象

getElementsByName( ) 通过name属性获取一组元素节点对象

2.获取元素节点的子节点

getElementBtTagName( ) 返回当前节点的指定标签名后代节点

childNodes 表示当前节点的所有子节点

children 可以获取当前元素的所有子元素

firstChild 表示当前节点的第一个子节点

firstElementChild 可以获取到当前元素的第一个子元素

3.获取父节点和兄弟节点

parentNode 表示当前节点的父节点

previousSibling 表示当前节点的前一个兄弟节点

previousElementSibling 该属性会获取前一个兄弟元素

nextSibling 表示当前节点后的一个兄弟节点

nextElementSibling 该属性会获取后一个兄弟元素

<!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;
            box-sizing: border-box;
            list-style: none;
            text-decoration: none;
        }

        img{display: block;}

        body{
            font-family: Arial;
        }

        .clear:before,.clear:after{
            content: " ";
            display: block;
            clear: both;
        }

        #total{
            float: left;
            width: 250px;
            height: 320px;
            margin-left: 350px;
            border: 1px solid black;
        }
        #total p{
            margin-top: 10px;
            margin-left: 10px;
        }

        #city{
            float: left;
            margin-top: 10px;
        }
        #city li{
            float: left;
            background-color: yellowgreen;
            border: 1px black solid;
            margin-left: 10px;
        }

        #game{
            float: left;
            margin-top: 10px;
        }
        #game li{
            float: left;
            background-color: yellowgreen;
            border: 1px black solid;
            margin-left: 10px;
        }

        #phone{
            float: left;
            margin-top: 10px;
        }
        #phone li{
            float: left;
            background-color: yellowgreen;
            border: 1px black solid;
            margin-left: 10px;
        }

        .inner{
            float: left;
            border: 1px solid black;
            margin-left: 50px;

        }

        #btnList{
            float: left;
            margin-left: 50px;
        }

        button{
            margin-top: 7px;
        }
    </style>
    <script>
        //定义一个函数，专门用来为指定元素绑定单击响应
        //参数：
        //      1.  idStr  要绑定单击响应函数的对象的 id 属性值
        //      2.   fun   事件的回调，当单击元素时，函数将会被触发
        function MyOnclick(idStr,fun){
            var btn = document.getElementById(idStr);
            btn.onclick = fun;
        }
        
    window.onload = function(){
        // 查找#bj节点
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function(){
                // alert("aaa");
                var bj = document.getElementById("bj");
                alert(bj.innerHTML);
            };

        // 查找所有li节点
            var btn02 = document.getElementById("btn02");
            btn02.onclick = function(){
                //getElementsByTagName()可以根据标签名来获取一组元素节点对象
                //这个方法会给我们返回一个类数组对象，所有查询到的对象都会封装到类数组对象中
                //即使查询到的元素只有一个，也会封装到类数组对象中返回
                var lis = document.getElementsByTagName("li");
                // alert(lis.length);
                for(var i=0;i<lis.length;i++)
                {
                    alert(lis[i].innerHTML);
                }
            };

        // 查找name=gender的所有节点
            var btn03 = document.getElementById("btn03");
            btn03.onclick = function(){
                var inputs = document.getElementsByName("gender");
                for(var i=0;i<inputs.length;i++)
                {
                    //innerHTML用于获取元素内部的HTML代码的
                    //对于自结束标签无意义
                    // alert(inputs[i].innerHTML);

                    //如果需要读取元素节点属性，直接使用元素.属性名
                    //  例子：元素.name     元素.value
                    //  class 属性不能采用这种方式
                    //      读取class属性时需要使用  元素.className
                    alert(inputs[i].value);
                }
            };
        
        // 查找#city下所有的li节点
            var btn04 = document.getElementById("btn04");
            btn04.onclick = function(){
                //获取id 为city的元素
                var city = document.getElementById("city");
                var lis = city.getElementsByTagName("li");
                // alert(lis.length);
                for(var i=0;i<lis.length;i++)
                {
                    alert(lis[i].innerHTML);
                }
            };

        // 返回#city所有子节点
            var btn05 = document.getElementById("btn05");
            btn05.onclick = function(){
                //获取id 为city的节点
                var city = document.getElementById("city");
                //childNodes属性会获取包括文本节点在内的所有                节点         （包括换行）根据DOM标签标签间空白也会当成文本节点
                //注意：在IE 8及其以下的浏览器中，不会将空白文本当成子节点，所以该属性在IE 8中会返回正常个数的子元素
                var lis = city.childNodes;
                alert(lis.length);

                //children属性可以获取当前元素的所有                        子元素
                // var lis2 = city.children;
                // alert(lis2.length);
                // for(var i=0;i<lis2.length;i++)
                // {
                //     alert(lis2[i].innerHTML);
                // }
            };

        // 返回#phone的第一个子节点
            var btn06 = document.getElementById("btn06");
            btn06.onclick = function(){
                var phone = document.getElementById("phone");
                // var fir = phone.childNodes[0];
                //firstChild可以获取到当前元素的第一个                                子节点
                var fir = phone.firstChild;
                alert(fir.innerHTML);
                
                //firstElementChild可以获取到当前元素的第一个                        子元素
                //注意：firstElementChild 不兼容IE 8及其以下的浏览器
                // var fir2 = phone.firstElementChild
                // alert(fir2.innerHTML);
            };




        // //      1.  idStr  要绑定单击响应函数的对象的 id 属性值
        // //      2.   fun   事件的回调，当单击元素时，函数将会被触发
            //     function MyOnclick(idStr,fun){
            //           var btn = document.getElementById(idStr);
            //           btn.onclick = fun;
            //     }
        // 返回#bj的父节点
                MyOnclick("btn07",function(){
                    // alert("hello");
                    var bj = document.getElementById("bj");
                    var pn = bj.parentNode;
                    alert(pn.innerHTML); 
                    //innerText  该属性可以获取到元素内部的文本内容
                    //它和  innerHTML  类似，不同的是它会自动将html标签去除
                    alert(par.innerText);
                });

        // 返回#android的前一个兄弟节点
                MyOnclick("btn08",function(){
                    var and = document.getElementById("android");
                    //previousSibling 该属性会返回前一个兄弟节点（也可能获取到空白的文本）         节点
                    var ps = and.previousSibling;
                    alert(ps.innerText);


                    // previousElementSibling 该属性会获取前一个兄弟元素                          元素
                    ps = and.previousElementSibling
                    alert(ps.innerHTML)
                });
        // 返回#android的下一个兄弟节点
                // MyOnclick("btn08",function(){
                //     var and = document.getElementById("android");
                //     var ps = and.nextSibling;
                //     alert(ps.innerText);
                //     ps = and.nextElementSibling;
                //     alert(ps.innerHTML);
                // });

        // 返回#username的value属性值
                    MyOnclick("btn09",function(){
                        var use = document.getElementById("username");
                        //文本框的value属性值，就是文本框中填写的内容
                        alert(use.value);
                    });

        // 设置#username的value属性值
                    MyOnclick("btn10",function(){
                        var use = document.getElementById("username");
                        use.value = "我被修改了";
                    });

        // 返回#bj的文本值
                    MyOnclick("btn11",function(){
                        var bj = document.getElementById("bj");
                        // alert(bj.innerHTML);

                        var fc = bj.firstChild;
                        alert(fc.nodeValue);
                    });
    
    }



    </script>
</head>
<body>
    <div id="total">
        <p>
            你喜欢那个城市
        </p>
        <ul id="city">
            <li id="bj">北京</li>
            <li>上海</li>
            <li>福州</li>
            <li>厦门</li>
        </ul>
        <br>
        <br>

        <p>
            你喜欢那款单击游戏
        </p>
        <ul id="game">
            <li id="rl">红警</li>
            <li>实况</li>
            <li>极品飞车</li>
            <li>魔兽</li>
        </ul>

        <br>
        <br>

        <p>
            请问你手机的操作系统是
        </p>
        <ul id="phone">
                <li>IOS</li>
                <li id="android">Android</li>
                <li>window phone</li>
        </ul>
    </div>
    <div class="inner">
        gender:
        <input type="radio" name="gender" value="male"/>
        Male:
        <input type="radio" name="gender" value="female"/>
        <br>
        <br>
        name:
        <input type="text" name="name" id="username" value="abcde"/>
    </div>
    <div id="btnList">
        <div><button id="btn01">查找#bj节点</button></div>
        <div><button id="btn02">查找所有li节点</button></div>
        <div><button id="btn03">查找name=gender的所有节点</button></div>
        <div><button id="btn04">查找#city下所有的li节点</button></div>
        <div><button id="btn05">返回#city的素有子节点</button></div>
        <div><button id="btn06">返回#phone的第一个子节点</button></div>
        <div><button id="btn07">返回#bj的父节点</button></div>
        <div><button id="btn08">返回#android的前一个兄弟节点</button></div>
        <div><button id="btn09">返回#username的value属性值</button></div>
        <div><button id="btn10">设置#username的value属性值</button></div>
        <div><button id="btn11">返回#bj的文本值</button></div>
    </div>
</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>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;
            text-decoration: none;
        }
        img{display: block;}

        body{
            font-family: Arial;
        }
        .clear:before,.clear:after{
            content: " ";
            display: block;
            clear: both;
        }

        #pts{
            width: 400px;
            height: 300px;
            margin: 0 auto;
            background-color: rgb(142, 227, 15);
            text-align: center;
        }
        button{
            margin-top: 30px;
        }
        img{
            margin: 0 auto;
        }

    </style>
    <script>
        window.onload = function(){

            //点击按钮切换图片
            //获取两个按钮
            var last = document.getElementById("last");
            var next = document.getElementById("next");
            //要切换图片，就是修改 img 标签里面的 src 属性
            //获取img标签
            var img = document.getElementsByTagName("img")[0];

            //创建一个数组来保存图片路径
            var imgArr = ["./img/2022.12.20/1.svg","./img/2022.12.20/2.svg","./img/2022.12.20/3.svg","./img/2022.12.20/4.svg"]
            //创建一个变量，来保存当前索引
            var index = 0;

            //提示信息
            var info = document.getElementById("info");
            info.innerHTML = "一共"+imgArr.length+"张图片，这是第"+(index+1)+"张";

            //分别对两个按钮绑定单击响应
            last.onclick = function(){
                // if(index-1<0)
                // {
                //     index = imgArr.length - 1;
                // }
                index--;
                if(index<0)
                {
                    index = imgArr.length-1;
                }
                img.src = imgArr[index];
                info.innerHTML = "一共"+imgArr.length+"张图片，这是第"+(index+1)+"张";
            };
            next.onclick = function(){
                // if(index+1>=imgArr.length)
                // {
                //     index = 0;
                // }
                index++;
                if(index>imgArr.length-1)
                {
                    index = 0;
                }
                img.src = imgArr[index];
                info.innerHTML = "一共"+imgArr.length+"张图片，这是第"+(index+1)+"张";
            };


        }
        
    </script>

</head>
<body>
    <div id="pts">
        <p id="info"></p>
        <img src="./img/2022.12.20/1.svg" alt="">
        <!-- <img src="./图片/2022.12.20/太阳2.svg" alt="">
        <img src="./图片/2022.12.20/太阳3.svg" alt="">
        <img src="./图片/2022.12.20/太阳4.svg" alt=""> -->

        <button id="last">上一张</button>
        <button id="next">下一张</button>
    </div>


</body>
</html>

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>
    <script>
        window.onload = function()
        {
            // 获取四个多选框items
            var items = document.getElementsByName("items");

            var checkedAllBox = document.getElementById("checkedAllBox");

            //  1.#checkedAllBtn
            //  全选按钮：点击按钮以后，四个多选框全都被选中
            //  为 id 为 checkedAllBtn 的按钮绑定一个单击响应函数
            var checkedAllBtn = document.getElementById("checkedAllBtn");
            checkedAllBtn.onclick = function()
            {
                for(var i=0;i<items.length;i++)
                {
                    // 设置四个多选框变为选中状态
                    // 通过多选框的checked属性可以来获取或者设置多选框的选中状态
                    items[i].checked = true;
                }
                // var checkedAllBox = document.getElementById("checkedAllBox");
                checkedAllBox.checked = true;
            };

            //  2.#checkedNoBtn
            //  全不选按钮：点击按钮之后，四个多选框的选中状态都变成未选中
            var checkedNoBtn = document.getElementById("checkedNoBtn");
            checkedNoBtn.onclick = function()
            {
                // var items = document.getElementsByName("items");
                for(var i=0;i<items.length;i++)
                {
                    items[i].checked = false;
                }
                // var checkedAllBox = document.getElementById("checkedAllBox");
                checkedAllBox.checked = false;
            }

            //  3.#checkedRevBox
            //  反选按钮：点击按钮之后，多选框已被选中的按钮变成未选中，未选中的按钮变成已选中状态
            var checkedRevBtn = document.getElementById("checkedRevBtn");
            checkedRevBtn.onclick = function()
            {
                //在反选时也需要判断四个多选框是否全都选中
                //将checkedAllBox设置为true
                checkedAllBox.checked = true;

                // var items = document.getElementsByName("items");
                for(var i=0;i<items.length;i++)
                {
                    // if(items[i].checked)
                    // {
                    //     items[i].checked = false;
                    // }
                    // else
                    // {
                    //     items[i].checked = true;
                    // }

                    items[i].checked = !items[i].checked;
                    //判断四个多选框是否全选
                    if(!items[i].checked)
                    {
                        //一旦进入判断，就不是全选状态
                        //将checkedAllBox设置为false
                        checkedAllBox.checked = false;
                        //一旦进入判断，就得到结果，可以结束循环
                    }
                }
            }

            //  4.#sendBtn
            //  提交按钮：点击按钮之后将所有的选中的多选框弹出多选框的 value 的属性值
            var sendBtn = document.getElementById("sendBtn");
            sendBtn.onclick = function()
            {
                for(var i=0;i<items.length;i++)
                {
                    if(items[i].checked)
                    {
                        alert(items[i].value);
                    }
                    
                }
            }

            //  5.#checkedAllBox
            //  全选/全不选 多选框：当它选中时，其余也选中；当它取消时，其余的也取消    
            // var checkedAllBox = document.getElementById("checkedAllBox");
            checkedAllBox.onclick = function()
            {
                // if(checkedAllBox.checked)
                // {
                //     for(var i=0;i<items.length;i++)
                //     {
                //         items[i].checked = !items[i].checked;
                //     }
                // }
                // else
                // {
                //     for(var i=0;i<items.length;i++)
                //     {
                //         items[i].checked = !items[i].checked;
                //     }
                // }
                for(var i=0;i<items.length;i++)
                {
                    // items[i].checked = checkedAllBox.checked;

                    //  在事件响应函数中，响应函数是给谁绑定的，this就是谁
                    items[i].checked = this.checked;
                }
            }

            //  6.items
            //  如果四个多选框被选中，则checkedAllBox也被选中
            //  如果四个多选框被取消，则checkedAllBox也被取消
            //  为四个多选框绑定单击响应函数
            for(var i=0;i<items.length;i++)
            {
                items[i].onclick = function()
                {
                    //将checkedAllBox设置为true
                    checkedAllBox.checked = true;
                    
                    //判断四个多选框是否全选
                    for(var j=0;j<items.length;j++)
                    {
                        if(!items[j].checked)
                        {
                            //一旦进入判断，就不是全选状态
                            //将checkedAllBox设置为false
                            checkedAllBox.checked = false;
                            //一旦进入判断，就得到结果，可以结束循环
                            break;
                        }
                    }
                }
            }

        }
    </script>
</head>
<body>
    <form action="">
        你最喜欢的运动是？<input type="checkbox" id="checkedAllBox"><label for="checkedAllBox">全选/全不选</label>
        <br>
        <input type="checkbox" name="items" value="足球" id="zq">足球
        <input type="checkbox" name="items" value="篮球" id="lq">篮球
        <input type="checkbox" name="items" value="羽毛球" id="ymq">羽毛球
        <input type="checkbox" name="items" value="乒乓球" id="ppq">乒乓球
        <br>
        <input type="button" id="checkedAllBtn" value="全选">
        <input type="button" id="checkedNoBtn" value="全不选">
        <input type="button" id="checkedRevBtn" value="反选">
        <input type="button" id="sendBtn" value="提交">
    </form>
</body>
</html>

6.DOM查询其余方法介绍

<script>
    window.onload = function()
    {
        //获取body标签
        // var body = document.getElementsByTagName("body")[0];
        // console.log(body);

        //在document中有一个属性body，它保存的是body的引用
        var body = document.body;
        console.log(body);

        //document.documentElement 保存的是html标签
        var html = document.documentElement;
        console.log(html);

        //document.all 代表页面中的所有元素
        var all = document.all;
        // var all = document.getElementsByTagName("*");
        console.log(all);
        for(var i=0;i<all.length;i++)
        {
            console.log(all[i]);
        }
    }
</script>

在这里插入图片描述

getElementsByClassName( )根据class属性值获取一组元素节点对象

像这一类方法获取到的一组元素节点都是伪数组
但是可以通过 Array.from( ) 的方式转变为数组

var box1 = document.getElementsByClassName("box1");
console.log(box1.length);
var box1 = document.getElementsByClassName("box1")[0];
console.log(box1.innerHTML);

在这里插入图片描述

document.querySelector( )根据一个css选择器来查询一个元素节点对象

//document.querySelector() 可以根据选择器作为参数，可以根据一个css选择器来查询一个元素节点对象
//但是使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么他只会返回第一个
var box1_div = document.querySelector(".box1 div")
console.log(box1_div.innerHTML);

document.querySelectorAll( ) 将符合条件的元素封装到一个数组中返回

// document.querySelectorAll( )该方法不同的是他会将符合条件的元素封装到一个数组中返回
//即使符合条件的元素只有一个，它也会返回数组
var box1_alldiv = document.querySelectorAll(".box1 div");
console.log(box1_alldiv.length);
console.log(box1_alldiv[0].innerHTML);
console.log(box1_alldiv[1].innerHTML);

appendChild( ) 把新的子节点添加到指定节点

removeChild( ) 删除子节点

replaceChild( ) 替换子节点

insertBefore( ) 在指定的子节点前面插入新的子节点

createElement( ) 创建元素节点

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>
    <style>
        *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        list-style: none;
        text-decoration: none;
        }
        img{display: block;}

        body{
            font-family: Arial;
        }
        .clear:before,.clear:after{
            content: " ";
            display: block;
            clear: both;
        }

        #total{
            float: left;
            width: 300px;
            margin-left: 400px;
            margin-right: 50px;
            padding-bottom: 20px;
            border: 1px solid black;
        }
        #total p{
            margin-top: 20px;
            margin-left: 10px;
        }

        #city{
            float: left;
        }
        #city li{
            float: left;
            margin-left: 10px;
            margin-top: 20px;
            border: 1px solid black;
            background-color: yellowgreen;
        }

        #btnList {
            float: left;
        }
        #btnList div{
            margin-top: 5px;
        }
        #btnList button {
            width: 300px;
        }
    </style>
    <script>
        var MyOnclick = function(idStr,fun)
        {
            var btn = document.getElementById(idStr);
            btn.onclick = fun;
        }


        window.onload = function()
        {
            // 1.创建一个"广州"节点，添加到#city下
            MyOnclick("btn01",function()
            {
                //创建一个广州节点  <li>广州</li>
                //创建一个li元素节点
                // document.createElement()
                //可以创建一个元素节点对象，它需要一个标签名作为参数，将会根据该标签名字创建元素节点对象，并将创建好的对象作为返回值返回
                var gz_li = document.createElement("li");

                //创建一个文本节点
                // document.createTextNode()
                //可以创建一个文本节点对象，它需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
                var gz_text = document.createTextNode("广州");

                //将 gz_text 设置为 li 的子节点
                //appendChild()
                //可以向一个父节点中添加一个新的子节点
                //   用法：   父元素.appendChild(子节点);
                gz_li.appendChild(gz_text);

                //获取id为#city的节点
                var city = document.getElementById("city");
                
                //将广州添加到#city下
                city.appendChild(gz_li);
            });

            // 2.将"广州"节点插入到#bj前面
            MyOnclick("btn02",function()
            {
                var gz_li = document.createElement("li");
                var gz_text = document.createTextNode("广州");
                gz_li.appendChild(gz_text);
                
                //获取id 为 bj 的节点
                var bj = document.getElementById("bj");
                
                //获取id 为 city 的节点
                var city = document.getElementById("city");

                //insertBefore()
                //可以在指定的直接点前面插入新的子节点
                //      用法：父节点.insertBefore(新节点，旧节点);
                city.insertBefore(gz_li,bj);
            });
            
            // 3.使用"广州"节点替换#bj节点
            MyOnclick("btn03",function()
            {
                var gz_li = document.createElement("li");
                var gz_text = document.createTextNode("广州");
                gz_li.appendChild(gz_text);
                
                //获取id 为 bj 的节点
                var bj = document.getElementById("bj");
                
                //获取id 为 city 的节点
                var city = document.getElementById("city");

                //replaceChild( )
                //可以使用指定的子节点替换已有的子节点
                //语法：   父节点.replaceChild(新节点，旧节点);
                city.replaceChild(gz_li,bj);   
            });

            // 4.删除#bj节点
            MyOnclick("btn04",function()
            {
                var bj = document.getElementById("bj");

                // 方法一：
                // var city = document.getElementById("city");

                // //removeChild( )
                // //可以删除一个子节点
                // //语法：    父节点.remove(子节点);
                // city.removeChild(bj);

                // 方法二：（常用）
                //      子节点.parentNode.removeChild(子节点)
                bj.parentNode.removeChild(bj);
            });

            // 5.读取#city内的HTML代码
            MyOnclick("btn05",function()
            {
                // var city = document.getElementById("city");

                var city = document.querySelector("#city");
                alert(city.innerHTML);
            });

            // 6.设置#bj内的HTML代码
            MyOnclick("btn06",function()
            {
                var city = document.querySelector("#bj");
                bj.innerHTML = prompt("请输入需要的设置：");
            });

            // 7.用innerHTML的方式向#city添加广州
            MyOnclick("btn07",function()
            {
                // var city = document.querySelector("#city");
                // city.innerHTML += "<li>广州</li>";

                //使用innerHTML也可以完成DOM的增删改相关工作
                //一般我们会两种一起结合使用
                var city = document.querySelector("#city");
                var gz_li = document.createElement("li");
                gz_li.innerHTML = "广州";
                city.appendChild(gz_li);
            });
        }
    </script>
</head>
<body>
    <div id="total">
        <div class="inner">
            <p>
                你喜欢哪个城市？
            </p>
            <ul id="city">
                <li id="bj">北京</li>
                <li>上海</li>
                <li>东京</li>
                <li>首尔</li>
            </ul>
        </div>
    </div>
    <div id="btnList">
        <div><button id="btn01">创建一个"广州"节点，添加到#city下</button></div>
        <div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
        <div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
        <div><button id="btn04">删除#bj节点</button></div>
        <div><button id="btn05">读取#city内的HTML代码</button></div>
        <div><button id="btn06">设置#bj内的HTML代码</button></div>
        <div><button id="btn07">用innerHTML的方式向#city添加广州</button></div>
    </div>
</body>
</html>

自定义属性

username.setAttribute(“属性名”,“属性值”)

console.log(username.getAttribute(“属性名”))

username.removeAttribute(“属性名”)

添加自定义属性
username.setAttribute(“属性名”,“属性值”)
获取自定义属性
console.log(username.getAttribute(“属性名”))
删除自定义属性
username.removeAttribute(“属性名”)

应用举例：

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        var lis = document.getElementsByTagName("li")
        for (var i = 0; i < lis.length; i++) {
            lis[i].setAttribute("lis", "li - " + (i + 1))
        }
    </script>
</body>

在这里插入图片描述

在h5的新标准中，最好在自定义属性前面加上 `data-`

元素.dataset.属性名，（添加data-属性）

console.log(元素.dataset)，（读取data-属性）

delete 元素.dataset.属性名，（删除data-属性）

<body>
    <button id="btn1">删除自定义属性</button>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        var lis = document.getElementsByTagName("li")
        for (var i = 0; i < lis.length; i++) {
            lis[i].dataset.lkj = "lkj - " + (i + 1)
            lis[i].dataset.nb = "nb - " + (i + 1)
            console.log(lis[i].dataset)
        }
        var btn1 = document.getElementById("btn1")
        btn1.onclick = function () {
            for (var i = 0; i < lis.length; i++) {
                delete lis[i].dataset.lkj
            }
        }
    </script>
</body>

7.添加删除记录练习

confirm( ) 用于弹出一个带有确认和取消的按钮提示框

<!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;
        box-sizing: border-box;
        list-style: none;
        text-decoration: none;
        }
        img{display: block;}

        body{
            font-family: Arial;
        }
        .clear:before,.clear:after{
            content: " ";
            display: block;
            clear: both;
        }

        h4{
            margin-left: 65px;
        }
    </style>
    <script>
                function delA()
                {
                    //点击超链接之后删除超链接所在的那一行
                    //获取当前的tr
                    var tr = this.parentNode.parentNode;

                    //删除之前弹出提示框
                    //获取name
                    // var name = tr.firstElementChild.innerText;
                    // var name = tr.getElementsByTagName("td")[0].innerHTML;
                    var name = tr.children[0].innerHTML;

                    //confirm( ) 用于弹出一个带有确认和取消的按钮提示框，需要一个字符串作为参数，该字符串会作为提示文字显示
                    //如果用户点击确认则会返回 true ，如果用户点击取消则会返回 false 
                    var decide = confirm("确认删除"+name+"嘛？");
                    if(decide)
                    {
                        //删除tr
                        tr.parentNode.removeChild(tr);
                        // this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
                    }
                };

        window.onload =function()
        {
            //点击超链接之后，删除一个员工的信息
            //      获取所有超链接
            var allA = document.getElementsByTagName("a");
            //      为每个超链接都绑定一个单击响应函数
            for(var i=0;i<allA.length;i++)
            {
                allA[i].onclick = delA;
            }

            //添加员工的功能
            //点击按钮之后，将员工的信息添加到表格中
            //为提交按钮绑定单击响应函数
            var addEmpButton = document.getElementById("addEmpButton");
            addEmpButton.onclick = function(){
                //获取用户填写的员工信息
                //获取员工empName,email,Salary
                var name = document.getElementById("empName").value;
                var email = document.getElementById("email").value;
                var salary = document.getElementById("salary").value;

                // 方法一：
                // //获取 tbody 标签
                // // var oldTr = document.getElementsByTagName("tr")[1];
                // var tbody = document.getElementsByTagName("tbody")[0];

                // // var table = document.getElementById("table");
                // //创建tr 和 td 和 a标签
                // var tr = document.createElement("tr");
                // var tdName = document.createElement("td");
                // var tdEmail = document.createElement("td");
                // var tdSalary = document.createElement("td");
                // var tdA = document.createElement("td");
                // var a = document.createElement("a");

                // //为rd标签和a标签写入文本内容，和设置a标签的href属性
                // tdName.innerHTML = name;
                // tdEmail.innerHTML = email;
                // tdSalary.innerHTML = salary;
                // a.innerHTML = "Delete";
                // a.href = "#";

                // //将td和tr标签插入tbody内部
                // tdA.appendChild(a);
                               
                // tbody.appendChild(tr);
                // tr.appendChild(tdName);
                // tr.appendChild(tdEmail);
                // tr.appendChild(tdSalary);
                // tr.appendChild(tdA);
                
                // // 设置a标签的单击响应函数
                // a.onclick = delA;

                // 方法二：
                // //创建一个tr
                //创建一个tr
                var tr = document.createElement("tr");
                //设置tr中的内容
                tr.innerHTML = 
                "<td>"+name+"</td>"+
                "<td>"+email+"</td>"+
                "<td>"+salary+"</td>"+
                "<td><a href='#'>Delete</a></td>";
                //获取tr中的a元素
                a = tr.getElementsByTagName("a")[0];
                a.onclick = delA;
                //获取table
                var table = document.getElementById("table");
                //获取table里面的tbody
                var tbody = table.getElementsByTagName("tbody")[0];
                //将tr添加到tbody中
                tbody.appendChild(tr);
            };
        }
    </script>
</head>
<body style="padding-left: 600px;">
    <table id="table" border="1" cellspacing="0" style="margin-bottom: 50px;">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <td>一号</td>
            <td>yihao@yihao.com</td>
            <td>1000</td>
            <td><a href="#">Delete</a></td>
        </tr>
        <tr>
            <td>二号</td>
            <td>erhao@yihao.com</td>
            <td>2000</td>
            <td><a href="#">Delete</a></td>
        </tr>
        <tr>
            <td>三号</td>
            <td>sanhao@yihao.com</td>
            <td>3000</td>
            <td><a href="#">Delete</a></td>
        </tr>
    </table>

    <div id="formDiv" style="padding-left: 40px;" >
        <h4>添加新的员工</h4>
        <table border="1" cellspacing="0" >
            <tr>
                <td class="word">name:</td>
                <td class="inp">
                    <input type="text" name="empName" id="empName">
                </td>
            </tr>
            <tr>
                <td class="word">email:</td>
                <td class="inp">
                    <input type="text" name="email" id="email">
                </td>
            </tr>
            <tr>
                <td class="word">salary</td>
                <td class="inp">
                    <input type="text" name="salary" id="salary">
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button id="addEmpButton" value="abc">
                        Submit
                    </button>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

8.使用DOM操作css

通过style操作

<style>
#box1 {
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
<script>
window.onload = function() {
//点击按钮01之后修改box1的css
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function() {
//通过js修改css样式
//语法：    元素.style.样式名 = "样式值";
//通过style设置的样式都是内联样式，但是如果在样式中写了 ！important 则此时的样式优先级会达到最高，即使是js也无法覆盖
//注意：    如果css的样式名字中含有 - ,则改用驼峰法输入
box1.style.width = "100px";
box1.style.height = "100px";
box1.style.backgroundColor = "red";
};

//点击按钮02之后，读取元素的样式
var btn02 = document.getElementById("btn02");
btn02.onclick = function() {
//读取样式
//语法：    元素.style.样式名;
//通过style设置和读取的都是内联样式
alert(box1.style.backgroundColor);
};

};
</script>
</head>

<div id="box1"></div>
<button id="btn01">btn01</button>
<button id="btn02">btn02</button>
</body>

读取元素当前样式

getComputedStyle()
这个方法是window的方法，可以直接使用
需要两个参数：
1.要获取样式的元素
2.可以传递一个伪元素,一般都传null
该方法会返回一个对象，对象中封装了当前元素对应的样式
注意：通过getComputedStyle( )获取到的样式都是只读的，如果需要修改必须通过style属性

其他样式相关属性

元素.clienwidth

元素.clienheight

这两个属性可以获取元素的可见宽度和高度，这些属性都是不带"px"的一个number，可以直接进行计算
可见高度宽度：元素高度宽度，包括内容区域和内边距，不包括外边距和边框
这些属性都是只读的，不能修改

元素.offsetWidth

元素.offsetHeight

获取元素的高度/宽度和内容区域、内边距、边框

元素.offsetParent

可以用来获取当前元素的定位父元素
会获取到离当前最近的开启了定位的祖先元素

元素.offsetLeft

当前元素相对于其定位元素的水平偏移量

元素.offsetTop

当前元素相对于其定位元素的垂直偏移量

元素.scrollWidth

可以获取元素的整个宽度，包括滚动区

元素.scrollHeight

可以获取元素的整个高度，包括滚动区

元素.scrollLeft

可以获取滚动条水平滚动距离

元素.scrollTop

可以获取滚动条垂直滚动距离

当满足
scrollHeight - scrollTop == clienHeight
说明垂直滚动条，滚动到底了
水平滚动条同理

<!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>
        #box1{
            width: 100px;
            height: 100px;
            background-color: aqua;
            padding: 10px;
            /* margin: 10px; */
            border: 10px solid black;
        }

        #box2 {
            padding: 100px;
            background-color: yellowgreen;
            position: relative;
        }

        #box3 {
            width: 200px;
            height: 300px;
            background-color: aqua;
            overflow: auto;
        }

        #box4 {
            width: 400px;
            height: 600px;
            background-color: black;
        }
    </style>
    <script>
        window.onload = function(){
            var box1 = document.getElementById("box1");
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function(){
                console.log("clientWidth = "+box1.clientWidth);
                console.log("clientHeight = "+box1.clientHeight);

                console.log("offsetWidth ="+box1.offsetWidth);
                console.log("offsetHeight ="+box1.offsetHeight);

                console.log("offsetParent ="+box1.offsetParent.id);

                console.log("offsetLeft ="+box1.offsetLeft);
                console.log("offsetTop ="+box1.offsetTop);
            };

            var box3 = document.querySelector("#box3");
            var box4 = document.querySelector("#box4");
            var btn02 = document.querySelector("#btn02");
            btn02.onclick = function(){
                console.log("scrollWidth ="+box3.scrollWidth)
                console.log("scrollHeight ="+box3.scrollHeight)
                
                console.log("scrollLeft ="+box3.scrollLeft);
                console.log("scrollTop ="+box3.scrollTop);

                console.log("clientWidth ="+box3.clientWidth)
                console.log("clientHeight ="+box3.clientHeight)

                console.log("scrollWidth - scrollLeft == clienWidth"+(box3.scrollWidth - box3.scrollLeft));
                console.log("scrollHeight - scrollTop == clienHeight"+(box3.scrollHeight - box3.scrollTop));
            }

        };
    </script>
</head>
<body>
    <div id="box2">
        <div id="box1"></div>
    </div>
    <button id="btn01">1</button>
    <br>
    <div id="box3">
        <div id="box4"></div>
    </div>
    <button id="btn02">2</button>
</body>
</html>

onscroll

为滑动滚动条添加个事件行为

<!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>
        #all {
            width: 310px;
            /* height: 530px; */
            border: 5px solid black;
            margin: 0 auto;
        }

        #info{
            width: 300px;
            height: 500px;
            /* margin: 0 auto; */
            border: 5px solid red;
            overflow: auto;
            background-color: aquamarine;
        }

        h3{
            text-align: center;
        }

        #sub {
            margin-left: 100px;
        }
    </style>
    <script>
        window.onload = function() {
            var gou = document.getElementsByName("gou")[0];
            var info = document.getElementById("info");

            var sub = document.getElementById("sub");
            sub.onclick = function(){
                if(gou.checked){
                    alert("提交成功");
                }else{
                    alert("请确认是否勾选用户协议")
                }
            }

            info.onscroll = function() {
                if(parseInt(info.scrollHeight-info.scrollTop)==info.clientHeight) {
                    gou.disabled=false;
                    sub.disabled=false;
                }
            };
        };
    </script>
</head>
<body>
    <div id="all">
        <div id="info">
            <h3>测试文本</h3>
        <p>测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本</p>
        </div>
        <input type="checkbox" name="gou" disabled="true">我同意用户协议
        <input type="submit" value="提交" name="sub" id="sub" disabled="true">
    </div>
</body>
</html>

9.事件对象

当事件的相应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数

元素.onmousemove 该事件将会在鼠标在元素中移动时触发

事件对象.clientX 可以获取可见窗口鼠标指针的水平坐标

事件对象.clientY 可以获取可见窗口鼠标指针的垂直坐标

事件对象.pageX 获取鼠标相对于当前页面的水平坐标

事件对象.pageY 获取鼠标相对于当前页面的垂直坐标

<!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{
            position: relative;
            background-color: aqua;
            overflow: auto ;
        }

        #box1{
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            border-radius: 50%;
            position:absolute;
        }
    </style>
    <script>
        window.onload = function(){
            var box1 = document.getElementById("box1");
            //绑定鼠标移动事件
            document.onmousemove = function(event){
                //获取鼠标坐标
                // var left = event.clientX;
                // var top = event.clientY;
                var left = event.pageX;
                var top = event.pageY;

                //设置box1的偏移量
                box1.style.left = left- box1.offsetWidth/2 +"px";
                box1.style.top = top- box1.offsetHeight/2 +"px";
            };


        }
    </script>
</head>
<body style="height: 2000px;">
    <div id="box1"></div>
</body>
</html>

10.冒泡

所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发

取消冒泡

事件对象.cancelBubble

<!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>
        #box1{
            width: 500px;
            height: 500px;
            background-color: aqua;
        }
        #box2{
            width: 250px;
            height: 250px;
            background-color: yellowgreen;
        }
    </style>
    <script>
        window.onload = function(){
            var box1 = document.getElementById("box1");
            var box2 = document.getElementById("box2");
            var body = document.querySelector("body");
            box1.onclick = function(event){
                alert("我是box1");
                event.cancelBubble = true;
            };

            box2.onclick = function(){
                alert("我是box2");
                event.cancelBubble = true;
            };

            body.onclick = function(){
                alert("我是body");
            };
        }
    </script>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>
</html>

11.事件的委派

事件的委派指的是将事件统一绑定给元素的共同祖先元素，这样当后代的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件
事件委派是利用冒泡，通过委派可以减少事件绑定的次数，提高程序性能

事件对象.target 表示的是触发事件的对象

<!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>
        #ul1{
            background-color: yellowgreen;
        }
    </style>
    <script>
        window.onload = function(){
            var ul1 = document.getElementById("ul1");
            var a = document.getElementsByTagName("a");
            // for(var i=0;i<a.length;i++){
            //     a[i].onclick = function(){
            //         alert("我是a的单击响应函数");
            //     };
            // }

            ul1.onclick = function(event){
                //事件的委派
                //  指的是将事件统一绑定给元素的共同祖先元素，这样当后代的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件
                //  事件委派是利用冒泡，通过委派可以减少事件绑定的次数，提高程序性能
                
                //如果触发事件的对象是我们期望的元素则执行，否则不执行
                //  target
                //  事件对象.target    表示的是触发事件的对象
                if(event.target.className == "link")
                {
                    alert("我是ul的单机响应函数");
                }
                
            };
            
            var n = 4
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function(){
                var li = document.createElement("li");
                li.innerHTML = "<li><a href='#'class='link'>超链接"+(n++)+"</a></li>";
                ul1.appendChild(li);
            }
            
        }
    </script>
</head>
<body>
    <button id="btn01">添加超链接</button>
    <ul id="ul1">
        <li><a href="#" class="link">超链接1</a></li>
        <li><a href="#" class="link">超链接2</a></li>
        <li><a href="#" class="link">超链接3</a></li>
    </ul>
</body>
</html>

12.事件的绑定

addEventListener( )

通过这个方法也可以为元素绑定响应函数
参数：
1.事件的字符串，但是去除 “on”
2.回调函数，当事件触发时该函数会被调用
3.是否在捕获阶段触发事件，需要一个布尔值，一般都是false

var btn01 = document.getElementById("btn01");

//使用    对象.事件 = 函数    这种方式绑定响应函数
//  他只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，如果绑定多个则后边的会覆盖前面的
// btn01.onclick = function(){
//     alert(1);
// }
// btn01.onclick = function(){
//     alert(2);
// }

//addEventListener()
//通过这个方法也可以为元素绑定响应函数
//参数：
//      1.事件的字符串，但是去除   "on"
//      2.回调函数，当事件触发时该函数会被调用
//      3.是否在捕获阶段触发事件，需要一个布尔值，一般都是false
btn01.addEventListener("click",function(){
alert(1);
});
btn01.addEventListener("click",function(){
alert(2);
});

13.事件的传播

事件的传播
关于事件的传播网景公司和微软公司有不同的理解

微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。

网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件,然后在向内传播给后代元素

w3C综合了两个公司的方案，将事件传播分成了三个阶段
1.捕获阶段
在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
2.目标阶段
事件捕获到目标元素，捕获结束开始在目标元素上触发事件
3.冒泡阶段
事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件

如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true

14.事件练习：拖拽

<!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>
        #box1 {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: yellowgreen;
            position: absolute;
        }

        #box2{
            width: 100px;
            height: 100px;
            position: absolute;
            background-color: rebeccapurple;
            left: 200px;
            top: 200px;
        }
    </style>
    <script>
        window.onload = function(){

            var box1 = document.getElementById("box1");
            var box2 = document.getElementById("box2");
            //拖拽box1元素
            // 拖拽流程
            //      1.当鼠标在被拖拽元素上按下时，开始拖拽      onmousedown
            //      2.当鼠标移动时候被拖拽元素跟随鼠标移动      onmousemove
            //      3.当鼠标松开时，被拖拽元素固定在当前位置     onmouseup
            drag(box1);
            drag(box2);


        }
        function drag(obj){
                //为obj绑定拖拽响应函数
                obj.onmousedown = function(event){
                    //求出div偏移量 鼠标.clentX - 元素.offsetLeft
                    //求出div偏移量 鼠标.clentY - 元素.offsetTOP
                    var ol = event.pageX - obj.offsetLeft;
                    var ot = event.pageY - obj.offsetTop;
                    // alert("拖拽");
                    document.onmousemove = function(event){
                        var left = event.pageX - ol;
                        var top = event.pageY - ot;

                        obj.style.left = left + "px";
                        obj.style.top = top + "px";
                    };
                    document.onmouseup = function(event){
                        //当时鼠标松开时，被拖拽元素固定在当前位置
                        //取消document.onmousemove事件   
                        document.onmousemove = null;
                        // alert("1");
                        //取消document.onmouseup
                        document.onmouseup = null;
                    };

                    //当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，此时会导致拖拽功能的异常
                    //这个是浏览器提供的一个默认行为，如果不希望发生这个行为，则可以通过 return false 来取消默认行为
                    return false;
                };
            }
    
    </script>
</head>
<body style="height: 2000px;">
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>