JavaScript详解_javascript 详解-CSDN博客

本文链接：https://blog.csdn.net/m0_37671741/article/details/105670921

一、JavaScript基础

（1）JavaScript简介

JavaScript是一种可以与HTML标记语言混合使用的脚本语言，可以给HTML网页增加动态功能（特效和动画），也可以对用户数据进行自动校验，实现网页与用户之间进行直接简单的交互，其编写的程序可以直接在浏览器中解释执行。JavaScript虽然和Java语言在字面上有相似之处，实际上二者并没有什么必然的联系。

JavaScript是一门基于对象的语言！！！

（2）JavaScript组成

JavaScript由三部分组成，分别是ECMAScript，DOM和BOM。

ECMAScript（JavaScript的核心）：描述了JavaScript的基本语法和数据类型，ECMA是欧洲计算机制造联合会。
BOM（浏览器对象模型）：一套操作浏览器功能的API，通过BOM可以操作浏览器窗口，比如：弹出框，控制浏览器跳转，获取分辨率等。
DOM（文档对象模型）：一套操作页面元素的API，DOM可以把HTML看作是文档树，通过DOM提供的API可以对树上的节点进行操作。

（3）JavaScript与HTML结合的方式

写在行内

<input type="button" value="按钮" onclick="alert('Hello World')" />

写在script标签中（一般位于head标签中）（JavaScript代码只会作用于当前网页）

<head>
  <script>
    alert('Hello World!');
  </script>
</head>

写在外部js文件中，在页面引入（实现了Javascript代码的重复使用，避免代码冗余）

<script src="相对路径" type="text/javascript" charset="utf-8"></script>

注意：

引用外部js文件的script标签中不可以写JavaScript代码

二、JavaScript语法

（1）JavaScript变量声明

JavaScript中的所有变量声明只有var关键字，声明的变量可以存储任意类型的数据。

var a=123;
var a1=3.1415926;
var a2="JavaScript";
var a3='Java';
var a4=true;
var a5=new Date();
var a1="marden";  //同名变量，后面的会将前面的覆盖

注意：

JavaScript的变量名严格区分大小写。
JavaScript中的字符串可以使用单引号也可以使用双引号，不区分Char和String。
JavaScript中可以声明同名变量，后面的会将前面的覆盖。

（2）JavaScript数据类型

JavaScript数据类型包括五种基本数据类型和一种引用数据类型。

number：数字类型
string：字符串类型
boolean：布尔类型
null：空对象赋值，需要手动设置，主要是和undefined进行区分。
undefined：undefined表示一个声明了但是没有赋值的变量，变量只声明的时候值默认是undefined
object：对象类型

注意：可以使用typeof进行数据类型的判断

var a1=123;
var a2="hello";
var a3=new Date();
alert(typeof a1);
alert(typeof a2);
alert(typeof a3);

注意：在JavaScript代码中尽可能的给声明的变量赋初始值

var d;
alert(d);            //声明了但是未赋值的变量为undefined
alert(typeof c);     //变量c未声明，但其数据类型为undefined

注意：JavaScript中特殊的值

null：object类型
undefined：undefined类型
NaN：number类型

（3）JavaScript数据类型转换

转换成字符串类型：

toString()

var num=5;
console.log(num.toString());

String()

String()函数存在的意义：有些值没有toString()，这个时候可以使用String()。比如：null和undefined

拼接字符串方式

num+"",当+两边一个操作符是字符串类型，一个操作符是其他类型的时候，会先把其他类型转换成字符串类型再进行字符串拼接，最后返回字符串

转换成数值类型：

Number()

Number（）可以把任意类型转换成Number类型，如果要转换的字符串中有一个不是数值的字符，返回NaN

parseInt()

//返回12，如果第一个字符是数字，会解析直到遇到非数字结束
var num1=parseInt("12.3abc");

//返回NaN,如果第一个字符不是数字或者字符，就返回NaN
var num2=parseInt("abc123");

parseFloat()

parseFloat()把字符串转换成浮点数
parseFloat()和parseInt非常相似，不同之处在与
	parseFloat会解析第一个. 遇到第二个.或者非数字结束
	如果解析的内容里只有整数，解析成整数

+,-,0等运算

var str = '500';
console.log(+str);		// 取正
console.log(-str);		// 取负
console.log(str - 0);

转换成布尔类型：

Boolean()

0   ""   null   undefined   NaN会转换成false，其它都会转换成true

（4）JavaScript运算符

算数运算符：

加法：+
减法：-
乘法：*
除法：/
余数：%

注意：

number类型和number类型
number类型和boolean类型（true---1，false---0）
number类型和string类型（*，/，%，-）
string类型和string类型（*，/，%，-）
string类型数字和boolean类型（*，/，%，-）
在算数运算中如果两边的数据类型不是number的话，会使用Number（）强转后再进行运算
字符串的加法会作为字符连接，不会运算（在字符串中“+”代表的是字符串的连接，不会参与运算）

自增自减运算符

逻辑运算符：（与Java中一致）

关系运算符：

>
>=
<
<=
！=

特殊关系运算符：

等值运算符：==（先判断类型，类型一致则直接比较；类型不一致，则先使用Number（）进行强转后再进行比较）

<script type="text/javascript">
    var a=1;
    var a1="1";
    var a2=true;
    var a3="true";
    var a4="a";
    var a5="a";

    alert(a==a1);  //true
    alert(a==a2);    //true
    alert(a==a3);    //false
    alert(a1==a2);    //true
    alert(a1==a3);    //false
    alert(a2==a3);    //false
    alert(a4==a5);    //true

</script>

等同运算符：===（先判断类型，类型一致再比较内容，内容也一致则返回true；类型不一致，则直接返回false）

<script type="text/javascript">
    var a=1;
    var a1="1";
    var a2=true;
    var a3="true";
    var a4="a";
    var a5="a";

    alert(a==a1);  //false
    alert(a==a2);    //false
    alert(a==a3);    //false
    alert(a1==a2);    //false
    alert(a1==a3);    //false
    alert(a2==a3);    //false
    alert(a4==a5);    //true

</script>

注意：

null和undefined在做==判断时候返回true
==和===的区别：==只进行值的比较，===类型和值同时相等，则相等

（5）JavaScript逻辑结构

