JavaScript(JS)学习记录

1.简介

JavaScript最初命名为LiveScript，后改名为JavaScript。JavaScript是一种面向对象能力的、解释型的程序设计语言。它是基于对象和事件驱动并具有安全性的客户端脚本语言。它的主要目的是验证发往服务器端的数据、增加Web互动、加强用户体验度等。

1.1JavaScript的组成

ECMAScript（基础语法）：定义该语言的基础，与Web浏览器没有依赖关系，在基础语法上可以构建更完善的脚本语言。
DOM（文档对象模型）：We浏览器自定义的DOM组件，以面向对象方式描述的文档模型。定义了表示和修改文档所需的对象，这些对象的行为和属性以及这些对象之间的关系。
BOM（浏览器对象模型）：控制浏览器的行为和操作。

1.2主要功能

 1. 嵌入动态文本于HTML页面。
 2. 对浏览器事件做出响应。
 3. 读写HTML元素。
 4. 在数据被提交到服务器之前验证数据。
 5. 检测访客的浏览器信息。 控制cookies，包括创建和修改等。
 6. 基于Node.js技术进行服务器端编程。

2.基本用法

JS需要和HTML一起使用才有效果，我们可以通过直接或间接的方式将JS代码嵌入在HTML页面中。

• 行内JS：写在标签内部的js代码
• 内部JS：定义在script标签内部的js代码
• 外部JS：单独的js文件，在HTML中通过script标签引入

    <!--行内js-->
    <button type="button" onclick="alert('hello')">提交</button>
    <!--内部js-->
    <script type="text/javascript">
        alert("你好");
    </script>
    <!--外部js-->
    <!--<script type="text/javascript" src="test.js" charset="utf-8"></script>-->

3.基础语法(ECMAScript)

3.1语句和注释

JavaScript程序执行单位为行，一般情况，每一行就是一个语句。
语句是为了完成某种任务而进行的操作，语句以分号结尾。
注释：

• 单行注释：//注释内容
• 多行注释：/注释内容/
• 兼容HTML注释方式：

//单行注释
/*多行注释·*/
<!--兼容HTML注释方式-->

3.2标识符和关键字

标识符即一个名字，用来给变量和函数进行命名，有特定规则和规范：

• 规则：

由Unicode字母、_、$、数字、中文组成
（1）不能以数字开头
（2）不能是关键字和保留字
（3）严格区分大小写

• 规范：

（1）见名知意
（2）驼峰命名或下划线规则
关键字也称保留字，是被JS用来表示特俗含义的单词。

3.3变量

变量即一个带名字的用来存储数据的内存空间，数据可以存储到变量中，也可以从变量中取数据。

    <!--变量，定义时可不区分数据类型-->
    <script type="text/javascript">
        var a;//只声明不赋值，变量会返回undfined
        a=10;
        var b=20;
        var c=b;
        var d,e,f=30;
        var str="hello var";
        console.log(a,b,c);//输出到控制台
    </script>

JS是一种弱类型语言，在声明变量时不需要指明数据类型，直接用var修饰符进行声明。

注意：

• 若变量只声明不赋值，变量值为undfined
• 变量不定义就使用，会报错，告知变量未定义
• 同一条var命令中可以声明多个变量
• 使用var重新声明一个已存在的变量是无效的
• 使用var重新声明一个已存在的变量并赋值，则会覆盖掉原先的值

3.3.1变量提升

JS引擎工作时会先解析代码，获取所有var声明的变量，然后再逐行运行。如此，所有使用var声明变量的语句，都会被提升到代码头部，这就叫做变量提升。（注：变量提升只对var命令声明的变量有效）

3.4数据类型

JS中有6种数据类型。
其中五种简单数据类型：Undefined、Null、布尔、数值和字符串。

数值（Number）：整数和小数
字符串（String）：字符组成的文本
布尔值（Boolean）：true和false
Undefined：未定义或不存在，即此处目前没有任何值
Null：空缺，即此处应有一个值，但目前为空

一种复杂数据类型：Object。

对象（Object）（引用）：各种值组成的集合
（1）对象（Object）{name:“zhangsan”,age:“18”}
（2）数组（array）[1,2,3]
（3）函数（function）function test(){}

