02-js：2种函数/对象定义方式、js的事件：阻止表单提交、Dom模型：js中的正则表达式验证用户名是否合法，2种常见的验证提示效果，全选/全不选/反选效果，创建标签，获取value值/文本值

本文链接：https://blog.csdn.net/aa35434/article/details/123054188

1、JS-介绍

JavaScript(简称：JS）是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互。因此它运行在客户端，需要运行浏览器来解析执行 JavaScript 代码。
JavaScript和Java是完全不同的语言，不论是概念还是设计。但是基础语法类似。
JavaScript在1995年由Brendan Eich发明，并于1997年成为ECMA标准。
ECMAScript 6(ES6)是最新的JavaScript版本（发布于2015年)。
JS 是弱类型，Java 是强类型。
- 弱类型：类型可变。
- 强类型：定义变量的时候类型就已经确定，并且不可改变。
特点：
- 交互性（它可以做的就是信息的动态交互）
- 安全性（不允许直接访问本地硬盘）
- 跨平台性（只要是可以解析 JS 的浏览器都可以执行，和平台无关）

2、JS-引入方式

2.1、第一种方式

内部脚本：将JS代码定义在HTML页面中
- JavaScript代码必须位于<script></script>标签之间
- 在HTML文档中，可以在任意地方，放置任意数量的<script>
- 一般会把脚本置于<body>元素的底部，可改善显示速度
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // alert是JavaScript语言提供的一个警告框函数。
        // 它可以接收任意类型的参数，这个参数就是警告框的提示信息
        alert("hello javaScript!");
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

2.2、第二种方式

外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中
- 外部JS文件中，只包含JS代码，不包含<script>标签
- <script>标签不能自闭合：
- <script>标签之间不能在写js代码：
外部js文件：
html 代码内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        现在需要使用script引入外部的js文件来执行
            src 属性专门用来引入js文件路径（可以是相对路径，也可以是绝对路径）

        script标签可以用来定义js代码，也可以用来引入js文件
        但是，两个功能二选一使用。不能同时使用两个功能
    -->
    <script type="text/javascript" src="1.js"></script>
    <script type="text/javascript">
        alert("国哥现在可以帅了");
    </script>
</head>
<body>

</body>
</html>

运行测试：

3、JS-基础语法

3.1、JS-基础语法-书写规范

