Python_day21--BOM和DOM详解、HTML事件属性、JS阶段性总结、全选与全不选、省市二级联动、动态添加城市、年月日联动

本文链接：https://blog.youkuaiyun.com/Biu_Biu_0329/article/details/80944517

本文详细介绍了HTML事件属性的应用，包括窗口事件、表单事件、鼠标事件和媒介事件等，同时提供了全选功能实现、动态添加城市及联动选择器等实用案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、BOM和DOM详解

BOM和DOM详解

二、HTML事件属性

1、windos对象

针对 window 对象触发的事件（应用到 <body> 标签）：

onafterprint	文档打印之后运行的脚本。
onbeforeprint	文档打印之前运行的脚本。
onbeforeunload	文档卸载之前运行的脚本。
onerror	在错误发生时运行的脚本。
onhaschange	当文档已改变时运行的脚本。
onload	页面结束加载之后触发。
onmessage	在消息被触发时运行的脚本。
onoffline	当文档离线时运行的脚本。
ononline	当文档上线时运行的脚本。
onpagehide	当窗口隐藏时运行的脚本。
onpageshow	当窗口成为可见时运行的脚本。
onpopstate	当窗口历史记录改变时运行的脚本。
onredo	当文档执行撤销（redo）时运行的脚本。
onresize	当浏览器窗口被调整大小时触发。
onstorage	在 Web Storage 区域更新后运行的脚本。
onundo	在文档执行 undo 时运行的脚本。
onunload	一旦页面已下载时触发（或者浏览器窗口已被关闭）。

2、Form 事件

由 HTML 表单内的动作触发的事件（应用到几乎所有 HTML 元素，但最常用在 form 元素中）：

onblur	元素失去焦点时运行的脚本。
onchange	在元素值被改变时运行的脚本。
oncontextmenu	当上下文菜单被触发时运行的脚本。
onfocus	当元素获得焦点时运行的脚本。
onformchange	在表单改变时运行的脚本。
onforminput	当表单获得用户输入时运行的脚本。
oninput	当元素获得用户输入时运行的脚本。
oninvalid	当元素无效时运行的脚本。
onreset	当表单中的重置按钮被点击时触发。HTML5 中不支持。
onselect	在元素中文本被选中后触发。
onsubmit	在提交表单时触发。

3、Mouse 事件

由鼠标或类似用户动作触发的事件：

onclick	元素上发生鼠标点击时触发。
ondblclick	元素上发生鼠标双击时触发。
ondrag	元素被拖动时运行的脚本。
ondragend	在拖动操作末端运行的脚本。
ondragenter	当元素元素已被拖动到有效拖放区域时运行的脚本。
ondragleave	当元素离开有效拖放目标时运行的脚本。
ondragover	当元素在有效拖放目标上正在被拖动时运行的脚本。
ondragstart	在拖动操作开端运行的脚本。
ondrop	当被拖元素正在被拖放时运行的脚本。
onmousedown	当元素上按下鼠标按钮时触发。
onmousemove	当鼠标指针移动到元素上时触发。
onmouseout	当鼠标指针移出元素时触发。
onmouseover	当鼠标指针移动到元素上时触发。
onmouseup	当在元素上释放鼠标按钮时触发。
onmousewheel	当鼠标滚轮正在被滚动时运行的脚本。
onscroll	当元素滚动条被滚动时运行的脚本。

4、Media 事件

由媒介（比如视频、图像和音频）触发的事件（适用于所有 HTML 元素，但常见于媒介元素中，比如 <audio>、<embed>、<img>、<object> 以及 <video>）:

onabort	在退出时运行的脚本。
oncanplay	当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时）。
oncanplaythrough	当媒介能够无需因缓冲而停止即可播放至结尾时运行的脚本。
ondurationchange	当媒介长度改变时运行的脚本。
onemptied	当发生故障并且文件突然不可用时运行的脚本（比如连接意外断开时）。
onended	当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）。
onerror	当在文件加载期间发生错误时运行的脚本。
onloadeddata	当媒介数据已加载时运行的脚本。
onloadedmetadata	当元数据（比如分辨率和时长）被加载时运行的脚本。
onloadstart	在文件开始加载且未实际加载任何数据前运行的脚本。
onpause	当媒介被用户或程序暂停时运行的脚本。
onplay	当媒介已就绪可以开始播放时运行的脚本。
onplaying	当媒介已开始播放时运行的脚本。
onprogress	当浏览器正在获取媒介数据时运行的脚本。
onratechange	每当回放速率改变时运行的脚本（比如当用户切换到慢动作或快进模式）。
onreadystatechange	每当就绪状态改变时运行的脚本（就绪状态监测媒介数据的状态）。
onseeked	当 seeking 属性设置为 false（指示定位已结束）时运行的脚本。
onseeking	当 seeking 属性设置为 true（指示定位是活动的）时运行的脚本。
onstalled	在浏览器不论何种原因未能取回媒介数据时运行的脚本。
onsuspend	在媒介数据完全加载之前不论何种原因终止取回媒介数据时运行的脚本。
ontimeupdate	当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本。
onvolumechange	每当音量改变时（包括将音量设置为静音）时运行的脚本。
onwaiting	当媒介已停止播放但打算继续播放时（比如当媒介暂停已缓冲更多数据）运行脚本