<!--数据类型，typeof var测试数据类型-->
    <script type="text/javascript">
        //null：表示null值,undfined派生自null
        //String：''和""内容
        //Boolean：true和false
        //Number：整型和浮点型
       //Undfined；
        var str;//1.只声明未赋值;
        function test(str){
            console.log(str);
        }
        test();//2.调用方法时，函数有形参但未传递实参
        //3.函数没有返回值，默认返回Undefined 
    </script>

注意：

• 数值型：所有数值都是以64位浮点类型存储的，1与1.0相等；浮点类型最高精度为17位；存储数字时会自动将整型的浮点数值(1.0)转换位整型(1)

3.5类型转换

<!--类型转换-->
<script type="text/javascript">
    //自动类型转换
    //函数转换String to Number:parseInt(str)或parseFloat(str)
    //显式转换：num.toString()和num.toFixed
    //构造方法：Number(num),Boolean(b),String(str)
</script>

3.5.1自动类型转换

-----值--------- 字符串 ------- 数字 —布尔值----
undefined----“undifined”----NaN-----false
null-------------“null”-----------0---------false
true-------------“true”----------1---------true
false------------“false”---------0---------false
“”----------------“”----------------0---------false
“1.5”------------“1.5”-----------1.5-------true
“one”-----------“one”-----------NaN-----true
0----------------“0”---------------0---------false
-0---------------“0”---------------0---------false
NaN-----------“NaN”-----------NaN-----false
Infinity--------“Infinity”---------Infinity—true
-Infinity-------“-Infinity”--------Infinity—true
1---------------“1”----------------1----------true

3.5.2函数转换（String to Number）

只有对String类型调用这些方法，这两个函数才能正确运行。

• parseInt(str)：把值转换成整数
• parseFloat(str)：把值转换成浮点型

在转换之前，首先会分析该字符串，判断位置为0处的字符是否为一个有效数字，如果不是则直接返回NaN,不再继续，如果是则继续，直到找到非数字字符。

3.5.3显式转换

几乎每个数对象都提供了toString()函数将内容转换成字符串形式。（注：对于null和undefined类型转换会引发错误）
Number还提供了toFixed()函数将根据小数点后指定位数将数字转为字符串，四舍五入。
JS为Number、Boolean、String对象提供了构造方法，用于强转其他类型的数据。此时操作的是整个数据，而不是部分。

构造方法：Number(num)、Boolean(b)、String(str)。
（注：String(null)不会引发错误）

最简单的一种转换为字符串的方法，直接在任意数据后面+""即可。

3.6运算符

运算符用于执行程序代码的运算，会针对一个及以上操作数来进行运算

<!--运算符-->
<script type="text/javascript">
    //算术运算符
    //赋值和扩展运算符
    //比较运算符：注意 ==(值相等，类型可不等)和===(值和类型都要相等)
    //逻辑运算符
    //三目运算符 ?:
</script>

3.6.1算术运算符

• 加 +
• 减 -
• 乘 *
• 除 /
• 取余 %
• 自增 ++
• 自减 - -

3.6.2赋值和扩展运算符

• =
• +=
• -=
• *=
• /=
• %=

3.6.3比较运算符

3.6.4逻辑运算符

• &&
• ||
• !

3.6.5三目运算符

• ? :

3.7控制语句

<!--控制语句-->
<script type="text/javascript">
    //if-else
    //switch-case(采用的是===)
</script>

流程控制语句一共有三种：

1. 流程执行：从上到下，从左到右
2. 选择执行：分支选择
3. 循环执行：重复执行

3.7.1选择

3.7.1.1 if-else

if-else在比较运行结果时采用的是全等运算符(===)，意味着比较时不会发生类型转换。

3.7.1.2 switch结构

switch-case在比较运行结果时采用的是相等运算符(==)。

switch(表达式){
	case 值1:
		语句体1;
		break;
	case 值2:
		语句体2;
		break;
	...
	default:
		语句体n+1;
		[break;]
}

3.7.2循环

<!--循环-->
<script type="text/javascript">
    //while
    //do-while
    //for(){}
</script>

3.7.2.1 while

先判断后执行

初始化语句;
while(判断条件语句){
	循环体语句;
	控制条件语句;
}

3.7.2.2 do…while

先执行一次再判断

初始化语句;
do{
	循环体语句;
	控制条件语句;
}while(判断条件语句);

3.7.2.3 for

for(初始化语句;判断条件语句;控制条件语句){
	循环体语句;
}

3.7.2.4死循环

条件永远成立则会产生死循环，如下：