区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无（建议写上）
注释:
- 单行注释：//注释内容
- 多行注释：/*注释内容*
大括号表示代码块：如下图所示，只要条件成立就会执行代码块中的内容

3.2、JS-基础语法-输出语句

使用window.alert()：写入警告框（window.可以省略）
使用document.write()：写入HTML输出
使用console.log()：写入浏览器控制台

3.3、JS-基础语法-变量

变量：可以存放某些值的内存的命名
JavaScript中用var关键字(variable的缩写）来声明变量。
JavaScript是一门弱类型语言，变量可以存放不同类型的值。
变量名需要遵循如下规则:
- 组成字符可以是任何字母、数字、下划线(_)）或美元符号($)
- 数字不能开头
- 建议使用驼峰命名
ES6新语法：
- ECMAScript 6 新增了let关键字来定义变量。它的用法类似于var，但是所声明的变量，只在let关键字所在的代码块内有效，且不允许重复声明。
- ECMAScript 6 新增了const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。
案例测试：

<!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>JS-基础语法</title>
</head>
<body>
  


<script>
    //方式一：var定义变量
    // var a = 10;
    // a = "张三";
    // alert(a); //输出：张三

    //特点1：作用域比较大，全局变量
    //特点2：可以重复定义,后面会覆盖前面的
    // {
    //     var x = 1;
    //     var x = "A";
    // }
    // alert(x); //输出：A，在代码块外部仍然可以获取到代码块里面的变量值

    //方式二：let定义变量
    //特点：局部变量，不能重复
    // {
    //     let x = 1;
    //     alert(x); //输出：1
    // }

    //方式三：const定义变量
    //特点：值不能被改变
    const pi = 3.14;
    pi = 3.15; //报错，声明为常量无法修改值。
    alert(pi); //由于报错，此时什么也获取不到

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

3.4、JS-基础语法-数据类型

JavaScript中分为︰原始类型和引用类型。
原始类型
- number：数字（整数、小数、NaN(Not a Number))
- string：字符串，单双引皆可
- boolean:布尔。true,false
- null：对象为空
- undefined：当声明的变量未初始化时，该变量的默认值是undefined
js是弱类型语言，那么如何知道这个变量的值是什么类型的数据呢？？？
- 使用typeof运算符可以获取数据类型
测试

<!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>JS-数据类型</title>
</head>
<body>

</body>
<script>

    //原始数据类型
    alert(typeof 3); //number
    alert(typeof 3.14);//number

    alert(typeof "A"); //string
    alert(typeof 'Hello');//string

    alert(typeof true);//boolean
    alert(typeof false);//boolean

    alert(typeof null);//object， null被认为是对象的占位符，所以它的类型为object

    var a ;
    alert(typeof a);//undefined?
        
</script>
</html>

3.5、JS-基础语法-运算符

算术运算符: +，-，*，l，%，++， –
赋值运算符: =，+=，-=，*=，/=，%=
比较运算符: >，<，>=，<=，!=，==，===
逻辑运算符: &&，l ， !
三元运算符: 条件表达式? true_value: false_value
说明：这些运算符和java当中的运算符用法基本相同，唯一的区别是多了个===运算符。
- ==：简单的做字面值的比较
- ===：除了做字面值的比较之外，还会比较两个变量的数据类型
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        var a = "12";
        var b = 12;

        alert( a == b ); // true
        alert( a === b ); // false

    </script>
</head>
<body>

</body>
</html>

3.6、JS-基础语法-类型转换

字符串类型转为数字:
- 将字符串字面值转为数字。如果字面值不是数字，则转为NaN。
其他类型转为boolean:
- Number数字类型：0和NaN为false，其他均转为true。
- String：空字符串为false，其他均转为true。
- Null和undefined：均转为false。
案例测试：

<!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>JS-运算符</title>
</head>
<body>
    
</body>
<script>

    // 1.类型转换 - 字符串类型转为数字
    alert(parseInt("12")); //12
    alert(parseInt("1222A45")); //1222 它会从第一个字符开始往后匹配，直到匹配到了一个不是数字的字符
    alert(parseInt("A45")); //NaN（not a number） 第一个字符开始就不是数字

    //2.类型转换 - 其他类型转为boolean
    //2.1 数字类型转化为boolean
    if(0){ //false  流程控制语句，只有里面的条件为true才会执行代码块中的代码，它会进行自动的类型转换，将0转化为boolean。
        alert("0 转换为false");
    }
    if(NaN){ //false
        alert("NaN 转换为false");
    }
    if(-1){ //true
        alert("除0和NaN其他数字都转为 true");
    }

    //2.2 字符串类型转化为boolean
    if(""){ //false
        alert("空字符串为 false, 其他都是true");
    }

    //2.3 Null和undefined
    if(null){ //false
        alert("null 转化为false");
    }
    if(undefined){ //false
        alert("undefined 转化为false");
    }
    
</script>
</html>

3.7、JS-基础语法-流程控制

if…else if …else…
switch
for
while
do … while
用法和java当中相同
参考官方文档: https://www.w3school.com.cn/jsref/jsref_statements.asp

4、js-函数

4.1、介绍

介绍：函数（方法）是被设计为执行特定任务的代码块。
定义: JavaScript函数通过function关键字进行定义
注意:
- 形式参数不需要类型。因为JavaScript是弱类型语言
- 返回值也不需要定义类型，可以在函数内部直接使用return返回即可
- JS中，函数调用可以传递任意个数的参数。
调用：函数名称(实际参数列表)

4.2、定义方式一

语法：
案例测试：

<!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>JS-函数</title>
</head>
<body>
    
</body>
<script>

    //定义函数-1
    function add(a,b){
       return  a + b;
    }

    //函数调用,有返回值才需要接收。
    var result = add(10,20);
    alert(result); //30

    //函数定义的时候定义2个，在调用的时候可以传递任意个数的参数，但是接收时任然按照前2个传值。
    var result1 = add(10,20,30,40);
    alert(result);//30

</script>
</html>

4.3、定义方式二

格式：
案例测试：

<!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>JS-函数</title>
</head>
<body>
    
</body>
<script>

    //定义函数-2
    var add = function(a,b){
        return  a + b;
    }
    
    //函数调用
    var result = add(10,20);
    alert(result);//30

</script>
</html>

5、JS-对象-Array数组

5.1、介绍

JavaScript中Array对象用于定义数组。
定义：
访问：
特点：
- JavaScript 中的数组相当于Java 中集合，数组的长度是可变的，而JavaScript 是弱类型，所以可以存储任意的类型的数据。
数组Array作为js中的一个对象，既然是对象那么就有对应的属性和方法：
- 属性：
- 方法：
- 使用箭头函数简化函数定义语法：

5.2、测试1：定义方式&特点

<!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>JS-对象-Array</title>
</head>
<body>
    
</body>
<script>
    //1.定义数组
    //  var arr = new Array(1,2,3,4);//方式一
    //  var arr = [1,2,3,4]; //方式二

    //  console.log(arr[0]);//1
    //  console.log(arr[1]);//2

    //2.特点: 长度可变 类型可变
    var arr = [1,2,3,4];
    arr[10] = 50;

    console.log(arr[10]); //50
    console.log(arr[9]); //undefined
    console.log(arr[8]); //undefined

    arr[9] = "A";
    arr[8] = true;

    alert(arr); //1,2,3,4,,,,,true,A,50

</script>
</html>

5.3、测试2：属性&方法

<!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>JS-对象-Array</title>
</head>
<body>
    
</body>
<script>

    //1.遍历出所有的元素
    var arr = [1,2,3,4];
    arr[6] = 50;
    for (let i = 0; i < arr.length; i++) {
        console.log(arr[i]); //1 2 3 4 undefined undefined 50
    }

    console.log("==================");

    //2.forEach: 遍历数组中有值的元素，没有值的元素不会遍历
    arr.forEach(function(e){
        console.log(e);//1 2 3 4 50
    })

    //3.ES6 箭头函数: (...) => {...} -- 简化函数定义
    arr.forEach((e) => {
        console.log(e);//1 2 3 4 50
    })

    //4.push: 添加元素到数组末尾
    arr.push(7,8,9);
    console.log(arr);//1,2,3,4,,,50,7,8,9

    //5.splice: 删除元素
    arr.splice(2,2);//从哪个下标开始删，删除几个
    console.log(arr);//1,2,,,50,7,8,9

</script>
</html>

6、JS-对象-String

6.1、介绍

String字符串对象创建方式有两种:
属性：
方法：

6.2、测试

<!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>JS-对象-String</title>
</head>
<body>
    
</body>
<script>
    //创建字符串对象
    //var str = new String("Hello String");
    var str = "  Hello String    ";

    console.log(str);

    //length //字符的长度
    console.log(str.length); //18

    //charAt 获取下标对应的字符
    console.log(str.charAt(4)); //l

    //indexOf  获取字符对应的下标
    console.log(str.indexOf("lo")); //5

    //trim 去除两边空格
    var s = str.trim();
    console.log(s); //Hello String

    //substring(start,end) ---截取字符串, 开始索引, 结束索引 (含头不含尾)
    console.log(s.substring(0,5)); //Hello

</script>
</html>

7、JS-自定义对象

7.1、方式一：{}大括号形式

定义格式：
调用格式：
测试：

<!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>JS-对象-JSON</title>
</head>
<body>
    
</body>
<script>
    //自定义对象
    var user = {
        name: "Tom",
        age: 10,
        gender: "male",
        // eat: function(){
        //     alert("用膳~");
        // }
        //在自定义对象中编写方法，那么冒号和后面的function关键字可以省略
        eat(){
            alert("用膳~");
        }
    }

    alert(user.name);
    user.eat();


</script>
</html>

7.2、方式二：Object形式

定义格式：

var 变量名 = new Object();	// 对象实例（空对象） 

变量名.属性名 = 值;	// 定义一个属性

变量名.函数名 = function(){}	// 定义一个函数

调用格式：

变量名.属性;

变量名.函数名();

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        // 对象的定义：
        //     var 变量名 = new Object();   // 对象实例（空对象）
        //     变量名.属性名 = 值;		  // 定义一个属性
        //     变量名.函数名 = function(){}  // 定义一个函数
        var obj = new Object();
        obj.name = "华仔";
        obj.age = 18;
        obj.fun = function () {
            alert("姓名：" + this.name + " , 年龄：" + this.age);
        }
        // 对象的访问：
        //     变量名.属性 / 函数名();
        // alert( obj.age );
        obj.fun();

    </script>
</head>
<body>

</body>
</html>

8、JS-对象-BOM

概念：Browser Object Model浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象。
组成：
- window：浏览器窗口对象（掌握）
- Navigator：浏览器对象
- Screen：屏幕对象
- History：历史记录对象
- Location：地址栏对象（掌握）

8.1、window：浏览器窗口对象

介绍：浏览器窗口对象。
获取：直接使用window，其中window.可以省略。
属性
- history：对 History对象的只读引用。请参阅History对象。
- location：用于窗口或框架的Location对象。请参阅Location对象。
- navigator：对Navigator对象的只读引用。请参阅Navigator对象。
方法
- alert()：显示带有一段消息和一个确认按钮的警告框。
- confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。
- setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。
- setTimeout()：在指定的毫秒数后调用函数或计算表达式。
测试：

<!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>JS-对象-BOM</title>
</head>
<body>
    
</body>
<script>
    //获取：直接写就可以获取到window对象
    // window.alert("Hello BOM");
    // alert("Hello BOM Window");

    //方法
    //confirm - 对话框 -- 确认: true , 取消: false
    // var flag = confirm("您确认删除该记录吗?");
    // alert(flag);

    //定时器 - setInterval -- 周期性的执行某一个函数（函数，周期时间）
    // var i = 0;
    // setInterval(function(){
    //     i++;
    //     console.log("定时器执行了"+i+"次");
    // },2000);  //每隔2s执行一次函数

    //定时器 - setTimeout -- 延迟指定时间执行一次 
    // setTimeout(function(){
    //     alert("JS");
    // },3000); //3秒后执行一次方法，只执行一次

</script>
</html>

8.2、Location：地址栏对象

介绍：地址栏对象。
获取：使用window.location获取，其中window.可以省略。
属性:
- href：设置或返回完整的URL。
测试：

<!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>JS-对象-BOM</title>
</head>
<body>
    
</body>
<script>

    //location
    alert(location.href); //获取当前浏览器的地址

    //设置浏览器地址，赋完值之后，浏览器会自动跳转到赋值之后的地址
    location.href = "https://www.itcast.cn";

</script>
</html>

9、js 中的事件

9.1、事件介绍

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

常用的事件：

onload 加载完成事件(又叫做文档就绪事件函数)：页面加载完成之后，常用于做页面 js 代码初始化操作
onclick 单击事件：常用于按钮的点击响应操作。
onblur 失去焦点事件：常用用于输入框失去焦点后验证其输入内容是否合法。
onchange 内容发生改变事件：常用于下拉列表和输入框内容发生改变后操作
onsubmit 表单提交事件：常用于表单提交前，验证所有表单项是否合法。

事件的注册又分为静态注册和动态注册两种：

什么是事件的注册（绑定）？
其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。

静态注册事件：通过 html 标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。

动态注册事件：是指先通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象.事件名 = function(){} 这种形式赋于事件响应后的代码，叫动态注册。

动态注册基本步骤：

1、获取标签对象
2、标签对象.事件名 = fucntion(){}

9.2 onload 加载完成事件（网页加载顺序）

网页加载顺序：从上到下，从左到右
- 问题：js代码在前，加载的html页面在后：由于页面还没有加载到html标签，在js代码中就已经使用到了标签，所以会报错。
- 解决：
  - 把js代码放到页面html标签之后。
  - 把js代码放到文档就绪事件的方法中，页面加载完成后会自动执行文档就绪事件函数。
  - 把js代码放到点击事件对应的自定义函数中，页面加载完成后点击页面上的点击事件，执行对应的方法。
注意：
- 页面加载时也会按顺序执行js代码，只不过现在把js代码放到方法中，方法只能是调用才会执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // onload事件的方法
        function onloadFun() {
            alert('静态注册onload事件，所有代码');
        }

        // onload事件动态注册。是固定写法
        window.onload = function () {
            alert("动态注册的onload事件");
        }

    </script>
</head>
<!--静态注册onload事件,onload事件是浏览器解析完页面之后就会自动触发的事件
<body οnlοad="onloadFun();">    
<body>
-->
</body>
</html>

9.3 onclick 单击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onclickFun() {
            alert("静态注册onclick事件");
        }

        // 动态注册onclick事件
        window.onload = function () {
            // 1 获取标签对象
            /*
            * document 是JavaScript语言提供的一个对象（文档）<br/>
            * get           获取
            * Element       元素（就是标签）
            * By            通过。。   由。。经。。。
            * Id            id属性
            *
            * getElementById通过id属性获取标签对象
            **/
            var btnObj = document.getElementById("btn01");
            // alert( btnObj );
            // 2 通过标签对象.事件名 = function(){}
            btnObj.onclick = function () {
                alert("动态注册的onclick事件");
            }
        }

    </script>
