JavaWeb (二) js中的事件与DOM 模型

小灰灰 2024-04-19 14:27 99阅读 0赞

## 个人博客网：[https://wushaopei.github.io/][https_wushaopei.github.io]    (你想要这里多有) ##

## 一、JS 事件 ##

### 1、什么是时间？ ###

> 事件是电脑输入设备与页面进行交互的响应。我们称之为事件。

常用的事件：

onload 加载完成事件        常用于页面被浏览器加载完成之后自动做一些初始化工作.
     onclick 单击事件           常用于按钮被单击之后的响应工作
     onblur 失去焦点时间         常用于输入框失去焦点后，验证其中的内容是否合法
     onchange 内容发生改变时间   常用于输入框或下拉列表内容发生改变后响应
     onsubmit 表单提交时间       常用于表单提交，在提交之前验证所有表单项是否合法。只要有一个不合法，就组织表单提交。

### 2、注册事件 ###

>  **注意**： 注册事件和绑定事件是一个东西。

（**1）注册事件，** 就是 告诉浏览器，当事件触发后，需要执行哪些代码

事件的注册可分为：

静态注册 和 动态注册两种；

>  *  静态 注册事件： 静态注册是 指通过事件属性直接 赋予 事件响应后的代码，这种方式我们称之为 **静态注册**。
>  *  动态 注册事件： 动态注册是 指通过先获取标签对象。然后再通过标签对象.事件名 = function()\{\} 的方式赋值，这种操作叫 **动态注册**。

动态注册 语法规范：

window.onload = function(){
        
        1 查找标签对象
        2 通过标签对象.事件名 = function(){}
      }

（2）**onload** 事件示例：

<head>
    
        <meta charset="UTF-8" content="text/html">
        <title>Title</title>
        <script type="text/javascript">
            window.onload = function () {
                alert("页面加载完成==动态");
            }
        </script>
    </head>
    <body onload="alert('页面加载完成！')">
    
    </body>

> **注意**：
> 
>         当同时声明 静态注册与动态注册时，静态注册优先级最高，静态注册事件生效，动态注册事件被屏蔽。

效果截图：

静态注册：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70][]

动态注册：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 1][]

（3） **onclick** 事件示例代码：

<head>
        <meta charset="UTF-8" content="text/html" http-equiv="content-type">
        <title>Title</title>
        <script type="text/javascript">
    
            function onclickFun() {
                alert("这是onclick单击事件静态注册");
            }
            // 动态注册单击事件
            window.onload = function () {
    //          1、查找标签对象
                // getElementById 通过属性值获取标签对象
                // get 是获取
                // Element 是元素 （元素就是标签）
                // by 由 。。。通过
                // id   id 属性
                var btnObj = document.getElementById("btn01");
       
    //          2、通过标签对象.事件名 = function(){}
                btnObj.onclick = function () {
                    alert("这是动态注册的 onclick 事件");
                }
            }
        </script>
    </head>
    <body>
        
        <input  type="button" value="按钮" onclick="onclickFun()"/>
    
        <button id="btn01">按钮2</button>
    </body>

效果截图：

静态注册：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 2][]

动态注册：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 3][]

（4）**onblur** 失去焦点事件

<head>
            <meta charset="UTF-8" http-equiv="content-type" content="text/html">
            <title>Title</title>
            <script type="text/javascript">
                function onblurFun() {
                    // console 这是 js 中提供的一个专门用于调试的对象。表示控制台
                    // log 方法就是输出内容。可以传递任意参数
                    console.log("这是静态注册 onblur 事件");
                }
    
                window.onload = function () {
    
                    //1、 获取标签对象
                    var passObj = document.getElementById("password");
                    //2、通过标签对象.事件名 = function(){}
                    passObj.onblur = function () {
                        console.log("这是动态注册的 onblur 事件");
                    }
                }
    
            </script>
        </head>
        <body>
            用户名： <input type="text" onblur="onblurFun();"/><br/>
            密码：   <input type="password" id="password"/><br/>
        </body>