while(true){}
for(;;){}

3.7.2.5 break与continue

• break：停止本层循环
• continue：暂停本次循环，继续下一次

3.8数组

数组是按次序排列的一组数据，每个值的位置都有编号（从0开始），整个数组用方括号表示。

<!--数组,长度可以任意修改-->
<script type="text/javascript">
    /*创建数组*/
    //var arr1=[值1，值2，值3];隐式创建
    //var arr2=new Array(值1，值2，值3);直接实例化
    //var arr3=new Array(size);创建并指定长度
    var arr=[1,"2",3,true];
    arr.length();
    arr.length=5;
    arr[10];//可以越界访问

    /*遍历*/
    for(var i=0;i<arr.length;i++){}//for
    for(var index in arr){}//for-in
    arr.forEach(function(element,index){})//foEach
</script>

3.8.1数组定义

（可以先声明再赋值）

    var arr1=[值1，值2，值3];隐式创建
    var arr2=new Array(值1，值2，值3);直接实例化
    var arr3=new Array(size);创建并指定长度

3.8.2基本操作

数组长度可以提供length属性来获取和修改。
数组中每一个元素都可以被访问和修改，甚至是不存在的元素，无所谓越界。

    var arr=[1,"2",3,true];
    arr.length();//获取数组长度
    arr.length=5;//修改数组长度
    arr[4]=5;
    arr[0]=0;
    arr[10];//可以越界访问

3.8.3数组遍历

• 普通for循环遍历

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

• for…in…

    for(var index in arr){}

• forEach

    arr.forEach(function(element,index){})
    // element表示当前元素，index表示索引

3.8.4数组的一些操作方法

• push 添加元素到最后
• unshift 添加元素到最前
• pop 删除最后一项
• shift 删除第一项
• reverse 翻转数组
• join 数组转成字符串
• indexof 数组元素索引
• slice 截取（切片）数组，原数组不发生改变
• splice 剪切数组，原数组变化，可以实现前后删除的效果
• concat 数组合并

var arr=['1','a',5,'3'];
arr.push(10);				//['1','a',5,'3',10]
arr.unshift('b');			//['b','1','a',5,'3',10]
arr.pop();					//['b','1','a',5,'3']
arr.shift();				//['1','a',5,'3']
var arr2=arr.reverse();		//arr2=['3',5,'a','1']
var str=arr.join('-');		//str=1-a-5-3
var idx=arr.indexOf('a');	//idx=1
var arr3=arr.slice(2,3);	//arr3=['5']
var arr4=arr.splice(1,2,'aa','bb');//从第一个开始截取2个元素，并插入'aa'和'bb',arr=['1','aa','bb','3'],arr4=['a',5]
var arr5=[4,5];
var arr6=arr.concat(arr5);	//arr6=['1','aa','bb','3',4,5]

3.9函数

函数即方法，是一段预先设置的功能代码块，可反复调用。
函数也是对象。

3.9.1函数的定义

• 函数声明语句：会具有函数名提升的效果。
• 函数定义表达式：以表达式方式定义函数，将一个匿名函数赋值给变量，该匿名函数又称函数表达式。
• Function构造函数：Function接收任意数量的参数，但最后一个参数始终都被看做是函数体，而前面的参数则列举出了新函数的参数。

JS中没有重载，如果出现同名函数会覆盖。

<!--函数-->
<script type="text/javascript">
    //函数声明语句
    function fun1([参数列表]){};
    fun1();
    function fun2(a){};
    fun2(1);
    //函数定义表达式
    var fun3=function([参数列表]){};
    fun3();
    var fun4=function(a){}
    fun4(1);
    //function构造函数
    var fun5=new Function('a','b','return(a+b)');
    var test5=fun5(2,3);
</script>

3.9.2函数的参数、调用和return语句

3.9.2.1参数

函数运行时，有时需要提供外部数据，不同外部数据会得到不同的结果，这种外部数据就是参数，定义时的参数称为形参，调用时的参数称为实参。

• 实参可以省略，那么对应的形参为undefined
• 若函数形参同名，在使用时以最后一个值为准，即后者覆盖前者
• 可以给参数默认值
• 参数为值传递，传递副本；引用传递时传递地址

3.9.2.2函数的调用

• 常用调用方式：函数名([参数列表]);

function fun(){
	console.log("hello");
}
fun();

• 函数调用模式：

function add(a,b){
   return a+b;
}
var sum=add(10,20);