顺序结构：从上到下执行的代码就是顺序结构

分支结构：根据不同的情况，执行对应的代码

if结构：

单分支结构：if（判断条件）{执行体}

双分支结构：if（判断条件）{执行体}else{执行体}

多分支结构：if（判断条件）{执行体}else if{执行体}else{执行体}

switch结构：

switch (expression) {
  case 常量1:
    语句;
    break;
  case 常量2:
    语句;
    break;
  case 常量3:
    语句;
    break;
  …
  case 常量n:
    语句;
    break;
  default:
    语句;
    break;
}

注意：

判断的变量可以是number类型也可以是string类型，但是不要混用
break可以省略，如果省略，代码会继续执行下一个case
switch语句在比较值时，使用的是全等操作符，因此不会发生类型转换

循环结构：重复做一件事情

for循环

for (初始化表达式1; 判断表达式2; 自增表达式3) {
  // 循环体4
}


示例：
for(var i;i<3;i++){
    alert("好热"+i);
}i

while循环

while (循环条件) {
  //循环体
}

do...while循环

do {
  // 循环体;
} while (循环条件);

注意：

break：立即跳出整个循环，即循环结束
continue：立即跳出当前循环，继续执行下一次循环

（6）JavaScript数组（数组的长度不固定）

数组的声明

<script type="text/javascript">
    var arr1=new Array();     //第一种声明方式（声明一个空数组对象）
    arr1[0]="abc";


    var arr2=new Array(5);    //第二种声明方式（声明一个指定长度的数组）
    alert(arr2.length);

    var arr3=[1,2,3,4,5];     //第三种声明方式（声明数组---最常用）
    alert(arr3);

</script>

注意：

JavaScript中的数组声明不用指定长度，数组的长度是不固定的，会随着元素的数量改变而改变。

数组的赋值和取值

<script>
    var arr=[];
    arr[0]=2;
    arr[1]="abc";
    arr[2]=true;
    arr[3]=new Date();
    arr[10]="哈哈";      //角标可以是任意的正整数或者是0
</script>

注意：

数组可以存储任意类型的数据
数组取出的时候，如果角标不存在，返回undefined

数组的length属性

数组名.length //返回当前数组的长度
数组名.length=新的数值 //动态的改变数组的长度

<script>
    var arr=[];
    arr[10]="abc";
    alert(arr.length);    //数组长度为11

    arr.length=100;
    alert(arr.length);
</script>

数组的遍历

<script>
    var arr=[1,2,3,4,5,"abc"];
    alert(arr.length);
    for(var i=0;i<arr.length;i++){        //第一种遍历
        alert(arr[i]);
    }


    for(var i in arr){                    //第二种遍历
        alert(arr[i]); //获取的是数值
        alert(i);      //获取的是角标
    }



</script>

数组的操作函数

数组的合并：arr.concat(b,c)；
数组指定间隔符转换字符串：var b=arr.join("-");
数组移除最后一个元素并返回：var ele=arr.pop()；
数组的追加，返回新的长度：var ln=arr.push("lol");追加的元素可以是一个数组，但是会作为一个角标值存在
数组的移除第一个元素：var ele=arr.shift();
数组的在开始位置插入指定元素：var a=arr.unshift("又是周五了");
数组删除指定位置元素：var arr2=arr.splice(1,3,"a");

（7）JavaScripy函数（函数也是对象！！！）

把一段相对独立的具有特定功能的代码块封装起来，形成一个独立实体，就是函数。

函数的作用就是封装一段代码，将来可以重复使用。

函数的声明

方式一：function（形参名1，形参名2......）{执行体}
方式二：var 函数名 = new Function("形参名1","形参名2"......,"函数执行体");
方式三：var 变量名 = function(形参名1，形参名2......){执行体}

<script>
    //方式1：function（形参名1，形参名2......）{执行体}
    function test1(){
        alert("函数声明一");
    }


    //方式2：var 函数名 = new Function("形参名1","形参名2"......,"函数执行体");
    //该声明表明在JavaScript中函数是作为对象存在的
    var test2=new Function("a1","a2","alert('函数声明二')");


    //方式3：var 变量名 = function(形参名1，形参名2......){执行体}
    var test3=function(a1,a2){
         alert("函数声明三");
    }
</script>

注意：JavaScript代码声明区域和执行区域是一起的，都是在JavaScript代码的代码域中。

函数的参数

JavaScript中的函数在调用时，形参可以不赋值，不会报错
JavaScript中的函数在调用时，形参赋值可以不全部赋值，不会报错，但是实参会依次进行赋值

<script>
    function testParam(a1,a2,a3){
        alert("hello,world");
    }
    

    testParam(1,2);
</script>

函数的返回值

在JavaScript中如果函数有返回值则直接返回，如果没有返回值则默认返回undefined

<script>
    function testParam(a1,a2,a3){
        alert("hello,world");
        return("JavaScript");
    }
    

    alert(testParam());
</script>

函数的执行符

在JavaScript中函数的执行符是：（）
没有括号则函数名其实是一个变量，加上括号函数会被执行

<script>
    function test(){
        return("JavaScript");
    }
    

    alert(test);     //打印函数内容
    alert(test());   //打印函数返回值
</script>

函数作为实参传递

<script>
    function test1(a){
        alert(a);
    }
    
    function test2(){
        return "js";
    }
    

    test1(test2);   //打印函数test2的内容，函数test2没有括号，并不是函数的执行符，所以test2只是函数名，所以会被test1打印该函数内容
    test1(test2());  //打印"js"
</script>

开发中经常用的传递方式

<script>
    //方式1
    function testObj(fn){   //testObj函数在被调用时候，实参必须是一个函数对象
        alert(fn());
    }

    
    //方式2
    testObj2(function(){alert("hello,world");})
</script>

（8）JavaScript中的类和对象

JavaScript中类是以函数的形式来定义的

类的声明

<script>

    function 类名(){
        this.属性名1=形参1;
        this.属性名2=形参2;
        ......
        this.属性名=函数名;
}

</script>

类的使用

<script>
    var 对象名=new 类名（实参1，实参2......）;

</script>