</head>
<body>
    <!--静态注册onClick事件-->
    <button onclick="onclickFun();">按钮1</button>
    <button id="btn01">按钮2</button><!-- 按钮的另一种写法-->
</body>
</html>

9.4 onblur 失去焦点事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 静态注册失去焦点事件
        function onblurFun() {
            // console是控制台对象，是由JavaScript语言提供，专门用来向浏览器的控制器打印输出， 用于测试使用
            // log() 是打印的方法
            console.log("静态注册失去焦点事件");
        }

        // 动态注册 onblur事件
        window.onload = function () {
            //1 获取标签对象
           var passwordObj = document.getElementById("password");
           // alert(passwordObj);
            //2 通过标签对象.事件名 = function(){};
            passwordObj.onblur = function () {
                console.log("动态注册失去焦点事件");
            }
        }

    </script>
</head>
<body>
    用户名:<input type="text" onblur="onblurFun();"><br/>
    密码:<input id="password" type="text" ><br/>
</body>
</html>

9.5 onchange 内容发生改变事件

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

    <script type="text/javascript">
        function onchangeFun() {
            alert("女神已经改变了");
        }

        window.onload = function () {
            //1 获取标签对象
            var selObj = document.getElementById("sel01");
            // alert( selObj );
            //2 通过标签对象.事件名 = function(){}
            selObj.onchange = function () {
                alert("男神已经改变了");
            }
        }


    </script>