• 对象调用模式：

var ob={
	name:"zs",
	age:18，
	test:function(){
		console.log("对象调用...");
	}
}
ob.test();

3.9.2.3函数的返回return

• 如果函数有返回值，则通过return返回
• 如果函数不需要返回数据，则无返回值，或者说返回undefined
• 如果函数不需要返回值时，使用return表示方法结束

3.9.3函数的作用域

全局（global variablle）和局部（local variable）
1.全局变量与局部变量同名问题

• 就近原则。函数内部定义了与全局变量同名的局部变量，函数会使用局部变量

2.在函数中定义变量时，若没有加var关键字，使用之后自动变为全局变量

3.10内置对象

• Arguments 只在函数内部定义，保存了函数的实参
• Array 数组对象
• Date 日期对象，用来创建和获取日期
• Math 数学对象
• String 字符串对象，提供对字符串的一系列操作

<!--内置对象-->
<script type="text/javascript">
  var date=new Date();
  /*Date:
 

        setYear()
        setMonth()
        setDate()
        setHours()
        setMinutes()
        setSeconds()
        toLocaleString()
  */
</script>

3.10.1 String

    var str="abcdefg";
    str.charAt(index);	返回指定位置处的字符
    str.indexOf(chr);	返回指定子字符串的位置，从左到右，找不到返回-1
    str.substr(m,n);	返回给定字符串从m位置开始，取n个字符，如果n省略，则取到字符串末尾
    str.subString(m,n);	返回给定字符串从m位置开始，取n个字符，如果n省略，则取到字符串末尾
    str.toLowerCase();	将字符串中的字符全部转化为小写
    str.toUpperCase();	将字符串中的字符全部转化为大写
    str.length;			（属性，非方法）返回字符串长度

3.10.2 Math

    var num=2.1;
    Math.random();		随机数
    Math.ceil(num);  	向上取整
    Math.floor(num);    向下取整

3.10.3 Date

获取：

        var myDate=new Date();
        var year=myDate.getFullYear()	年
        var month=myDate.getMonth()		月（0~11）
        var date=myDate.getDate()		日
        var hours=myDate.getHours()		小时
        var minutes=myDate.getMinutes()	分钟
        var seconds=myDate.getSeconds()	秒

设置：

        setYear()
        setMonth()
        setDate()	
        setHours()
        setMinutes()
        setSeconds()
        toLocaleString()	转换成本地时间字符串

3.11 对象

所谓对象，就是一种无序的数据集合，由若干个”键值对“（key-value）构成。JS对象满足这种”键值对“的格式称为JSON格式。（键是字符串，值可以是对象、数组、数字、字符串、函数、Boolean）。
对象是带有属性和方法的特殊数据类型。
JS的所有数据都可以被视为对象。

3.11.1对象的创建

三种方式：

• 字面量形式创建对象
  var 对象名={};//空对象
  var 对象名={
  键:值，
  键:值，
  …
  }

    var obj1={};//创建一个空对象
    obj1.name="admin";//赋值，键存在则修改数据，不存在则添加数据
    var obj2={ke1:"value1",ke2:"value2",key3:"value3"}
    var obj={
    	'name':'hello',
    	age:12,
    	sayHello:function(){
    		console.log("hello");
    	},
    	courses:{
    		javase:4,
    		javascript:3
    	},
    	isLike:true,
    	members:[
    		{name:"aaa",age:19},
    		{name:"bbb",age:21},
    		{name:"ccc"}
    	]
    };

• 通过new Object对象创建

    var obj3=new Object();
    obj3.name="zs";
    obj3.age=18;

• 通过Object对象的create方法创建对象

    var obj4=Object.create(null);//创建空对象
    var obj5=Object.create(obj3);//以参考对象为模板创建新对象
    var obj6=object.create(obj2.ke1);

3.11.2 对象的序列化与反序列化

序列化即将JS对象序列化为字符串，反序列化即将字符串反序列化为JS对象。可以通过调用JSON方法实现。

	//序列化：对象-->字符串
    var str=JSON.stringify(obj);
    //反序列化：字符串-->对象
    var obj=JSON.parse(str);

3.11.3 this

this代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。
this总是指调用函数的那个对象。

3.11.3.1 在函数中使用this

在函数中使用this属于全局性调用，代表全局对象，通过Window对象来访问。