<script>

    //类的声明
    function Persion(){
        this.name=name;
        this.age=age;
        this.test=function(a){
            alert(a);
            }
        }

    //使用类
    var p1=new Persion("张三",43);
    alert(p1.name);
    alert(p1.address);   //返回undefined，没有手动声明，会自动声明为undefined
    p1.address="北京市";
    alert(p1.address);   //返回"北京市"
    var p2=new Persion("李四",34);
    alert(pe.age);

</script>

注意：

JavaScript中类的内容只是对象的公共部分，每个对象还可以自定义的进行扩充那个。

类的“继承”

注意：

prototype属性可以向对象添加属性和方法！！！
通过prototype关键字实现了不同对象之间的数据共享。
prototype可以实现某个类的所有子对象的方法区对象的共享，节省内存

<script type="text/javascript">

    function employee(name,job,born)
    {
        this.name=name;
        this.job=job;
        this.born=born;
    }

    var bill=new employee("Bill Gates","Engineer",1985);

    employee.prototype.salary=null;
    bill.salary=20000;

    document.write(bill.salary);

</script>

JavaScript创建自定义对象

对象的作用：用来存储整体数据

原因：很多时候我们没有办法预先知道一个对象应该有哪些属性，所以只能临时创建一个对象来自定义属性存储数据，来保证数据的完整性。

应用：Ajax中会使用

使用：

创建自定义对象
一般用来存储数据，不会在自定义对象中存储函数对象
JavaScript中的对象属性和内容是可以自定义扩充的，不是依赖于类的声明的，类只是对象公共部分的一种声明，是为了节省代码的冗余的。（JavaScript是基于对象的，有了对象发现对象中冗余代码太多才有了类）

（8）JavaScript中常用方法和对象

JavaScript中的对象分为3类：内置对象，浏览器对象，自定义对象

JavaScript提供多个内置对象：Math、Array、String、Boolean、Number等

对象只是带有属性和方法的特殊数据类型，学习内置对象，只要学会其常用的方法即可。

String对象

使用：字符串.函数

//大小写转换
toUpperCase()：转换大写
toLowerCase()：转换小写


字符串截取
substr(0,1)：从指定开始位置截取指定长度的子字符串   
substring(0,1)：从指定位置开始到指定结束为止的子字符串（含头不含尾）


查找字符位置
indexOf()：返回指定字符第一次出现的位置
lastIndexOf()：返回指定字符最后一次出现的位置

Date对象

使用：需要创建Date实例来处理日期和时间。

注意：获取的是客户端的时间，不能作为系统功能校验的时间。

<script>
    //创建日期对象
    var d=new Date();

     alert(d.getYear());         //返回从1900年起算距今的年份

     alert(d.getFullYear());     //返回当前的年份

     alert(d.getMonth()+1);      //获取当前的月份（注意要+1）

     alert(d.getDate());         //返回当前的日期

     alert(d.getDay());          //返回星期数，注意星期日返回0

     alert(d.getHours());        //返回当前的小时数

     alert(d.getMinutes());      //返回当前的分钟数

     alert(d.getSeconds());      //返回当前的秒数

</srript>

Math对象

Math对象不是构造函数，它具有数学常数和函数的属性和方法，都是以静态成员的方式提供的。

Math.PI						// 圆周率
Math.random()				// 生成随机数
Math.floor()/Math.ceil()	 // 向下取整/向上取整
Math.round()				// 取整，四舍五入
Math.abs()					// 绝对值
Math.max()/Math.min()		 // 求最大和最小值

Math.sin()/Math.cos()		 // 正弦/余弦
Math.power()/Math.sqrt()	 // 求指数次幂/求平方根

Global对象

Global对象从不直接使用，并且不能用new运算符创建。它在Scripting引擎被初始化时创建，并立即使其方法和属性可用。

注意：直接使用方法即可，不需要Global对象调用！！！

//eval():将字符串转换为JavaScript代码并执行
//示例：
eval("var a='123';");



//isNaN():判断Number强转后是否是数字
//示例：
if(!isNaN(a)){
    alert("是数字");
}


//parseInt():解析一个字符串并返回一个整数。


//parseFloat():解析一个字符串并返回一个浮点数。

（9）JavaScript事件机制

事件机制：当我们的行为动作满足了一定的条件后，会触发某类事务的执行。

常用事件：

在这里插入图片描述

JavaScript中添加事件方式：

方式一：在HTML元素上直接使用事件属性进行添加，属性值为所监听执行的函数。

<html>
    <head>
        <script>
            function test(){
                alert("我是单击事件");
            }
        </script>
    </head>

    <body>
        <input type="button" value="点击我" onclick="test();" />
    </body>

</html>

注意：

JavaScript中的事件只有在当前HTML元素上有效。一个HTML元素可以添加多个不同的事件，一个事件可以监听触发多个函数的执行。
要给合适的HTML标签添加合适的事件，比如：onchange事件添加给select下拉框；onload事件添加给body标签；单双击事件添加给用户会进行点击动作的HTML元素；鼠标事件添加给用户会进行鼠标移动操作的HTML元素；键盘事件添加给用户会进行键盘操作的HTML元素。
给HTML元素添加多个事件时，注意事件之间的冲突。比如：单击事件和双击事件，当事件的出发条件包含相同部分的时候，会产生事件之间的冲突。
事件的阻断：当事件所监听的函数的返回值返回给事件时，如果是false，则会阻断当前事件所在的HTML标签的功能；如果是true，则继续执行当前事件所在的HTML标签的功能。
超链接可以调用JavaScript的函数，格式：<a href="javascript：函数名()">调用JavaScript函数</a>

三、BOM（浏览器对象模型）-----window对象

BOM（浏览器对象模型-----Browser Object Model）：规范浏览器对JavaScript语言的支持（JavaScript调用浏览器本身的功能）

BOM是一种规范，各大浏览器厂商提供了一个window对象！！！写代码时，直接调用window对象即可（已经封装好的）。

window对象代表整个浏览器。（浏览器对外提供的）

window对象包括window对象的方法和window对象的属性（window对象封装了其他对象）

注意：

所有的浏览器都支持window对象，window对象是BOM的核心，它代表浏览器的窗口。
所有全局JavaScript对象，函数和变量都自动成为window对象的成员。
全局变量是window对象的属性，全局函数是window对象的方法，甚至DOM的document对象也是winodw对象属性。
window对象不用new，直接进行使用即可，类似Math的使用方式，window关键字可以省略不写。