效果截图：

静态注册：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 4][]

动态注册：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 5][]

（5）onchange 内容发生改变事件

<head>
            <meta charset="UTF-8">
            <title>Title</title>
            <script type="text/javascript">
                function onchangeFun() {
                    alert("静态注册onchange 事件");
                }
    
                window.onload = function () {
                    //1、标签对象
                    var selObj = document.getElementById("sel01");
                    //2、通过标签对象.事件名 = function(){}
                    selObj.onchange = function () {
                        alert("动态注册 onchange 事件");
                    }
                }
            </script>
        </head>
        <body>
            请选择你心中的女神：
            <select onchange="onchangeFun();">
                <option>--请选择--</option>
                <option>刘亦菲</option>
                <option>柳岩</option>
                <option>王李丹妮</option>
            </select>
            <br/>
            请选择你心中的男神：
            <select id="sel01">
                <option>--请选择--</option>
                <option>胡歌</option>
                <option>陈道明</option>
                <option>乔振宇</option>
                <option>古天乐</option>
            </select>
        </body>

静态注册：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 6][]

动态注册：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 7][]

（6） onsubmit 表单提交事件

<head>
            <meta charset="UTF-8">
            <title>Title</title>
            <script type="text/javascript">
                function onsubmitFun() {
                    alert("静态——开始验证表单项，发现不合法");
                    return false;
                }
    
                window.onload = function () {
                    //1、获取标签
                    var formObj = document.getElementById("form01");
    
                    //2、通过标签对象.事件名 = function(){}
                    formObj.onsubmit = function () {
                        alert("动态注册 == 开始验证表单项，发现不合法");
                        return false;
                    }
                }
            </script>
        </head>
        <body>
            
            <form action="http://www.baidu.com" onsubmit="return onsubmitFun();">
                <input type="submit" value="静态注册"/>
            </form>
            <form action="http://www.baidu.com" id="form01">
                <input type="submit" value="动态注册"/>
            </form>
    
        </body>

静态注册事件：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 8][]

动态注册事件：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 9][]

## 二、DOM模型 ##

> **DOM ** 全是 Document Object Model  文档对象模型

大白话 ，就是把文档中的标签，属性，文本，转换成为对象来管理。

那么 它们是如何实现把标签、属性、文本转换成为对象来管理呢。这就是我们马上要学习的重点。

### 1、 Document 对象 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 10][]

Document 对象的理解：

> 1.  Document 它管理了所有的 Html 文档内容
> 2.  document 它是一种树结构的文档。有层级关系
> 3.  它让我们把所有的标签 都 对象化
> 4.  我们可以通过 document 访问所有的标签对象

### 2、Html 标签的 对象化 ###

（1） 什么是对象化？

>    这里可以借鉴 JavaSE 中 面向对象 知识来理解。

具体 的 例子：

有一个人有年龄： 18岁，性别：女，名字： 张某某
         我们要把这个人的信息对象化怎么办？
            
         Class  Person {
    
            private int age;
            private String sex;
            private String name;
         }

（3） 那么html 标签要对象化 怎么办？

模拟对象化，相当于：

class Dom {
            private String id;    //id属性
            private String tagName; //表示标签名
            private Dom parentNode; //父亲
            private List<Dom> children; //孩子节点
            private String innerHTML; //起始标签和结束标签中间的内容  
       }

### 3、Document 对象中的方法介绍 ###

document.getElementById(elementId)
        通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值
        
        document.getElementsByName(elementName)
        通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性值
        
        document.getElementsByTagName(tagName)
        通过标签名查找标签 dom 对象。 tagName 是标签名
        
        document.createElement(tagName)
        方法，通过给定的标签名，创建一个标签对象。tagName 是要创建的标签名

**要点：**