function test(){
	this.x=1;
	console.log(this.x);//1
}
test();//调用者是window对象
console.log(x);//1 相当于定义在全局对象上的属性

3.11.3.2 在对象中使用this

在对象中的函数使用this，代表当前的上级对象。

var o={
	name:'zs',
	age:20,
	sayHello:function(){
		console.log(this.name);//this.name即o.name
	}
}
o.sayHello();//调用者是o

4.JS事件

当我们与浏览器中Web页面进行某些类型的交互时，事件就发生了。比如用户在某些内容上的点击、鼠标经过某个特定元素、某个Web页面加载完成或者用户滚动窗口或改变窗口大小。
通过使用JavaScript可以监听特定事件的发生，并规定让某些事件发生以对这些事件做出响应。

4.1作用

（1）验证用户输入的数据
（2）增加页面的动态效果
（3）增强用户的体验度

4.2 事件中的几个名词

事件源：谁触发
事件名：出发了什么事件
事件监听：谁在监听
事件处理：触发了事件怎么处理

4.3 事件类型

• Mouse事件：由鼠标或类似用户动作触发的事件
• Keyboard事件：键盘事件
• HTML事件
  Window事件：针对window对象触发的事件（应用到标签）
  Form事件：由HTML表单内的动作触发的事件（应用到几乎所有HTML元素，但常用在from元素中）
  Media事件：由媒介（如视频、图像和音频）触发的事件（适用于所有HTML元素，但常见于媒介元素，比如audio、embed、img、object、video）

一些常用事件：

onload 页面或图像加载完成后立即触发
onblur 元素失去焦点
onfocus 元素获得焦点
onclick 鼠标点击某个对象
onchange 用户改变域内容
onmouseover 鼠标移动到某个元素上
onmouseout 鼠标从某个元素上移开
onkeyup 某个键盘键被松开
onkeydown 某个键盘键被按下

4.4 事件流和事件模型

将事件源看作是HTML的某个元素，当一个HTML元素产生一个事件时，该事件会在元素节点与根节点之间按特定的顺序传播，路径所经过的节点都会接受到该事件，这个传播过程称为DOM事件流。（事件流指页面接受事件的顺序）
事件顺序有两种：事件捕获和事件冒泡。

4.4.1 事件冒泡

IE的事件流就是事件冒泡，即事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点，直到传播到document对象。（由小到大）
所有现代浏览器都支持事件冒泡。

4.4.2 事件捕获

Netscape提出另一种事件流叫事件捕获，其思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。其用意在于在事件到达预定目标之前捕获它。（由大到小）

4.4.3 DOM事件流

”DOM2级事件“规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。
首先发生的是事件捕获阶段，为截获事件提供了机会；
然后是实际的目标接收到事件；
最后是冒泡阶段，可以在这个阶段对事件做出响应。

4.5 事件处理程序

响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序名字以on开头。
为事件指定处理程序的方式：

html事件处理程序
DOM 0级事件
DOM 2级事件

4.5.1 HTML事件处理程序

某个元素支持的每种事件，都可以用一个与相应事件处理程序同名的HTML特性来指定。这个特性的值应该是能够执行的JS代码：

<input type="button" value="Press me" onclick="alert('thanks');"/>
<button type="button" onmouseout="test()">按钮</button>
<script type="text/javascript">
	function test(){
		console.log("mouse out test...");
	}
</script>

这样做有一些缺点，例如耦合度过高，还可能存在时差问题，而且在不同浏览器上可能会有不同的效果。

4.5.2 DOM0级事件处理程序

将一个函数赋值给一个事件处理程序属性。这种方式被所有现代浏览器支持。这种方式首先必须取得一个要操作的对象的引用，每个元素都有自己的事件处理程序属性，这些属性通常全部小写。例如

<body>
	<button id="myBtn">按钮</button>
	<script type="text/javascript">
		var btn=document.getElementById('myBtn');
		btn.onclick=function(){
			console.log('you click a button');
		}
	</script>
</body>

这种事件处理程序会在事件流冒泡阶段被处理。并且只能为同一元素的同一事件设定一个处理程序（覆盖），也可以通过删除DOM0级方法指定的事件处理程序，将属性值设为null即可:

btn.onclick=null;

4.5.3 DOM2级事件处理程序

"DOM2级事件"定义了两个方法，用于指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。
所有DOM节点都包含这两个方法，并且它们都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。布尔值为true则在捕获阶段调用事件处理程序；如果为false则在冒泡阶段调用事件处理程序。