（2）弹出框

注意：返回值作为校验的条件

警告框：alert（提示一个警告信息，没有返回值）
确认框：confirm（提示用户选择一项操作，点击确认，返回true；点击取消，返回false）
提示框：prompt（提示用户某个信息的录入或者收集，点击确定，返回当前用户录入的数据，默认返回空字符串；点击取消，返回null）

<script>

    window.alert("我是一个警告框");

    window.confirm("确定要删除吗？");

    window.prompt("请输入昵称：");

</script>

注意：

window.alert() 方法可以不带 window 前缀来写。
window.confirm() 方法可以不带 window 前缀来编写。
window.prompt() 方法可以不带 window 前缀来编写。

（3）定时和间隔

setTimeout(function, milliseconds)：指定的时间后执行指定的函数。参数1：函数对象；参数2：时间，单位毫秒；返回当前定时器的id
setInterval(function, milliseconds)：每间隔指定时间执行指定的函数。参数1：函数对象；参数2：时间间隔，单位毫秒；返回当前间隔器的id
clearTimeout(id)：用来停止指定的定时器。参数：定时器的id
clearInterval(id)：用来停止指定的间隔器。参数：间隔器的id

<html>

<head>
<script>
    var id1;
    var id2;
    function test1(){
        id1=window.setTimeout(function(){
                alert("我是定时执行");
            },3000);
    }

    function test2(){
        id2=window.setInterval(function(){
                alert("我是间隔执行");
            },3000);
    }

    function test3(){
        window.clearTimeout(id1);
    }

    function test4(){
        window.clearInterval(id2);
    }
</script>
</head>


<body>
    <input type="button" value="定时执行" onclick="test1();"/>
    <input type="button" value="间隔执行" onclick="test2();"/>

    <input type="button" value="停止定时执行" onclick="test3(id1);"/>
    <input type="button" value="停止间隔执行" onclick="test4(id2);"/>
</body>

<html>

（4）子窗口

打开子窗口：window.open('子页面的资源路径（相对路径）','打开方式','配置')
关闭子窗口：window.close()关闭子页面的方法，但是该方法只能关闭open方式打开的子页面
子页面调用父页面的函数：window.opener.父页面的函数

示例：主页打开子页面，并且倒计时5秒后自动关闭

//主页面
<html>
    <head>
        <script>
            function testOpen(){ 
                            window.open('son.html',newwindow,'heighe=400,width=600,top=100px,left=320px,toolbar=yes,menubar=0,scrollbars=no,resizable=no,location=no,status=no');
    }
        </script>
    </head>


    <body>
        <input type="button" value="测试子页面" onclick="testOpen()" />
    </body>
<html>




//子页面
<html>
    <head>
        <title>子页面</title>
        <script>
            function testTime(){
                window.setInterval(function(){
                        var span=document.getElementById("timeSpan");
                        span=innerHTML=span.innerHTML-1;
                        //关闭子页面
                        if(span.innerHTML==0){
                            window.close();
                            }
                        },1000);
            }
        </script>
    </head>

    <body onload="testTime()">
        <h3>子页面你</h3>
        </hr>
        <b>欢迎访问子页面，<span id="timeSpan" style="color:red;font-size:40px">5</span>秒后页面关闭</b>
    </body>
</html>

（5）window对象的常用属性

地址栏属性（location对象）

window.location.href 返回当前页面的 href (URL)
window.location.hostname 返回 web 主机的域名
window.location.pathname 返回当前页面的路径或文件名
window.location.protocol 返回使用的 web 协议（http: 或 https:）
window.location.assign 加载新文档
window.location.reload 刷新当前页面

<html>
    <head>
        <script>
            function testLocation1(){
                window.location.href="www.baidu.com"; //相当于直接修改浏览器地址栏URL
            }

            function testLocation2(){
                window.location.reload();
            }
        </script>
    </head>

    <body>
        <input type="button" value="测试地址栏属性（资源跳转）" onclick="testLocation1()"/>
        
        <input type="button  value="测试地址栏属性（刷新）" onclick="testLocation2()"/>

    </body>

</html>

历史记录属性（history对象）

window.history.back() - 等同于在浏览器点击后退按钮
window.history.forward() - 等同于在浏览器中点击前进按钮
window.history.go(index)-跳转到指定的历史记录资源（index为前进或后退几步）

<html>
    <head>
        <script>
            function testLocation1(){
                window.history.forward();
            }

            function testLocation2(){
                window.history.back();
            }
        </script>
    </head>

    <body>
        <input type="button" value="测试地址栏属性（前进）" onclick="testLocation1()"/>
        
        <input type="button  value="测试地址栏属性（后退）" onclick="testLocation2()"/>

    </body>

</html>

屏幕属性（screen对象）

window.screen.width：获取屏幕的宽度分辨率（像素）
window.screen.height：获取屏幕的高度分辨率（像素）
window.screen.availWidth：获取屏幕的宽度分辨率（像素），减去诸如窗口工具条之类的界面特征
window.screen.availHeight：获取屏幕的高度分辨率（像素），减去注入窗口工具条之类的界面特征
window.screen.colorDepth：获取以位计算的屏幕色彩深度
window.screen.pixelDepth：获取屏幕的像素深度

浏览器配置属性（navigator对象）

window.navigator.appName：返回浏览器的应用程序名称
window.navigator.appCodeName：返回浏览器的应用程序代码名称
window.navigator.userAgent：返回浏览器发送到服务器的用户代理报头
window.navigator.platform：返回浏览器平台（操作系统）
window.navigator.language：返回浏览器语言
window.navigator.appVersion：返回浏览器的版本信息
window.navigator.product：返回浏览器引擎的产品名称

主体面板属性（document对象）

浏览器解析HTML文档，解析后变成document对象（JavaScript语言是基于对象的，类似Java中）
document对象是浏览器为JavaScript语言提供的一种操作HTML文档的对象（在内存中操作）
后面详细介绍（重点！！！）

四、DOM（文档对象模型）-----document对象

（1）document对象简介