</head>
<body>
    请选择你心中的女神：
    <!--静态注册onchange事件-->
    <select onchange="onchangeFun();">
        <option>--女神--</option>
        <option>芳芳</option>
        <option>佳佳</option>
        <option>娘娘</option>
    </select>

    请选择你心中的男神：
    <select id="sel01">
        <option>--男神--</option>
        <option>国哥</option>
        <option>华仔</option>
        <option>富城</option>
    </select>


</body>
</html>

9.6 onsubmit 表单提交事件(阻止表单提交)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" >
        // 静态注册表单提交事务
        function onsubmitFun(){
            // 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交
            alert("静态注册表单提交事件----发现不合法");

            return flase;
        }

        window.onload = function () {
            //1 获取标签对象
            var formObj = document.getElementById("form01");
            //2 通过标签对象.事件名 = function(){}
            formObj.onsubmit = function () {
                // 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交
                alert("动态注册表单提交事件----发现不合法");

                return false;
            }
        }

    </script>
</head>
<body>
    <!--return false 2个单词才可以阻止表单提交 。方法只是返回了false并没有返回return这个字，所以前面还要加个return。-->
    <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
        <input type="submit" value="静态注册"/>
    </form>
    <form action="http://localhost:8080" id="form01">
        <input type="submit" value="动态注册"/>
    </form>