> 如果标签对象有 id 属性，优先使用 getElementById 查找标签对象
> 
> 如果标签没有 id  属性，只有 name 属性， 则使用 getElementsByName 方法进行查找
> 
> 如果标签既没有 id 属性，也没有 name 属性，最后才使用 getElementsByTagName
> 
> getElementById 和 getElementsByName 和 getElementsByTagName 都需要在页面加载完成之后执行。才能得到标签对象。

### 4、标签化示例： ###

（1）getElementById 方法示例代码：

>    需求： 当用户点击【验证】 按钮的时候，帮我验证一下， 输入框中的内容是否合法
> 
>               验证的规则是： 必须由字母，数字，下划线组成，并且长度是 5 到 12  位

<head>
            <meta charset="UTF-8">
            <title>Title</title>
            <script type="text/javascript">
    //          1、绑定单击事件
                function onclickFun() {
    //              2、获取输入框中的内容
                    //当我们要操作一个标签对象的时候，一定要先获取到这个标签对象
                    var usernameObj = document.getElementById("username");
                    var usernameText = usernameObj.value;
    
                    //获取用来输出验证结果的 span 标签对象
                    var spanObj = document.getElementById("usernameSpan");
                    //innerHTML 表示起始标签和结束标签中的内容
                    //这个属性，可读可写
                    // spanObj.innerHTML = "这个代码真难看"；
                    // 3、使用正则表达式去验证
                    var patt = /^\w{5,12}$/; //验证的规则是： 必须由字母，数字，下划线组成，并且长度是 5 到 12 位
                    //正则对象有一个 test 方法。可以用来验证一个字符串是否匹配正则表达式
                    // 匹配就返回 true ，不匹配就返回 false
                    if(patt.test(usernameText)){
                        spanObj.innerHTML = "用户名合法";
                        spanObj.innerHTML = "<img alt=\"\" src='right.png' width='15' height='15'/>";
                    }else {
                        spanObj.innerHTML = "用户名不合法";
                        spanObj.innerHTML = "<img alt=\"\" src='wrong.png' width='15' height='15'/>";
                    }
                }
            </script>
        </head>
        <body>
            用户名：<input type="text" id="username" value="wsp168"/>
            <span style="color: red;" id="usernameSpan"></span>
            <button onclick="onclickFun()">验证</button>
        </body>

效果截图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 11][]

（2）getElementsByName 方法示例代码：

需求： 根据标签名 实现 对 多选框进行 全选、全不选、反选操作

<head>
            <meta charset="UTF-8">
            <title>Title</title>
            <script type="text/javascript">
                //全选事件
                function checkAll() {
                    //当我们要操作一个标签对象的时候。一定要先获取到这个标签对象
                    //getElementByName 是根据 name  属性查找返回对象的集合。
                    //这个集合的操作跟数组一样
                    //这个集合中的元素顺序刚好是他们在 html 页面中，从上到下的顺序
                    var hobbies = document.getElementsByName("hobby");
                    //checked 属性表示单选，复选框的选中状态
                    //这个属性可读，可写
                    for(var i = 0; i < hobbies.length;i++){
                        hobbies[i].checked = true;
                    }
                }
    
                //全不选
                function checkNo() {
                    var hobbies = document.getElementsByName("hobby");
                    // checked 属性表示单选，复选框的选中状态。
                    //这个属性可读，可写
                    for(var i = 0; i < hobbies.length; i++){
                        hobbies[i].checked = false;
                    }
                }
    
                //反选
                function checkReverse() {
                    var hobbies = document.getElementsByName("hobby");
                    //checked 属性表示单选，复选框的选中状态
                    //这个属性可读，可写
                    for (var i = 0; i < hobbies.length; i++){
                        // if(hobbies[i].checked){
                        //     hobbies[i].checked = false;
                        // }else {
                        //     hobbies[i].checked = true;
                        // }
                        hobbies[i].checked = !hobbies[i].checked;
                    }
                }
            </script>
        </head>
        <body>
            兴趣爱好：
            <input type="checkbox" name="hobby" checked="checked" value="hj"/>喝酒
            <input type="checkbox" name="hobby" value="cy"/> 抽烟
            <input type="checkbox" name="hobby" value="yy"/>游泳
            <br/>
            <button onclick="checkAll();">全选</button>
            <button onclick="checkNo()">全不选</button>
            <button onclick="checkReverse();">反选</button>
        </body>