万事万物皆对象，JavaScript可能用到浏览器地址栏信息，并且动态地改变；可能用到浏览器的历史记录信息，并且动态地改变；而浏览器的主体面板展示的是HTML文档的效果，为了动态改变浏览器主体面板的展示效果，需要动态改变内存中的HTML文档的信息（注意是在内存中，而非写代码的时候设定死），那么浏览器需要为JavaScript提供document对象，以供程序员操作浏览器中正在运行的HTML文档。（document对象封存了浏览器内存中正在运行的HTML文档的信息）

注意：

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
浏览器提供window对象代表整个浏览器，document对象是隶属于window对象的一个属性。
浏览器解析HTML源码，生成document对象（对象树），并向外提供，以供JavaScript使用。
document对象是浏览器对外提供的支持JavaScript的用来操作正在运行的HTML文档的一个对象，此对象封存了运行的HTML文档的所有信息。（document对象修改的是document对象的属性值，并非直接修改内存中运行的HTML文档）
拿到document对象，就可以实现对当前内存中HTML文档的操作。通过document对象操作的是浏览器内存中正在运行的HTML文档，而非源码中的HTML文档。
浏览器以树形结构（以对象中存对象的方式，实现树形结构）解析HTML文档。

HTML文档的树形结构：

在这里插入图片描述

工作原理：

第一步：外存中的HTML文档加载到内存，形成内存中运行的HTML文档
第二步：浏览器解析内存中加载进来的HTML文档，封装成了document对象，并向外提供该对象
第三步：JavaScript修改document对象中的属性值，随后写出到内存中正在运行的HTML文档里

（2）document对象操作

（2.1）获取HTML元素对象

document对象获取到的HTML元素都是对象（HTML文档是基于标签的，每个标签对应一个对象）

浏览器解析HTML源码，生成document对象（对象树），并向外提供，以供JavaScript使用。

直接获取：

//通过id获取
window.document.getElementById();


//通过name属性值获取
window.document.getElementsByName();


//通过标签名获取
window.document.getElementsByTagName();


//通过class属性值获取
window.document.getElementsByClassName();

注意：

Element的单复数形式！！！
getElementById()中使用单数，因为id属性值只能是唯一的一个
getElementsByName()，getElementsByTagName()，getElementsByClassName()中使用复数，因为多个标签可以使用相同的name属性值，class属性值，标签名

间接获取：

<div id="showdiv">
    <input type="" name="inp1" value="" id=""/>
    <input type="" name="inp2" value="" id=""/>
    <input type="" name="inp3" value="" id=""/>
    <input type="" name="inp4" value="" id=""/>
    <input type="" name="inp5" value="" id=""/>
    <input type="" name="inp6" value="" id=""/>
    <input type="" name="inp7" value="" id=""/>
    <input type="" name="inp8" value="" id=""/>
    <input type="" name="inp9" value="" id=""/>
</div>


//父子关系---先获取父标签对象，再根据父标签对象获取子标签对象
var showdiv_test=window.document.getElementById("showdiv");
var childs=showdiv_test.childNodes;

//子父关系---先获取子标签对象，再根据子标签对象获取父标签对象
var inp1_test=window.document.getElementById("inp1");
var parent=inp1_test.parentNode;

//兄弟关系---先获取一个兄标签对象，再根据兄标签对象获取弟标签对象（上面为兄，下面为弟）
var inp2_test=window.document.getElementById("inp2");
var pre=inp2_test.previousSibling;    //弟获取兄
var next=inp2_test.nextSibling;       //兄获取弟

（2.2）操作HTML元素对象的属性（HTML标签中的属性）

获取HTML元素对象的属性：（一般使用方式一）

方式一：元素对象名.属性名
方式二：元素对象名.getAttribute（"属性名"）

修改HTML元素对象的属性：（一般使用方式一）

方式一：元素对象名.属性名=新的属性值
方式二：元素对象名.setAttribute（"属性名","新的属性值"）

获取HTML元素对象的属性：

//方式一：元素对象名.属性名
//例子
<html>
    <head>
        <script>  
            //获取元素对象
            var test=window.document.getElementById("uname");

            //获取元素属性值
            alert(test.type);
            alert(test.name);
            alert(test.id);
            alert(test.value);
        </script>
    </head>
    
    <body>
        <input type="text" name="uname" id="uname" value="" />
        <input type="password" name="pwd" id="pwd" value="" />
        <input type="button" name="submit" id="submit" value="" />
    </body>
</html>


//方式二：元素对象名.getAttribute("属性名");
//例子
<html>
    <head>
        <script>  
            //获取元素对象
            var test=window.document.getElementById("uname");

            //获取元素属性值
            test.getAttribute("name");
        </script>
    </head>
    
    <body>
        <input type="text" name="uname" id="uname" value="" />
        <input type="password" name="pwd" id="pwd" value="" />
        <input type="button" name="submit" id="submit" value="" />
    </body>
</html>

修改HTML元素对象的属性：

//方式一：元素对象名.属性名=新的属性值
//例子
<html>
    <head>
        <script>  
            //获取元素对象
            var test=window.document.getElementById("uname");

            //修改元素属性值
            test.type="button";
            test.value="哈哈哈";
        </script>
    </head>
    
    <body>
        <input type="text" name="uname" id="uname" value="" />
        <input type="password" name="pwd" id="pwd" value="" />
        <input type="button" name="submit" id="submit" value="" />
    </body>
</html>


//方式二：元素对象名.setAttribute（"属性名","新的属性值"）
//例子
<html>
    <head>
        <script>  
            //获取元素对象
            var test=window.document.getElementById("uname");

            //修改元素属性值
            test.setAttribute("value","哈哈哈");
        </script>
    </head>
    
    <body>
        <input type="text" name="uname" id="uname" value="" />
        <input type="password" name="pwd" id="pwd" value="" />
        <input type="button" name="submit" id="submit" value="" />
    </body>
</html>

注意：

尽量不要修改元素的id值和name属性值（name属性值用于后端代码获取数据）

注意：

两种方式都可以获取对应属性的值，但是区别也很明显
方式一只能获取HTML内置标准属性的值，比如id或者name等，对于自定义属性返回值为undefined。
方式二既能获取HTML内置标准属性的值，又可以操作自定义属性内容,但是无法获取用户实时更改的值（比如输入框中用户输入的value属性的值），即该方式获取value的值是默认值，不能够获取到实时的数据。

<div id="box" class="classbox" myNewAttr="我的自定义属性">
    这是一段测试内容