</body>
</html>

10、DOM 模型

10.1、概念

概念解释：就是把文档中的标签，属性，文本，转换成为对象来管理。
关注两点：
- 获取元素对象
- 调用元素对象的属性和方法

在这里插入图片描述

10.2、Document 对象（重点）

Document 对象的理解：
- 第一点：Document 它管理了所有的 HTML 文档内容。
- 第二点：document 它是一种树结构的文档。有层级关系。
- 第三点：它让我们把所有的标签都对象化
- 第四点：我们可以通过 document 访问所有的标签对象。
什么是对象化？？
我们基础班已经学过面向对象。请问什么是对象化？
举例：有一个人有年龄：18 岁，性别：女，名字：张某某我们要把这个人的信息对象化怎么办！

Class Person {

private int age; 
private String sex; 
private String name;

}

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

<body> 
<div id="div01">div01</div> 
</body>

模拟对象化，相当于：

class Dom{

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

10.3、Document 对象中的方法（重点）

常用方法：

根据id属性值获取，返回单个Element对象
根据name属性值获取，返回Element对象数组
根据class属性值获取，返回Element对象数组
根据标签名称获取，返回Element对象数组
document.createElement( tagName)
通过给定的标签名，创建一个标签对象。tagName 是要创建的标签名

注意：

document 对象的三个查询方法，如果有 id 属性，优先使用 getElementById 方法来进行查询
如果没有 id 属性，则优先使用 getElementsByName 方法来进行查询
如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName

以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象。

10.3.1 案例1：4种方式获取节点对象

<!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>JS-对象-DOM</title>
</head>

<body>
    <img id="h1" src="img/off.gif">  <br><br>

    <div class="cls">传智教育</div>   <br>
    <div class="cls">黑马程序员</div>  <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
</body>

<script>
    //1. 获取Element元素
    //1.1 获取元素-根据ID获取
    var img = document.getElementById('h1');
    alert(img); //[object HTMLImageElement]