<body>
	<button id="myBtn">按钮</button>
	<script type="text/javascript">
		var btn=document.getElementById('myBtn');
		btn.addEventListener('click',function(){
			alert('you add a eventListener by DOM2');
		},false);
		btn.addEventListener('click',fn);
		function fn(){
			console.log("...");
		}
		btn.removeEventListener('click',fn,true);
	</script>
</body>

为同一元素的同一事件设定多个处理程序。
删除事件处理函数时，不能删除匿名处理函数。

5.BOM对象

BOM的核心对象是window，它表示浏览器的一个实例。
如果页面中包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中。在frames集合中可以通过数值索引（从0开始，从左至右，从上到下）或者框架的名称来访问相应的window对象。

5.1 Window对象方法

5.1.1 系统对话框

浏览器通过alert()、confirm()、prompt()方法调用系统对话框向用户显示消息

alert()     消息框。显示带有一条指定消息和一个ok按钮的警告框
prompt()    输入框，返回提示框中的值，用于显示可提示用户进行输入的对话框。
			参数（可选）：
				第一个参数：要在对话框中显示的纯文本
				第二个参数：默认的输入文本
confirm()   确认框，返回true/false，用于显示一个带有指定消息和ok及取消按钮的对话框

<body>
    <button type="button" onclick="testAlert()">消息框</button>
    <button type="button" onclick="testPrompt()">输入框</button>
    <button type="button" onclick="testConfirm()">确认框</button>
    <script type="text/javascript">
        function testAlert(){
            alert("alert!");
            alert("hello");
        }
        function testPrompt(){
            var uname=prompt("请输入用户名：","userName");
        }
        function testConfirm(){
            var flag=confirm("你确认要输入该记录吗？")
            if(flag){
                alert("输入成功!");
            }else{
                alert("已取消输入！");
            }
        }
     </script>
</body>

5.1.2 打开和关闭窗口

window.open()       打开空白窗口
window.open('url')  打开指定窗口
window.close()      关闭窗口

5.1.3 时间函数

var id=setTimeout(function,times)//指定毫秒后调用函数或计算表达式，返回一个唯一标识
clearTimeout(id)//清除函数的执行
var id=setInteval(function,times)//按时间间隔times毫秒执行函数，直到清除
clearInteval(id)

5.2 history对象

history对象是历史对象。包含用户（在浏览器窗口）访问过的URL。
history对象是window对象的一部分。可通过window.history属性对其进行访问。

• length 属性，返回浏览器历史列表中的URL数量
• back() 方法，加载历史列表中的前一个URL
• forward() 方法，加载历史列表中的下一个URL
• go(num|URL) 方法，URL表示要访问的URL。num表示要访问的URL在历史列表中的相对位置，go(-1)返回上一个页面。

5.3 location对象

location对象是window对象的一部分，提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。可通过window.location属性对其进行访问。

• href 设置或返回完整的URL
• reload() 重新加载当前文档
• replace() 新文档替换当前文档

6.DOM对象

DOM对象：Document Object Model文档对象模型。
DOM提供了用程序动态控制HTML接口。
每个载入浏览器的HTML文档都会成为Document对象。Document对象是Window对象的一部分，可通过window.document属性对其进行访问。

6.1 节点

加载HTML页面时，Web浏览器生成一个树型结构，用来表示页面内部结构。这种树型结构理解为由节点组成，组成一个节点树。
这些节点有以下几种类型：

 文档节点：文档本身
 元素节点：所有HTML元素,<html><div>等
 属性节点：HTML元素内的属性，id、href等
 文本节点：元素内的文本
 注释节点：HTML中的注释

6.2 操作元素的节点

6.2.1 获取节点

注意：操作dom必须等节点初始化完毕后才能执行。
处理方式：

（1）把script调用标签移到html末尾；
（2）使用onload事件处理JS，等待html加载完毕再加载onload事件里的JS