</div>
<script>
    var getNewAttr = document.getElementById("box").getAttribute("myNewAttr");
    console.log(getNewAttr);//输出： 我的自定义属性
    var getNewAttr2 = document.getElementById("box").myNewAttr;
    console.log(getNewAttr2);//输出： undefined
</script>

（2.3）操作HTML元素对象的内容（HTML标签间的内容）

获取HTML元素对象的内容：

//书写格式：元素对象名.innerHTML-----返回当前元素对象的所有内容，包括HTML标签


//书写格式：元素对象名.innerText-----返回当前元素对象的文本内容，不包括HTML标签

修改HTML元素对象的内容：

//书写格式：元素对象名.innerHTML="新的值"-----会将原有内容覆盖，并且HTML标签会被解析
            元素对象名.innerHTML=元素对象名.innerHTML+"新的值"  //追加效果

//书写格式：元素对象名.innerText="新的值"-----会将原有内容覆盖，但HTML标签不会被解析，做作为普通文本显示

（2.4）操作HTML元素对象的样式

方式一：通过style属性

document对象操作HTML元素对象的样式，实际上是在操作HTML元素对象的style属性。

添加HTML元素的样式：元素对象名.style.样式名="样式值"
修改HTML元素的样式：元素对象名.style.样式名="新的样式值"
删除HTML元素的样式：元素对象名.style.样式名=""

<html>
	<head>
		<title>js操作元素的样式</title>
		<!--声明css-->
		<style type="text/css">
			#showdiv{
				width: 200px;
				height: 200px;
				border: solid 1px;
			}
		</style>
		
		<!--声明js代码域-->
		<script type="text/javascript">
			//js操作元素样式
				//js给元素操作样式---style
					function testOperCss(){
						//获取元素对象
							var showdiv=document.getElementById("showdiv");
						//添加元素样式
							showdiv.style.backgroundColor="#FFA500";
						//js修改元素样式
							showdiv.style.border="solid 2px red";
						//js删除样式
							showdiv.style.border="";
					}
		</script>

	</head>
	<body>
		<h3>js操作元素的样式</h3>
		<input type="button" name="" id="" value="测试操作元素样式--style" onclick="testOperCss()" />

		<hr />
		<div id="showdiv" style="border: solid 2px blue;">	
		</div>
	</body>
</html>

注意：

获取属性名时如果遇到连字符“ - ” 就去掉连字符，并将第二个单词变为大写,也就是驼峰命名方式获取。如style属性下的background-color变成backgroundColor

方式二：通过class属性（通过className调用）

document对象操作HTML元素对象的样式，可以操作class属性值（更改类选择器的css样式）

添加HTML元素的样式：元素对象名.className="样式值"
修改HTML元素的样式：元素对象名.className="新的样式值"
删除HTML元素的样式：元素对象名.className=""

<html>
	<head>
		<title>js操作元素的样式</title>
		<!--声明css-->
		<style type="text/css">

            //通过类选择器设置CSS样式
			.common{
				width: 200px;
				height: 200px;
				border: solid 1px;
			}

			//通过类选择器设置CSS样式
			.common2{
				width: 200px;
				height: 200px;
				border: solid 1px;
				background-color: aqua;
			}
		</style>
		
		<!--声明js代码域-->
		<script type="text/javascript">
		
				//js操作样式--className				
					function testOperCss2(){
						//获取元素对象
							var div01=document.getElementById("div01");
						//获取
							alert(div01.className);
						//添加或者修改
							div01.className="common2";
						//删除
							div01.className="";
												
					}	
		</script>
	</head>
	<body>
		<h3>js操作元素的样式</h3>
		<input type="button" name="" id="" value="测试操作元素样式--className" onclick="testOperCss2()" />
		<hr />

		<div id="div01" class="common">	</div>
	</body>
</html>

（2.5）操作HTML的文档结构（增加节点和删除节点）

第一种方式：从修改HTML元素对象的内容角度出发，使用innerHTML增加或删除父标签下的子标签

div.innerHTML=div.innerHTML+"内容"   //增加节点

div.innerHTML=""                     //删除节点

父节点.removeChild(子节点对象)        //删除指定子节点

注意：

使用innerHTML=" "这种方式只能删除当前节点的子节点
删除自身需要父节点删除子节点（即父对象删除子对象）

<html>
    <head>
        <script>  
	    function test(){
		var showdiv=window.document.getElementById("showdiv");
		showdiv.innerHTML=showdiv.innerHTML+"<div id='linediv'><input 

type='file' /><input type='button' value='删除' onclick='testDelete

(this)'></div>";
	    }

	    function testDelete(btn){
		//获取父级div
		var showdiv=window.document.getElementById("showdiv");
		//获取要删除的子div
		var cdiv=btn.parentNode;
		//父div删除子div
		showdiv.removeChild(cdiv);
	    }
        </script>
    </head>
    
    <body>
	<div id="showdiv">
	<input type="button" name="" id="" value="继续上传" onclick="test()"/>
	</br><hr>
	</div>
    </body>
</html>

第二种方式：从JavaScript对象的角度出发，首先创建好要添加的HTML元素对象，再添加到父对象中

//创建HTML元素对象
var obj=document.createElement("标签名");

//添加HTML元素对象（父节点添加子节点）
元素对象名.appendChild(obj);

//删除HTML元素对象（父节点 删除子节点）
元素对象名.removeChile(obj);

<html>
	<head>
		<!--声明js代码域-->
		<script type="text/javascript">
			function testOper2(){
				//获取元素对象
				var  showdiv=document.getElementById("showdiv");
				//创建input元素对象
				var inp=document.createElement("input");
				inp.type="file";
				//创建按钮元素对象
				var btn=document.createElement("input");
				btn.type="button";
				btn.value="删除";
				btn.onclick=function(){
					showdiv.removeChild(inp);
					showdiv.removeChild(btn);
					showdiv.removeChild(br);
				}
				//创建换行符
				var br=document.createElement("br");
				//将创建的元素对象存放到div中
				showdiv.appendChild(inp);
				showdiv.appendChild(btn);
				showdiv.appendChild(br);	
			}
		</script>
	</head>
	<body>
		<h3>js操作文档结构</h3>
		<input type="button" name="" id="" value="继续上传" onclick="testOper2()"/>
		<hr />
		<div id="showdiv">
			
		</div>
	</body>