三、JS 阶段性总结

1）ECMAScript:

1. 语法：
2. 变量:
      函数内使用var定义， 局部变量;
      函数内不使用定义， 全局变量;
3. 数据类型:
      原始数据类型(undefine/null/string/number/boolean)
      Js: Boolean数据类型: true, false

4. 语句:
      if(条件1){

        }elif(条件2){

        }elif(条件3){

        }else{

        }



    for(var i=0; i<5; i++){
            ............
    }

5. 运算符:
       ==和===的区别: 
       ==强制转换, ===不强制转换类型;
6. 函数两种写法:
            命名函数:
                    funxtion 函数名{
                        .......
                    }
            匿名函数:  eg: οnclick="javascript:location.href='07_BOM之History对象.html'"


2、BOM对象:
    window: alert(), prompt(), confirm(),
            var intervale1 = setInterval("函数名", 1000),
            clearInterval(intervale1)
            setTimeout()
            clearTimeout();
    history:back(), forword()
    location: href()


事件:
    onsubmit(): 此事件写在form标签中， 必须有返回值;
    onload(): 此事件只能写一次并且放在body标签中;
    onclick(), onfocus(), onbulor(): 其他事件放在需要操作的元素位置;


获取元素:
        document.getElementById()

获取元素里面的值:
        document.getElementById().value

修改:
        document.getElementById().value = "hello";

获取指定id里面的嵌套的html:
    document.getElementById(id + "Tip").innerHTML = "<span style='color:red'>xxxxx</span>"




向页面输出:
    弹窗: alert();
    向浏览器写入内容:document.write()
    向页面指定位置写入内容: document.getElementById().innerHTML = "xxx"

四、全选和全不选

1. 需求分析:
    在后台实现一个批量删除操作, 前台需要全选所有的复选框


2. 技术分析:
    1). 确认事件:鼠标单击事件onclick,绑定事件的位置;
    2). 获取编号前面的复选框的状态(是否选中)
            获取复选框: var checkAllEle = document.getElementById("id");
            获取复选框的状态: checkAllEle.checked
    3). 获取下面的所有复选框:
          document.getElementByName("name")

3. 步骤实现:

    1). 确认事件:鼠标单击事件onclick,并对其绑定一个函数;
    2). 书写函数(书写编号前面的复选框， 获取其状态)
    3). 判断编号前面复选框的状态
    4). 如果未选中, 获取下面所有的复选框， 并将其状态置为选中;


4. 代码实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06_实现全选和全不选</title>
    <style>
        h1{
            text-align: center;
        }
        td{
            text-align: center;
        }
    </style>
    <script>
        function selectAll() {
            var checkAllEle = document.getElementById("selectall");

            var checkones = document.getElementsByName("checkone");
//            alert(checkones)

            if(checkAllEle.checked){
                for (var i=0;i<checkones.length;i++){
                    checkones[i].checked = true;
                }

            }else {
                for (var i=0;i<checkones.length;i++){
                    checkones[i].checked = false;
                }

            }
        }

    </script>
</head>
<body>
<h1>用户信息</h1>
<table border="1" align="center" width="60%" cellpadding="8">
    <tr>
        <td colspan="4">
            <input type="button" value="添加" align="center">     
            <input type="reset" value="重置" align="center">
        </td>
    </tr>

    <tr>
        <th><input type="checkbox" οnclick="selectAll()" id="selectall"></th>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>

    <tr>
        <th><input type="checkbox" name="checkone"></th>
        <td>001</td>
        <td>张三</td>
        <td>22</td>
    </tr>

    <tr>
        <th><input type="checkbox" name="checkone"></th>
        <td>002</td>
        <td>李四</td>
        <td>21</td>
    </tr>

    <tr>
        <th><input type="checkbox" name="checkone"></th>
        <td>003</td>
        <td>王麻子</td>
        <td>32</td>
    </tr>

</table>
</body>
</html>

五、动态添加城市

Document方法里面查不到的方法:
    1). 创建一个文本节点: document.createTextNode()
    2). 创建元素节点: document.createElement()


1. 确定事件: onclick;
2. 获取ul元素节点;
3. 添加城市到ul里面去

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07_添加城市</title>
    <script>
        function addcity() {
            var ulele = document.getElementById('ulitem');

            var inputcity = document.getElementById('city').value;

            var textnode = document.createTextNode(inputcity);

            var liele = document.createElement('li');

            liele.appendChild(textnode);

            ulele.appendChild(liele)
        }

    </script>
</head>
<body>

<input type="text" name="city" id="city">
<input type="button" id="btn" value="添加城市" οnclick="addcity()">

<ul id="ulitem">
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
    <li>深圳</li>
</ul>

</body>
</html>

注意：