window.onload=function(){//预加载html后执行};

获取方法：

    document.getElementById("id")             //id="id" ,根据id获取dom对象，取一个值，以第一个为准
    document.getElementsByName("name")        //name="name"根据name属性获取dom对象数组，取一组值，常用于多选获取值
    document.getElementsByTagName("标签名")                  //根据标签名获取dom对象数组，取一组值 
    document.getElementsByClassName("class")  //clas="class" ，根据样式名获取dom对象数组，取一组值

6.2.2 创建节点和插入节点

6.2.2.1 创建节点

 document.createElement()    //创建元素节点，需要传入节点的标签名称，返回创建的元素对象   
 document.createTextNode()   //创建文本节点，可传入文本内容
 innerHTML   //直接添加到指定位置

6.2.2.2 插入节点

 write()     //将任意字符串插入到文档，直接插入内容
 appendChild()   //向元素中添加新的子节点，作为最后一个子节点
 insertBefore()  //在同级已有节点前插入，需要参考父节点
 				document.getElementById("id").parentElement.insertBefore(newElement,document.getElementByID("id"));在id=“id”的元素前面插入newElement

<body>
<!--href="javascript:void(0)"伪协议，表示不执行跳转，而执行指定的事件-->
	<a href="javascript:void(0)" onclick="testById()">按照Id获取</a>
	
    <button onclick="addPara()">添加段落</button>
    <button onclick="addImg()">添加图片</button>
    <button onclick="addTxt()">添加文本框</button>
    <button onclick="addOptions()">添加选项</button>
    <select name="music">
        <option value="-1">-1</option>
        <option value="0">0</option>
        <option value="1">1</option>
    </select>
    <hr/>
    <div id="container">

    </div>
    <script type="text/javascript">
        function addPara(){
            var _div=document.getElementById("container");
            /*方式1
            var p=document.createElement("p");
            var txt=document.createTextNode("这是一段文本")
            p.appendChild(txt);
            _div.appendChild(p);*/
            /*方式2
            var p=document.createElement("p");
            p.innerHTML="这是一段文本";
            _div.appendChild(p);*/

             /*方式3*/
            var p="<p>这是一段文本</p>";
            _div.innerHTML +=p;
        }
        function addImg(){
            var _div=document.getElementById("container");
            /*方式1
            var img=document.createElement("img");
            img.src="C:\Users\17208\Pictures\Saved Pictures\R-C.jfif";
            img.height=100;
            img.width=200;
            _div.appendChild(img);*/
            
            /*方式2
            var img=document.createElement("img");
            img.setAttribute("src","C:\Users\17208\Pictures\Saved Pictures\R-C.jfif");
            img.setAttribute("height",100);
            img.setAttribute("width",200);
            _div.appendChild(img);*/

             /*方式3*/
            var img="<img src='C:\Users\17208\Pictures\Saved Pictures\R-C.jfif' height=100 width=200/>"
            _div.innerHTML +=img;
        }
        function addTxt(){
            var _div=document.getElementById("container");
            /*方式1
            var inp=document.createElement("input");
            inp.type="text";
            inp.value="value"; 
            p.appendChild(inp);
            _div.appendChild(p);*/
            /*方式2
            var inp=document.createElement("input");
            inp.setAttribute("type","text");
            inp.setAttribute("value","value");
            _div.appendChild(p);*/

             /*方式3*/
            var inp="<input type='text value='value'/>";
            _div.innerHTML +=inp;
        }
        function addOptions(){
            var sec=document.getElementsByName("music")[0];
            /*方法1
            var op=document.createElement("option");
            op.value="2";
            op.text="2";
            sec.appendChild(op);*/
            /*方法2
            var op=document.createElement("option");
            op.setAttribute("value","2");
            op.setAttribute("text","2");
            sec.appendChild(op);
            //sec.addOptions(op);*/
            /*方法3*/
            var op="<option value='2'>2</option>";
            sec.innerHTML +=op;
        }
     </script>
</body>

6.2.3 间接查找节点

childNodes	返回元素的一个子节点的数组
firstChild	返回元素的第一个子节点
lastChild	返回元素的最后一个子节点
nextSibling	返回元素的下一个兄弟节点
parentNode	返回元素的父节点
previousSibling	返回元素的上一个兄弟节点

6.2.4 删除节点

 removeChild	//从元素中移除子节点
 var programmer=document.getElementById("id");
 programmer.parentNode.removeChild(programmer);

7.表单

表单是页面向后台传输数据的一种非常常见的方式，在进行数据发送（请求发出）之前，我们应该进行一系列数据合法性验证，节省不必要的错误数据的传输，以提高用户体验度。

7.1 获取表单

1.document.表单名称
2.document.getElementById(表单id)
3.document.froms[表单名称]
4.document.[索引]	//从0开始

<body>
    <form id="myform" name="myform" action="" method="post"></form>
    <form id="myform2" name="myform2" action="" method="post"></form>
</body>
<script type="text/javascript">
   var form=document.getElementById("myform");
   form=document.form;
   form=document.forms['myform'];
   form=document.forms[0];
</script>

7.2 获取表单元素

7.2.1 获取input元素

如text、password、hidden、textarea等。

通过id获取：document.getElementById(元素id)
通过form.名称形式获取：myform.元素名称；	name属性值
通过name获取：document.getElementsByName(name属性值)[索引] //从0开始
通过tagName数组：document.getElementsByTagName('input')[索引]//从0开始

<body>
<form id="myform" name="myform" action="" method="post">
        姓名：<input type="text" id="uname" name="uname" value="zs"/><br/>
        密码：<input type="password" id="upwd" name="upwd" value="1234"/><br/>
        <input type="hidden" id="uno" name="uno" value="隐藏域"/>
        个人说明：<textarea name="intro"></textarea>
        <button type="button" onclick="getTxt();">获取元素内容</button>
    </form>
</body>
<script type="text/javascript">
   function getTxt(){
       var uno=document.getElementById("uno");
       var myform=document.getElementById("myfrom");
       var uname=myform.uname;
       var upwd=document.getElementsByTagName('input')[1];
       var intro=document.getElementsByName("intro")[0];
   }
</script>

7.2.2 获取单选按钮（radio）

前提：将一组单选按钮设置相同的name属性值

（1）获取单选按钮

document.getElementsByName(“name属性值”);

（2）遍历每个单选按钮，并查看元素的checked属性（为true表示被选中）
选中设定：checked='checked’或checked='true’或checked
未选中设定：没有checked属性或checked=‘false’

<body>
    <form action="" name="radiofrom">
        <input type="text" name="inputName" value="aaa"/>
        <input type="radio" name="rad" value="1"/>1
        <input type="radio" name="rad" value="2"/>2
    </form>
</body>
<script type="text/javascript">
	var radios=document.getElementsByName('rad');
   for(var i=0;i<radios.length;i++){
       if(radios[i].checked){
           //
       }
   }
</script>

7.2.3 获取多选按钮（checkbox）

操作方式与单选同理。

<body>
   <form action="" name="checkboxfrom">
        <input type="checkbox" name="cbx" value="1"/>1
        <input type="checkbox" name="cbx" value="2"/>2
        <input type="checkbox" name="cbx" value="3"/>3
        <input type="checkbox" name="cbx" value="4"/>4
        <button type="button" onclick="getCheckbox();">获取内容</button>
    </form>
</body>
<script type="text/javascript">
	function getCheckbox(){
       var cbxs=document.getElementsByName("cbx");
       for(var i=0;i<cbxs.length;i++){
           if(cbxs[i].checked){
               //cbxs[i].value
           }
       }
   }
</script>

7.2.4 获取下拉选项（select-option）

（1）获取select对象

var ufrom=document.getElectmentById("ufrom");

（2）获取选项中项的索引

var idx=ufrom.selectedIndex;

（3）选取选中项options的value属性值

var val=ufrom.options[idx].value;

注意：当通过options获取选中项value属性值时，
若没有value属性，则取option标签的内容
若存在val属性，则取value属性的值
（4）获取选中项options的text

var txt=ufrom.options[idx].text;

选中设定：selected=‘selected’、selected=true、selected
未选中状态设定：不设定selected属性值

<body>
   <form action="" name="selectfrom">
        来自：
        <select id="ufrom" name="ufrom">
            <option value="-1">请选择</option>
            <option value="0" selected="selected">北京</option>
            <option value="1">上海</option>
        </select>
        <button type="button" onclick="getSelect();">获取内容</button>
    </form>
</body>
<script type="text/javascript">
	function getSelect(){
       var ufrom=document.getElementById("ufrom");
       var idx=ufrom.selectedIndex;
       var val=ufrom.options[idx].val;
       var txt=ufrom.options[idx].text;
   }
</script>

7.3 提交表单

（1）使用普通button按钮+onclick事件+事件中编写代码：
获取表单.submit();
（2）使用submit按钮+οnclick=“return 函数()”+编写代码：
最后必须返回：return true|false;
（3）使用submit按钮/图片提交按钮+表单οnsubmit= “return 函数()”+编写代码：
最后必须返回：return true|false;