</html>

（2.6）document对象操作form元素

//获取form表单对象
var fm=document.getElementById("表单标签的id属性值");


//获取form表单下的所有元素对象集合
表单对象名.elements


//form表单的常用方法
表单对象名.submit()    //提交表单数据------（可以用来做校验后再提交）
表单对象名.reset()     //重置表单数据


//form表单的属性操作
表单对象名.action="新的提交地址";     //动态的改变数据的提交路径
表单对象名.method="新的提交方式";     //动态的改变数据的提交方式


//JavaScript中表单元素的通过属性
只读模式：readonly="readonly";      //不可以更改，但是数据可以提交
关闭模式：disabled="disabled";      //不可以进行任何的操作，数据不会提交

JavaScript操作多选框和单选框

注意：被选中状态下，多选框和单选框的checked属性值为true；未选中状态下，多选框和单选框的checked属性值为false。

<html>
    <head>
        <script type="text/javascript">  
	    function test1(){
		var favs=window.document.getElementsByName("fav");
		for(var i=0;i<favs.length;i++){
			if(favs[i].checked){
				alert(favs[i].value);
			}
		  }
		}
	    
	    //全选
	    function test2(){
		var favs=window.document.getElementsByName("fav");
		for(var i=0;i<favs.length;i++){
			favs[i].checked=true;
		  }
		}

	    //反选
	    function test3(){
		var favs=window.document.getElementsByName("fav");
		for(var i=0;i<favs.length;i++){
			favs[i].checked=!favs[i].checked;
		  }
		}
		
        </script>
    </head>
    
    <body>
	<h1>歌曲播放</h1>
	<hr />
	<input type="checkbox" name="fav" id="fav" value="1"/>远走高飞</br>
	<input type="checkbox" name="fav" id="fav" value="2"/>当</br>
	<input type="checkbox" name="fav" id="fav" value="3"/>fade</br>
	<input type="checkbox" name="fav" id="fav" value="4"/>西部情歌</br>
	<input type="checkbox" name="fav" id="fav" value="5"/>天使的翅膀</br>
	<input type="checkbox" name="fav" id="fav" value="6"/>see you again</br>
	<input type="checkbox" name="fav" id="fav" value="7"/>歌唱祖国</br>
	<input type="button" name="" id="" value="播放" onclick="test1()"/>
	<input type="button" name="" id="" value="全选" onclick="test2()"/>
	<input type="button" name="" id="" value="反选" onclick="test3()"/>
    </body>
</html>

JavaScript操作下拉框

注意：被选择的option对象在JavaScript中selected属性值为true；未被选择的option对象，其属性值为false

<html>
    <head>
        <script type="text/javascript">  
	    //获取下拉框对象来获取选中的选项
	    function test(){
		var add=window.document.getElementById("address");
		//选中哪一个，下拉框的value值就是哪一个
		alert(add.value);
	    }

	    //获取option对象来获取选中的选项
	    function test1(){
		var add=window.document.getElementById("address");
		var os=add.options;
		for(var i=0;i<os.length;i++){
			if(os[i].selected){
				alert(os[i].innerHTML);
			}
		}
	    }
		
        </script>
    </head>
    
    <body>
	<h1>户籍所在地</h1>
	<hr />
	<select name="" id="address" onchange="test1()">
		<option value="0" >---请选择---</option>
		<option value="1" >北京</option>
		<option value="2" >上海</option>
		<option value="3" >广州</option>
		<option value="4" >杭州</option>
		<option value="5" >长沙</option>
	</select>
    </body>
</html>

（2.7）document对象操作表格

（2.8）document对象实现form表单校验

<html>
	<head>
		<title>js校验form表单</title>
		<meta charset="UTF-8"/>
		<!--声明css代码域-->
		<style type="text/css">
			/*设置背景图片*/
			body{
				background-image: url(img/b.jpg);
			}
			/*设置tr样式*/
			tr{
				height: 40px;
			}
			/*设置div样式*/
			#showdiv{
				border: solid 1px #FF0000;
				border-radius: 10px;
				width: 500px;
				margin: auto;
				margin-top: 40px;	
			}
			/*设置table*/
			table{
				margin: auto;
				color: white;	
			}
			span{
				font-size:13px;
			}
			#codeSpan{
				font-size:20px;
			}
		</style>
		<!--声明js代码域-->
		<script type="text/javascript">
			//常见验证码
				function createCode(){
					//创建随机四位数字
					var code=Math.floor(Math.random()*9000+1000);
					//获取元素对象
					var span=document.getElementById("codeSpan");
					//将数字存放到span中
					span.innerHTML=code;					
				}
			//验证用户名
				function checkUname(){
					//获取用户的用户名信息
						var uname=document.getElementById("uname").value;
					//创建校验规则
						var reg=/^[\u4e00-\u9fa5]{2,4}$/
					//获取span对象
						var span=document.getElementById("unameSpan");
					//开始校验
						if(uname=="" || uname==null){
							//输出校验结果
							span.innerHTML="用户名不能为空";
							span.style.color="red";
							return false;
						}else if(reg.test(uname)){
							//输出校验结果
							span.innerHTML="用户名ok";
							span.style.color="green";
							return true;
						}else{
							//输出校验结果
							span.innerHTML="用户名不符合规则";
							span.style.color="red";
							return false;
						}
					
				}
			//验证密码
				function checkPwd(){
					//获取用户的密码信息
						var pwd=document.getElementById("pwd").value;
					//创建校验规则
						var reg=/^[a-z]\w{5,7}$/;
					//获取span对象
						var span=document.getElementById("pwdSpan");
					//开始校验
						if(pwd=="" ||pwd==null){
							//输出校验结果
							span.innerHTML="*密码不能为空";
							span.style.color="red";
							return false;
						}else if(reg.test(pwd)){
							//输出校验结果
							span.innerHTML="*密码ok";
							span.style.color="green";
							return true;
						}else{
							//输出校验结果
							span.innerHTML="*密码格式不正确";
							span.style.color="red";
							return false;
						}
					checkPwd2();
				}
			//校验确认密码
				function checkPwd2(){
					//获取第一次密码
					var pwd=document.getElementById("pwd").value;
					//获取确认密码
					var pwd2=document.getElementById("pwd2").value;
					//获取span对象
					var span=document.getElementById("pwd2Span");
					//比较两次密码是否相同
					if(pwd2==""||pwd2==null){
						span.innerHTML="确认密码不能为空";
						span.style.color="red";
						return false;
					}else if(pwd==pwd2){
						span.innerHTML="确认密码ok";
						span.style.color="green";
						return true;
					}else{
						span.innerHTML="两次密码不一致";
						span.style.color="red";
						return false;
					}
				}
			//校验手机号
				function checkPhone(){
					return checkField("phone",/^1[3,4,5,7,8]\d{9}$/);
				}
			//校验邮箱
				function checkMail(){
					return checkField("mail",/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+$/ )
					
					
				}
			//校验籍贯
				function checkAddress(){
					//获取用户选择的数据
					var sel=document.getElementById("address").value;
					//获取span
					var span=document.getElementById("addressSpan");
					//校验
					if(sel!=0){
						span.innerHTML="籍贯选择成功";
						span.style.color="green";
						return true;
					}else{
						span.innerHTML="籍贯不能为请选择";
						span.style.color="red";
						return false;
					}
					
					
				}
			//校验爱好
				function checkFav(){
					//获取所有的爱好
					var favs=document.getElementsByName("fav");
					//获取span
					var span=document.getElementById("favSpan");
					//遍历
					for(var i=0;i<favs.length;i++){
						if(favs[i].checked){
							span.innerHTML="爱好选择成功";
							span.style.color="green";
							return true;
						}
					}
					
					span.innerHTML="爱好至少选则一项";
					span.style.color="red";
					return false;
					
				}
			//校验是否同意公司协议
				function checkAgree(){
					document.getElementById("sub").disabled=!document.getElementById("agree").checked;
				}
			//提交判断
				function checkSub(){
					checkUname();
					checkPwd();
					checkPwd2();
					checkPhone();
					checkMail();
					checkAddress();
					checkFav();
					return checkUname()&&checkPwd()&&checkPwd2()&&checkPhone()&&checkMail()&&checkAddress()&&checkFav();
				}