Element:html里面的所有标签；
    element.appendChild()  向元素添加新的子节点，作为最后一个子节点。
    element.firstChild     返回元素的首个子。
    element.getAttribute() 返回元素节点的指定属性值。
    element.innerHTML      设置或返回元素的内容。
    element.insertBefore() 在指定的已有的子节点之前插入新节点。
    element.lastChild      返回元素的最后一个子元素。
    element.setAttribute() 把指定属性设置或更改为指定值。

六、省、市二级连动

诉求：

选择框选择省时，后一级需要跳出相对应的市，并且在省相互切换时，市也相对应的相互切换；这里注意我们在每次函数最开始我们都应当清空一次列表，防止出现上述问题；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01</title>
    <script>

        //0. 创建一个二维数组， 用来存储省份和城市的对应关系;
        var cities = new Array();
        cities[0] = new Array("西安", "宝鸡", "咸阳","渭南","陕北");
        cities[1] = new Array("长沙","株洲","湘潭","衡阳","永州","邵阳","岳阳","张家界","常德");

        function changeCity(val) {
            //1. 获取选择城市的select标签;
            var cityEle = document.getElementById('city');

            //last: 清空之前添加的option标签;
//            cityEle.options.length = 0;
            cityEle.innerHTML = "";

            //2. 获取选择省份的所有城市
            var selectCites = cities[val];
            //3. 依次遍历城市
            for (var i = 0; i < selectCites.length; i++) {
                //3. 添加<option>西安</option>
                //3-1. 创建城市的文本节点;
                var textNode = document.createTextNode(selectCites[i]);

                //3-2. 创建option的元素节点; <option></option>
                var opEle = document.createElement("option");


                //3-3. 将城市的文本节点和option的元素节点组合;<option>城市</option>
                opEle.appendChild(textNode);


                //3-4. 将opEle添加到select标签里面;
                cityEle.appendChild(opEle);
            }


        }


    </script>

</head>
<body>


<!--this.value: 获取select标签里面用户选择的省份-->
<select id="province" οnchange="changeCity(this.value)">
    <option>----请选择省份-----</option>
    <option value="0">陕西</option>
    <option value="1">湖南</option>
</select>
<select id="city">

</select>


</body>
</html>

七、年月日联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_1_年月日联动</title>

    <!--<script type="text/javascript" src="jquery-2.0.2.js"></script>-->
    <script language="JavaScript"><!--
    function YYYYMMDDstart() {
        MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

        //先给年下拉框赋内容
        var y = new Date().getFullYear();
        for (var i = (y - 30); i < (y + 30); i++) //以今年为准，前30年，后30年
            document.reg_testdate.YYYY.options.add(new Option(" " + i + " 年", i));

        //赋月份的下拉框
        for (var i = 1; i < 13; i++)
            document.reg_testdate.MM.options.add(new Option(" " + i + " 月", i));

        document.reg_testdate.YYYY.value = y;
        document.reg_testdate.MM.value = new Date().getMonth() + 1;
        var n = MonHead[new Date().getMonth()];
        if (new Date().getMonth() == 1 && IsPinYear(YYYYvalue)) n++;
        writeDay(n); //赋日期下拉框Author:meizz
        document.reg_testdate.DD.value = new Date().getDate();
    }

    if (document.attachEvent)
        window.attachEvent("onload", YYYYMMDDstart);
    else
        window.addEventListener('load', YYYYMMDDstart, false);

    function YYYYDD(str) //年发生变化时日期发生变化(主要是判断闰平年)
    {
        var MMvalue = document.reg_testdate.MM.options[document.reg_testdate.MM.selectedIndex].value;
        if (MMvalue == "") {
            var e = document.reg_testdate.DD;
            optionsClear(e);
            return;
        }
        var n = MonHead[MMvalue - 1];
        if (MMvalue == 2 && IsPinYear(str)) n++;
        writeDay(n)
    }

    function MMDD(str)   //月发生变化时日期联动
    {
        var YYYYvalue = document.reg_testdate.YYYY.options[document.reg_testdate.YYYY.selectedIndex].value;
        if (YYYYvalue == "") {
            var e = document.reg_testdate.DD;
            optionsClear(e);
            return;
        }
        var n = MonHead[str - 1];
        if (str == 2 && IsPinYear(YYYYvalue)) n++;
        writeDay(n)
    }

    function writeDay(n)   //据条件写日期的下拉框
    {
        var e = document.reg_testdate.DD;
        optionsClear(e);
        for (var i = 1; i < (n + 1); i++)
            e.options.add(new Option(" " + i + " 日", i));
    }

    function IsPinYear(year)//判断是否闰平年
    {
        return (0 == year % 4 && (year % 100 != 0 || year % 400 == 0));
    }

    function optionsClear(e) {
        e.options.length = 1;
    }

    //--></script>
</head>


<body>


<form name="reg_testdate">
    <select name="YYYY" οnchange="YYYYDD(this.value)">
        <option value="">请选择 年</option>
    </select>
    <select name="MM" οnchange="MMDD(this.value)">
        <option value="">选择 月</option>
    </select>
    <select name="DD">
        <option value="">选择 日</option>
    </select>
</form>



</body>
</html>