效果截图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 12][]

（3）getElementsByTagName 方法示例代码：

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <script type="text/javascript">
                //全选事件
                function checkAll() {
                    //getElementsByTagName 是 通过制定的标签名查找返回全部的标签对象集合
                    //这个集合的操作跟数组一样
                    //这个集合的元素顺序跟他们在 html 页面中，从上到下的顺序一致
                    var inputObjs = document.getElementsByTagName("input");
                    for(var i = 0; i < inputObjs.length; i++){
                        inputObjs[i].checked = true;
                    }
                }
            </script>
        </head>
        <body>
            兴趣爱好：
            <input type="checkbox" name="hobby" checked="checked" value="hj"/>喝酒
            <input type="checkbox" name="hobby" value="cy"/> 抽烟
            <input type="checkbox" name="hobby" value="yy"/>游泳
            <br/>
            <button onclick="checkAll();">全选</button>
        </body>
    </html>

效果截图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 13][]

（4）createElement 方法示例代码：

需求：通过代码创建标签：<div>国哥棒棒哒！</div>,并添加到body标签中去显示

<head>
            <meta charset="UTF-8">
            <title>Title</title>
            <script type="text/javascript">
                window.onload = function () {
                    var divObj = document.createElement("div");
                    // alert(divObj);
                    divObj.innerHTML = "今晚通宵";
    
                    var textNode = document.createTextNode("今晚通宵");//创建 dom 节点文本
                    divObj.appendChild(textNode);  //拼接节点文本到 div 标签中
    
                    //appendChild 给 body 标签添加子元素
                    document.body.appendChild(divObj);
                }
            </script>
        </head>
        <body>
    
        </body>

效果截图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 14][]

### 5、节点的常用属性和方法 ###

（1）节点 的定义： 所谓的 节点，就是前面讲的标签对象

（2）方法：

通过具体的元素节点调用：

> ** getElementsByTagName() **  
> 
> 方法，获取当前节点的指定标签名孩子节点
> 
> **appendChild(oChildNode)** 
> 
> 方法，可以添加一个子节点，oChildNode 是要添加的孩子节点

（3）属性：

childNodes 
     属性，获取当前节点的所有子节点
     firstChild
     属性，获取当前节点的第一个子节点
     lastChild 
     属性，获取当前节点的最后一个子节点
     parentNode
     属性，获取当前节点的父节点
     nextSibling 
     属性，获取当前节点的下一个节点
     previousSibling
     属性，获取当前节点的上一个节点
     className
     用于获取或设置标签的 class 属性值
     innerHTML 
     属性，表示获取/设置起始标签和结束标签中的内容
     innerText
     属性，表示获取/设置起始标签和结束标签中的文本

[https_wushaopei.github.io]: https://wushaopei.github.io/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/0d3689eaaeee4b68b803083cb0fa136c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/b91414b3352040c0b017e7c9b598f70d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/1799f0e455bd462d9257ac49c8000e97.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/fcc8954c799b41e28d13afd1cb6a0a5c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/8f427563271c44b39ee2812f948c4990.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/9a829722f53e43e39cd259266d6b4b12.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/c59324171c52462c855c8d1ffe2827fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/a325b6f5c3504f0f911c4bc61a5d270b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 8]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/8052bd6ecb3f4a438abcd868acd1d75e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 9]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/513cd8ab7bf04be9b4f5a25ad6feba9d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 10]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/bd9810a7819e4b5a92b63b2de02bf95b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 11]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/089da01dc13c442c8978983238f9e705.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 12]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/527e6728e1de4885ba665df1496f6ac8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 13]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/c9cdb86ab00946818b45519af15cf307.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 14]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/9f64aeba90d34bf0bc84c95e3648390a.png