/*-------------------------------------------------------------------------------------------------*/
			//封装校验:相同的保留，不同的传参。
			function checkField(id,reg){
				//获取用户数据
					var inp=document.getElementById(id);
					var va=inp.value;
				 	var alt=inp.alt;
				//创建校验规则
				//获取span对象
					var span=document.getElementById(id+"Span")
				//开始校验
					if(va=="" ||va==null){
						//输出校验结果
						span.innerHTML=alt+"不能为空";
						span.style.color="red";
						return false;
					}else if(reg.test(va)){
						//输出校验结果
							span.innerHTML=alt+"ok";
							span.style.color="green";
							return true;
					}else{
						//输出校验结果
							span.innerHTML=alt+"不符合规则";
							span.style.color="red";
							return false;
					}
			}
		</script>
	</head>
	<body onload="createCode()">
		<div id="showdiv">
		<form action="#" method="get" onsubmit="return checkSub()">
			<table>
				<tr>
					<td width="80px">用户名:</td>
					<td width="200px">
						<input type="text" name="uname" id="uname" value="" onblur="checkUname()" alt="用户名"/><span id="unameSpan">*2-4位汉字</span>
					</td>
				</tr>
				<tr>
					<td>密码:</td>
					<td>
						<input type="password" name="pwd" id="pwd" value="" onblur="checkPwd()"/>
						<span id="pwdSpan"></span>
					</td>
				</tr>
				<tr>
					<td>确认密码:</td>
					<td>
						<input type="password" name="pwd2" id="pwd2" value="" onblur="checkPwd2()"/>
						<span id="pwd2Span"></span>
					</td>
				</tr>
				<tr>
					<td>手机号:</td>
					<td>
						<input type="text" name="phone" id="phone" value="" alt="手机号" onblur="checkPhone()"/>
						<span id="phoneSpan"></span>
					</td>
				</tr>
				<tr>
					<td>邮箱：</td>
					<td>
						<input type="text" name="mail" id="mail" value="" alt="邮箱" onblur="checkMail()"/>
						<span id="mailSpan"></span>
						
				</tr>
				<tr>
					<td>性别</td>
					<td>
						男 <input type="radio" name="sex" id="sex" value="0" checked="checked"/>
						女 <input type="radio" name="sex" id="sex" value="1" />
					</td>
				</tr>
				<tr>
					<td>籍贯:</td>
					<td>
						<select name="address" id="address" onchange="checkAddress()">
							<option value="0">--请选择--</option>
							<option value="1">北京</option>
							<option value="2">上海</option>
							<option value="3">广州</option>
						</select>
						<span id="addressSpan"></span>
					</td>
				</tr>
				<tr>
					<td>爱好:</td>
					<td>
						<input type="checkbox" name="fav" id="" value="1" onclick="checkFav()"/>LOL
						<input type="checkbox" name="fav" id="" value="2" onclick="checkFav()"/>睡觉
						<input type="checkbox" name="fav" id="" value="3" onclick="checkFav()"/>吃饭<br />
						<input type="checkbox" name="fav" id="" value="4" onclick="checkFav()"/>打豆豆
						<input type="checkbox" name="fav" id="" value="5" onclick="checkFav()"/>看电影
						<input type="checkbox" name="fav" id="" value="6" onclick="checkFav()" />听歌
						<span id="favSpan"></span>
					</td>
				</tr>
				<tr>
					<td>个人介绍:</td>
					<td>
						<textarea name="intro" rows="4" cols="40" id="intro"></textarea>
						
					</td>
				</tr>
				<tr>
					<td>验证码:</td>
					<td>
						<input type="text" name="code" id="code" value="" style="width: 100px;"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<span id="codeSpan" onclick="createCode()" style="background-image: url(img/code.jpg.gif);color: black;"></span>
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center"><input type="checkbox" name="" id="agree" value="" onclick="checkAgree()"/>是否同意本公司协议</td>
				</tr>
				<tr>
					<td colspan="2" align="center"><input type="submit" name="" id="sub" value="立即注册" disabled="disabled"/></td>
				</tr>
			</table>
		</form>
		</div>
	</body>
</html>