    //1.2 获取元素-根据标签获取 - div
    //获取到的值是数组，数组中的元素顺序是他们在html页面中从上到下的顺序，所以可以通过下标获取相应的对象
    var divs = document.getElementsByTagName('div');
    for (let i = 0; i < divs.length; i++) {
        alert(divs[i]); //[object HTMLDivElement]
    }

    //1.3 获取元素-根据name属性获取
    var ins = document.getElementsByName('hobby');
    for (let i = 0; i < ins.length; i++) {
        alert(ins[i]); //[object HTMLInputElement]
    }
    
    //1.4 获取元素-根据class属性获取
    var divs = document.getElementsByClassName('cls');
    for (let i = 0; i < divs.length; i++) {
        alert(divs[i]); //[object HTMLDivElement]
    }

    //2. 查询参考手册, 属性、方法
    var divs = document.getElementsByClassName('cls');
    var div1 = divs[0];

    div1.innerHTML = "传智教育666";
</script>
</html>

10.3.2 案例2：在js中使用正则表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //查看菜鸟教程：
        // 表示要求字符串中，是否包含字母e
        // var patt = new RegExp("e");方式一
        // var patt = /e/; // 也是正则表达式对象  方式二

        // 表示要求字符串中，是否包含字母a或b或c
        // var patt = /[abc]/;

        // 表示要求字符串，是否包含小写字母
        // var patt = /[a-z]/;

        // 表示要求字符串，是否包含任意大写字母
        // var patt = /[A-Z]/;

        // 表示要求字符串，是否包含任意数字
        // var patt = /[0-9]/;

        // 表示要求字符串，是否包含字母，数字，下划线
        // var patt = /\w/;

        // 表示要求 字符串中是否包含至少一个a
        // var patt = /a+/;




        // 表示要求 字符串中是否 *包含* 零个 或 多个a   （注意：一旦最小条件满足就停止检查，也就是说如果一开始检查第一个没有a时就不在向后面检查）
        // var patt = /a*/;

        // 表示要求 字符串是否包含一个或零个a  (同样一旦最小条件满足就停止检查)
        // var patt = /a?/;

        // 表示要求 字符串是否包含连续三个a
        // var patt = /a{3}/;

        // 表示要求 字符串是否包 至少3个连续的a，最多5个连续的a (此时只能保证最少是3个，不能保证最多为5个，想要保证最多要写成/^a{3,5}$/)
        // var patt = /a{3,5}/;

        // 表示要求 字符串是否包 至少3个连续的a，
        // var patt = /a{3,}/;

        // 表示要求 字符串必须以a结尾
        // var patt = /a$/;

        // 表示要求 字符串必须以a打头
        // var patt = /^a/;

        // 要求字符串中是否*包含* 至少3个连续的a
        // var patt = /a{3,5}/;

        // 要求字符串，从头到尾都必须完全匹配 （都是a,并且长度最少3个 最多5个）
        // var patt = /^a{3,5}$/;

        var patt = /^\w{5,12}$/; //表示要求字符串，是否包含字母，数字，下划线 并且长度最少5个 最多12个

        var str = "wzg168[[[";

        alert( patt.test(str) );


    </script>
</head>
<body>

</body>
</html>

10.3.3 案例3：验证提示效果-getElementById() 方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" >
        /*
        * 需求：当用户点击了较验按钮，要获取输出框中的内容。然后验证其是否合法。<br/>
        * 验证的规则是：必须由字母，数字。下划线组成。并且长度是5到12位。
        * */
        function onclickFun() {
            // 1 当我们要操作一个标签的时候，一定要先获取这个标签对象。
            var usernameObj = document.getElementById("username");
            // [object HTMLInputElement] 它就是dom对象  可以根据对象的引用通过key获取value值
            var usernameText = usernameObj.value;//获取文本框输入的值，如果没有输入获取的是设置的默认值value里面的值。
            // 如何 验证 字符串，符合某个规则 ，需要使用正则表达式技术
            var patt = /^\w{5,12}$/;
            /*
            *  test()方法用于测试某个字符串，是不是匹配我的规则 ，
            *  匹配就返回true。不匹配就返回false.
            * */

            //2种常见的验证提示效果：
            var usernameSpanObj = document.getElementById("usernameSpan");
            // innerHTML 表示起始标签和结束标签中的内容
            // innerHTML 这个属性可读，可写
            usernameSpanObj.innerHTML = "国哥真可爱！";

            if (patt.test(usernameText)) {
                // alert("用户名合法！");

                //第一种：设置标签之间的提示信息为红色，通过innerHTML属性来完成
                // usernameSpanObj.innerHTML = "用户名合法！";
                //第二种：设置标签之间为成功和失败的图片，通过innerHTML属性来完成，注意需要添加转义字符
                usernameSpanObj.innerHTML = "<img src=\"right.png\" width=\"18\" height=\"18\">";
            } else {
                // alert("用户名不合法！");
                // usernameSpanObj.innerHTML = "用户名不合法！";
                usernameSpanObj.innerHTML = "<img src=\"wrong.png\" width=\"18\" height=\"18\">";
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username" value="wzg"/>
    <span id="usernameSpan" style="color:red;">

    </span>
    <button onclick="onclickFun()">较验</button>
</body>
</html>

在这里插入图片描述

10.3.4 案例4：全选效果-getElementsByName() 方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 全选
        function checkAll() {
            // 让所有复选框都选中
            // document.getElementsByName();是根据 指定的name属性查询返回多个标签对象集合
            // 这个集合的操作跟数组 一样
            // 集合中每个元素都是dom对象
            // 这个集合中的元素顺序是他们在html页面中从上到下的顺序
            var hobbies = document.getElementsByName("hobby");
            // checked表示复选框的选中状态。如果选中是true，不选中是false
            // checked 这个属性可读，可写
            for (var i = 0; i < hobbies.length; i++){
                hobbies[i].checked = true; //循环遍历把每个复选框的checked属性赋值为true 就代表被选中了
            }
        }
        //全不选
        function checkNo() {

            var hobbies = document.getElementsByName("hobby");
            // checked表示复选框的选中状态。如果选中是true，不选中是false
            // checked 这个属性可读，可写
            for (var i = 0; i < hobbies.length; i++){
                hobbies[i].checked = false;
            }
        }
        // 反选
        function checkReverse() {
            var hobbies = document.getElementsByName("hobby");

            for (var i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = !hobbies[i].checked;//方式1：取反

                // if (hobbies[i].checked) { 方式2：if判断
                //     hobbies[i].checked = false;
                // }else {
                //     hobbies[i].checked = true;
                // }
            }


        }

    </script>
</head>
<body>
    兴趣爱好：
    <input type="checkbox" name="hobby" value="cpp" checked="checked">C++
    <input type="checkbox" name="hobby" value="java">Java
    <input type="checkbox" name="hobby" value="js">JavaScript
    <br/>
    <button onclick="checkAll()">全选</button>
    <button onclick="checkNo()">全不选</button>
    <button onclick="checkReverse()">反选</button>
</body>
</html>

在这里插入图片描述

10.3.5 案例5：全选效果-getElementsByTagName() 方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //注意js执行顺序问题。
        window.onload = function(){//又叫做文档就绪事件函数，网页加载完后会自动执行
            // alert( document.getElementById("btn01") );
        }


        // 全选
        function checkAll() {
            alert( document.getElementById("btn01") );
            // document.getElementsByTagName("input");
            // 是按照指定标签名来进行查询并返回集合
            // 这个集合的操作跟数组 一样
            // 集合中都是dom对象
            // 集合中元素顺序 是他们在html页面中从上到下的顺序。
            var inputs = document.getElementsByTagName("input");

            for (var i = 0; i < inputs.length; i++){
                inputs[i].checked = true;
            }
        }
    </script>
</head>
<body>

    <!--as -->
    兴趣爱好：
    <input type="checkbox" value="cpp" checked="checked">C++
    <input type="checkbox" value="java">Java
    <input type="checkbox" value="js">JavaScript
    <br/>
    <button id="btn01" onclick="checkAll()">全选</button>

</body>
</html>

在这里插入图片描述

10.3.6 案例6：createElement() 创建标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            // 现在需要我们使用js代码来创建html标签，并显示在页面上
            // 标签的内容就是：<div>国哥，我爱你</div>
            var divObj = document.createElement("div"); // 在内存中 <div></div>
            //方式2可以看出文本也是一个节点，先创建一个节点 再把节点添加到div节点下，在整体添加到body下
            var textNodeObj = document.createTextNode("国哥，我爱你"); // 有一个文本节点对象 #国哥，我爱你    写法2：

            divObj.appendChild(textNodeObj); // <div>国哥，我爱你</div>  写法2：

            // divObj.innerHTML = "国哥，我爱你"; // <div>国哥，我爱你</div>,但，还只是在内存中   写法1：
            // 添加子元素
            document.body.appendChild(divObj);
        }
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

10.4、节点对象的常用属性和方法

说明：节点就是标签对象

方法：

//通过具体的元素节点 调用getElementsByTagName()方法，获取当前节点的指定标签名孩子节点
//解释：先通过document.getElementsByTagName(tagname)获取父节点，在调用getElementsByTagName()方法获取当前父节点下指定标签名孩子节点。
document.getElementsByTagName(tagname).getElementsByTagName(tagname);

//方法，可以添加一个子节点，oChildNode 是要添加的孩子节点
appendChild( oChildNode )

属性：

childNodes
属性，获取当前节点的所有子节点
firstChild
属性，获取当前节点的第一个子节点
lastChild
属性，获取当前节点的最后一个子节点
parentNode
属性，获取当前节点的父节点
nextSibling
属性，获取当前节点的下一个节点
previousSibling
属性，获取当前节点的上一个节点
className     //class是个关键字，为了防止关键字冲突所以用的是className 而不是class
用于获取或设置标签的 class 属性值
innerHTML
属性，表示获取/设置起始标签和结束标签中的内容(如果指定标签中有标签和文本 那么获取：标签+文本)
innerText
属性，表示获取/设置起始标签和结束标签中的文本(如果指定标签中有标签和文本 那么会自动去掉标签，只能获取文本)

10.4.1 练习：05.DOM 查询练习(value/文本值问题)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom查询</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
	window.onload = function(){
		//1.查找#bj节点
		document.getElementById("btn01").onclick = function () {
			var bjObj = document.getElementById("bj");
			alert(bjObj.innerHTML);
		}
		//2.查找所有li节点
		var btn02Ele = document.getElementById("btn02");
		btn02Ele.onclick = function(){
			var lis = document.getElementsByTagName("li");
			alert(lis.length)
		};
		//3.查找name=gender的所有节点
		var btn03Ele = document.getElementById("btn03");
		btn03Ele.onclick = function(){
			var genders = document.getElementsByName("gender");
			alert(genders.length)
		};
		//4.查找#city下所有li节点
		var btn04Ele = document.getElementById("btn04");
		btn04Ele.onclick = function(){
			//1 获取id为city的节点
			//2 通过city节点.getElementsByTagName按标签名查子节点
			var lis = document.getElementById("city").getElementsByTagName("li");
			alert(lis.length)
		};
		//5.返回#city的所有子节点
		var btn05Ele = document.getElementById("btn05");
		btn05Ele.onclick = function(){
			//1 获取id为city的节点
			//2 通过city获取所有子节点
			alert(document.getElementById("city").childNodes.length);
		};
		//6.返回#phone的第一个子节点
		var btn06Ele = document.getElementById("btn06");
		btn06Ele.onclick = function(){
			// 查询id为phone的节点
			alert( document.getElementById("phone").firstChild.innerHTML );
		};
		//7.返回#bj的父节点
		var btn07Ele = document.getElementById("btn07");
		btn07Ele.onclick = function(){
			//1 查询id为bj的节点
			var bjObj = document.getElementById("bj");
			//2 bj节点获取父节点
			alert( bjObj.parentNode.innerHTML );
		};
		//8.返回#android的前一个兄弟节点
		var btn08Ele = document.getElementById("btn08");
		btn08Ele.onclick = function(){
			// 获取id为android的节点
			// 通过android节点获取前面兄弟节点
			alert( document.getElementById("android").previousSibling.innerHTML );
		};
		//9.读取#username的value属性值
		var btn09Ele = document.getElementById("btn09");
		btn09Ele.onclick = function(){
			alert(document.getElementById("username").value);
		};
		//10.设置#username的value属性值
		var btn10Ele = document.getElementById("btn10");
		btn10Ele.onclick = function(){
			document.getElementById("username").value = "国哥你真牛逼";
		};
		//11.返回#bj的文本值
		var btn11Ele = document.getElementById("btn11");
		btn11Ele.onclick = function(){
			alert(document.getElementById("city").innerHTML);//如果指定标签之间只有文本 那么获取的是文本内容，如果指定标签之间还有标签 那么还可以获取标签。
			// alert(document.getElementById("city").innerText);//只能获取指定标签之间的文本内容
		};
	};
</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>

		<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>Windows Phone</li></ul>
	</div>

	<div class="inner">
		gender:
		<input type="radio" name="gender" value="male"/>
		Male
		<input type="radio" name="gender" value="female"/>
		Female
		<br>
		<br>
		name:
		<input type="text" name="name" id="username" value="abcde"/>
	</div>
</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>