JavaScript 基础介绍

JavaScript 介绍

1.1 JavaScript最初的目的

    判断客户端的输入是否合法

1.2   JavaScript 现在的目的

     页面特效（PC端的网页效果）

     移动端（移动web和APP）

    异步和服务器交互

    服务端开发nodejs

    浏览器：

            1.User Interface 用户界面，我们走看到的浏览器

            2.Browser engine 浏览器引擎，用来查询和操作渲染引擎

            3.Rendering engine 用来显示请求的内容，负责解析HTML、CSS

            4.Networking 网络，负责发送网络请求

            5.JavaScript Interpreter （解析者）JavaScript解析器，负责执行JavaScript的代码

            6.UI Backend  UI后端，用来绘制累死组合框和弹出窗口

            7.Data Persistence (持久化) 数据持久化，数据存储 cookie、HTML5中的sessionStorage

1.3 JavaScript是世界上用的最多的脚本语言

    脚本语言：不需要编译，直接运行时边解析边运行的语言。

    编译：一次性把代码转换成CPU可以看懂的语言（01010101），一行一行执行。

    解析：一行一行解析，解析一行执行一行。

1.4 JavaScript 是一种客户端的脚本语言，运行在浏览器上;

1.5 JavaScript 发展历史，略。

1.6 JavaScript 组成：

    ECMAScript: JavaScript的语法规范；

    DOM: JavaScript 操作网页上元素的API

    BOM: JavaScript 操作浏览器部分功能的API

Script 标签

1.2 引入JavaScript

     HTML页面书写

    引入外部 JavaScript文件

1.3 标签属性

     Type

        Type=”text/javascript”

        可以省略

    async 

        async=”async”

        值可以省略，立即异步下载外部JS，不影响页面的其它操作，JS下载完毕立即执行。

        Async 异步: 多个人同时做多件事情(跟生活中的理解相反)

        Sync 同步，一个人有序的做多件事情(跟生活中的理解相反)

    Defer

        Defer=”defer”

        值可以省略，脚本延迟到文档完全被解析和显示后再执行，只有外部脚本可以使用

变量

    变量是在计算机中存储数据的一个标识符

    变量可以在声明的时候赋值，也可以稍后赋值。

    可以在一行上定义多个变量。例如：var name,age,sex;

变量命名规则和规范

规则

    -由字母、数字、下划线、$组成

    -不能是关键字和保留字

    -区分大小写

规范（建议遵守）

    -变量的名称要有意义

    -变量的命名遵守驼峰命名法，首字母小写，第二个单词的首字母大写

    -例如：userName

注释

单行注释

    - //单行注释

多行注释

    -/* 多行注释 */

注释的应用

    -注释一般用于解释某些复杂代码的逻辑，方便后期的维护和开发

    -注释一般用于对整个模块进行分割划分，方便代码查找和维护

    -注释一般用于：模块、函数、复杂逻辑注解、文件注解、维护记录等

数据类型

    四种常用的数据类型

    - Number

    - String

    - Boolean

    - Undefined

数据类型

    计算机在存储数据的时候是有类型的

    JavaScript 中的数据类型

    - 简单（基本、值）数据类型

        Number、string、Boolean、undefined、null

    - 复杂（引用）数据类型

       Object、array、date等

- 查看当前变量的数据类型

     Typeof name

     Typeof （name）

数值字面量

    字面量

    - 固定的值，让你从“字面上”理解其含义

    数值字面量

    - var age = 18;//数值字面量，18为字面值。

Number 类型

十进制

var num = 9;

进行算数计算时，八进制和十六进制表示的数值最终都会转换为十进制数值。

十六进制

var num = 0~a;

数字序列范围：0~9以及A~F

八进制

Var num1 = 07; //对应十进制的7

Var num2 = 019;//对应十进制的19

Var num3 = 08;//对应十进制的8

浮点数

Var n = 5e-324;

浮点数值的最高精度为17位小数，但在进行算数计算时，其精确度远远不如整数

- var resule = 0.1 + 0.2;//结果不是0.3，而是0.30000000000000004

- console.log(0.07*100);

- 永远不要测试某个特定的浮点数值（不要判断两个浮点数是否相等）

数值范围

由于内存的限制，ECMAScript 并不能保存世界上所有的数值

最小值：Number.Min_VALUE,这个值为：5e-324

最大值：Number.Max_VALUE,这个值为：1.7976931348623157e+308

无穷大：Infinity

无穷小：-nfinity

数值检测

NaN 非数值（Not a Number）

Console.log(“abc”/18);//结果是NaN

NaN与任何值都不相等，包括NaN本身

IsNaN():任何不能被转换为数值的值都会导致这个函数返回true

IsNaN(NaN);//true

IsNaN(“blue”);//true

IsNaN(123);//false

String 类型

字符串字面量

-var name =“张三”;//”张三”字面量

字符串要用引号引起，单引号和双引号的作用是等效的

例如：

var name = “zhangsan”;

var name = ‘zhangsan’;

错误示范

var name = ‘zhangsan”;//单引号和双引号要成对出现

字符串是由一个一个字符组成的，获取一个字符串中的字符个数可以使用length

例如：var name = “zs”;alert(name.length);/

转义符

要想打印“  ”或者‘  ’怎么办？

Var str = “hello \”world\””;//打印输出hello“world”

转义符

\n 换行符

\t 制表符

\b 空格符

\r 回车符

\f 进纸符

\\ 斜杠符

\’ 单引号

\” 双引号

\xnn 以十六进制代码nn表示的一个字符（其中n为0~F）,例如：\x41表示“A”

\unnnn 以十六进制nnnn表示的一个Unicode字符（其中n为0~F），例如：\u30a3 表示希腊字符

字符串的不可变

ECMAScript 中的字符串是不可变的，也就是说，字符串一旦创建，它们的值就不能改变。

要改变某个变量保存的字符串，首先要销毁原来的字符串，然后再用另一个包含新值的字符串填充该变量

例如：var str = “123”; str = str + “abc”;

字符串拼接

如果有两个字符串变量a,b, 如何把这两个变量的值连接起来？

例如：Var a = “hello”;

  Var b = “world”;

  Var c = a + b;

思考：var a = “hello”;

  Var b = 100;

  Var c = a + b;//结果是什么？

Boolean 类型

Boolean 类型有两个字面量：true和false，并且区分大小写！

虽然Boolean 类型的字面值只有这两个，但EDMAScript 中所有类型的值都有与这两个Boolean值等价的值

例如：

Var result = Boolean(“a”);

Console.log(resule);//结果是true

 

Var result = Boolean(100);

Console.log(result);//结果是true

转换成Boolean类型

任何类型可以转换成Boolean类型，一般使用在流程控制语句后面

例如：

Var message = “hello”;

If(message){ alert(message + “world”)};

空字符串 、0 、 NaN、null 、undefined-----转换为false

 

判断变量是否有值

Var msg = “0”;

If(msg){   //有值  }else{   //无值  } 自动将msg 转换为Boolean模式

判断其是否有值

Undefined 类型

Undefined 这是一种比较特殊的类型，表示变量未赋值，这种类型只有一种值就是undefined

例如：var message;

  Console.log(message);//结果是undefined

Undefined是undefined类型的字面量

例如：var messagte = undefined;

  Console.log(message);

Typeof message;获取到的是“undefined”

思考：

下面代码输出的结果？

Var message;

If(message){

Alert(“有值”)；

}else{

Alert(“无值”);

}

目标，掌握三种类型的转换

转换成字符串类型

转换成数值类型

转换成布尔类型

转换成字符串

三种转换成字符的方法

1. 几乎每一个值都有toString（）方法

a) 例如：

b) Var age = 18

c) Var ageString = age.toString();

d) Console.log(ageString);//结果“18”

 

var resule = true;

var resultString = result.toString();

congsole.log(resultString);//结果：“true”

2. 数值类型的toString,可以携带一个参数，输出对应进制的值

a) Var num = 10;

b) Console.log(num.toString()); //”10”默认是10进制

c) Console.log(num.toString(10)); //”10”

d) Console.log(num.toString(8)); //”12”

e) Console.log(num toString(16)); //”a”

f) Console.log(num toString(2)); //”1010”

3. String 函数

a) 例如：

b) Var age = 18;

c) Console.log(String(age));//结果“18”

d) Var result = true;

e) Console.log(String(result));//结果“true”

f) Console.log(String(undefined));结果“undefined”

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

5. 使用拼接字符串

a) 例如1：

b) Var age = 18;

c) Var str = age + “岁”;

d) Console.log(str);

e) 例如2：

f) Var str = “”+ 18;  //结果是“18”

转换成数值类型

三个把值转换成数值类型的函数：Number parseInt()和parseFloat()

Nunber() 可以把任意值转换成数值，如果要转换的字符串中有一个不是数值的字符，返回NaN

例如：

Var num1 = number(true);//true返回1 false返回0

Var num2 = Number(undefined);//返回NaN

Var num3 = Number(“hello”);//返回NaN

Var num4 = Number(“”);//如果是空字符，返回0

Var num5 = Number(123);//返回123，如果是数字，简单返回

Var num6 = Number(“123abc”);//NaN

Var num7 = Number(“abc123”);//NaN

ParseInt()  把字符串转换成整数

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

Var num2 = parseInt(“abc123”);//返回NaN，如果第一个字符不是数字或者符号就返回NaN

Var num3 = parseInt(“”);//空字符串返回NaN，Nunber(“”)返回0

Var num5 = parseInt(“10”);//返回10

Var num4 = parseInt(“0xA”);返回10

ParseInt () 可以传递两个参数，第一个参数是要转换的字符串，第二个参数是要转换的进制

Var num4 = parseInt(“0xA”); //返回10

Var num6 = parseInt(“A”); //返回什么？NaN

Var num1 = parseInt(“A”,16);//A按16进制解析是10

Var num2 = parseInt(“10”,10);//10按10进制解析是10

Var num3 = parseInt(“10”,16);//10按16进制解析是16

Var num4 = parseInt(“10”,8);//10按8进制解析是8

Var num5 = parseInt(“10”,2);//10按2进制解析是2

Var num6 = parseInt(“10”,3);//10按3进制解析是3

ParseFloat()把字符串转换成浮点数

ParseFloat() 和parseFloat（）非常相似，不同之处在于：

ParseFloat 会解析第一个，遇到第二个，或者非数字结束

ParseFloat 不支持第二个参数，只能解析10进制数

如果解析的内容里只有整数，则解析成整数

转换成布尔类型

两种转换成布尔类型的方式

Boolean（）函数

例如：var b = Boolean(“1234”); //返回true

流程控制语句会把后面的值隐式转换成布尔类型

例如：var message;

If(message){ //会自动把message转换成false //todo…}

转换为false的值：false、“”、0 和NaN、null、undefined

猜猜看，下面的语句的结果

Var b = !!”123”;

第一个逻辑非操作会基于无论什么操作数返回一个布尔值

第二个逻辑非操作则对该布尔值求反

于是就得到了这个值真正对应的布尔值（结合性从右向左）

操作符

目标

算数运算符

一元运算符

逻辑运算符（&&||！）

比较运算符

赋值运算符

运算符的优先级

数学运算符

+加   -减 *乘   /除   %求余   ++累加   --递减

+加法运算符

如果运算符有个一个操作数为字符串，则将两一个操作数转换成字符串然后再将两个字符串拼接

例如：var str = “abc”+ 123;  //返回“abc123”

-减法运算符

*乘法运算符

/除法运算符

%求模（取余）运算符

/除0，返回infinity

%取余，返回NaN

一元运算符

只能操作一个值的操作符叫做一元操作符，分为：前置型和后置型

顾名思义，前置型应该位于要操作的变量之前，而后置型则应该位于要操作的变量之后

执行前置递增和递减操作时，变量的值都是在语句被求值以前改变的

++ 

前置++

Var age = 18;

++age; //结果19

执行过程

Var age = 1;

Age = age + 1;

后置++

Var age = 18;

Age++;//结果19

和前置++的不同点在于，递增操作是在整个语句求值之后执行的，此处和上面的结果没有任何区别

练习

Var a = 1;

var b = ++a + ++a;

console.log(b); // 结果为5

Var a = 1;

var b = a++ + ++a;

console.log(b); // 结果为4

Var a = 1;

var b = a++ + a++;

console.log(b); // 结果为3

Var a = 1;

var b = ++a + a++;

console.log(b); // 结果为4

--和++相同

逻辑运算符

&& and 例子：（x < 10 && y > 1）为true

|| or 例子：（x == 5 || y == 5）为false

! not 例子：!(x == y)为true

&& 两个操作数同时为true，结果为true，否则都是false

|| 两个操作数有一个为true，结果为true，否则为false

&&  ||  短路运算符

&& 与

假如两个操作数都不是布尔类型：

如果两个值转换成布尔类型都是true，返回第二个操作数

如果有一个操作数转换成布尔类型是false，返回这个数

 

Var b = “abc”&& “bcd”;结果为bcd （前面对象为true 往后读取，bcd为true，直接返回它的操作数）

Var b =  undefined && null; 结果为undefined，（前面短路，就不往后走了，直接返回undefined）

|| 或

常用的场景：

Sum(undefined,2);

Function sum(n1,n2){ n1 = n1 || 0; n2 = n2 || 0; console.log(n1 + n2);  }

！非

如果操作数是对象，返回false

如果操作数是空字符串，返回true

如果操作数是非空字符串，返回false

如果操作数是0，返回true

如果操作数是任意非0值，返回false

如果操作数是null、undefined、NaN, 返回true

上面的规则可以简化成

转换为false的值：false、“”、0和NaN、null、undefined

比较运算符

运算符	描述	例子
==	等于	x == 8;为false
===	全等于（值和类型）	x === 5;为true x === “5”为false
!=	不等于	x != 8;为true
>	大于	x > 8;为false
<	小于	x < 8;为true
>=	大于或等于	x >= 8;为false
<=	小于或等于	X <= 8;为true

<   <=   >=   >

在比较字符串时，实际比较的是两个字符串中对应位置的每个字符的字符编码值

在比较数值和字符串时，字符串都会被转换成数值，然后再以数值方式与另一个数值比较

如果一边是数字，另一边是Boolean，先把Boolean类型的值转换成数字，再比较。

== 、！=   相等和不相等

=== 、！==  全等和不全等

相等只比较值，全等比较的是值和类型

例如

Var result = “55” == 55; //true

Var result = “55”=== 55;//false,值相等，类型不相等

Var result = 55 === 55;//true

赋值运算符

=  +=  -=  *=  /=  %=

例如：var num = 0;

  Num += 5;//相等于  num = num + 5;

 

  Var a  /=  b;相当于 a = a / b;

  Var z = a * ( x /= y ) * x;

  Var z = a * ( x = x / y ) * x;

  Var z = a * x / y * x / y;

  Var z = a * x * x / ( y * y );

  Var z = a * x * x / y / y;

运算符的优先级

优先级从高到低

（） 优先级最高

一元运算符 ++  --  ！

算数运算符 先*  /  %  后 +  - 

关系运算符 >  >=  <  <=

相等运算符 == ！=  === ！==

逻辑运算符 先&& 后 ||

表达式练习

练习1

((4 >= 6) || (“人” != “狗”)) && ！（（（12 * 2）== 144）&& true）

(False || true）&& ！（false && true）

True && !false

True && true

True

练习2

Var num = 10

If(5 == num / 2 && (2 + 2 * num).tostring() === “22”){ console.log(true);}

If(5 == 10 / 2 && (2 + 2 * 10).tostring() === “22”){console.log(true);}

If(5 == 5 && 22.tostring() === “22”){console.log(true);}

If(true && “22”=== “22”){console.log(true);}

If(true && true){console.log(true)}

流程控制

程序三种基本结构

顺序结构

选择结构

循环结构

判断语句if

语法：

If(condition){

Statement1

}else if{

Stetement2

}else{

Statement3

}

判断语句switch

语法：

Switch (expression){

Case value:

Statement

Break;//break关键字会导致代码执行流跳出switch语句

Case value:

Statement

Break;

Default:

Statement

}

注意：

Break 可以省略，如果省略，代码会继续执行下一个case

Switch 语句在比较值时使用的是全等操作符，因此不会发生类型转换

例如：字符串“10”不等于数值 10

三元运算符

性别在数据库中存储的是1和0，要求输出男或女

Var sex = 1;

If(sex === 1){

Console.log(“男”);

}else{

Console.log(“女”);

}

简化的方式

Var sex = 1;

Sex = sex === 1 ? “男”: “女”;

表达式1 ？ 表达式2 ：表达式3

循环

循环语句for

语法

For （initialization; expression; post-loop-expression）statement

Initialization 表示：初始化表达式

Expression表示：控制表达式

Post-loop-expression 表示：循环后表达式

三者都是可选的

循环1-100

执行过程

1. 首先初始化

2. 循环的判断

3. 函数体代码

4.  post-loop-expression

5.  从第二步开始向下重复进行

三种循环语句： for    while   dowhile

当循环次数已知的时候使用for循环

Break 和 continue 

Break 

立即退出循环

Continue

立即退出当前循环，但退出循环后会从循环的顶部继续执行

循环语句 while

当循环次数已知的情况下用for循环

当循环次数未知的情况下用while和do  while 循环

While 和 do while 的区别

While 先判断条件再循环

Do while 先循环再判断条件

数组

任意的 有序的 一组数

数组中的项，如果没有赋值就是undefined

每当我们往数组中新增一个项，都会更改length的属性

想存储多个值的时候可以使用数组，比如：班级所有学生的姓名。

数组：数据的有序列表，可以存放任意类型的数据，数组的大小可以动态调整

创建数组的两种方式：

方式1，数组字面量

Var arr1 = [ ];//创建一个空数组，数组字面量

Var arr2 = [1,3,4 ];//创建一个包含3个数值的数组，数组项间用逗号隔开

Var arr3 = [“a”,”c”];//创建一个包含2个字符串的数组

方式2，Array的构造函数

Var arr4 = new Array();//创建一个空数组

Var arr5 = new Array(10);//创建一个长度为10的数组

Var arr6 = new Array(“black”,”white”,”red”,”blue”);//创建一个包含4个字符串的数组

获取数组中的值

Var colors = [“black”,”white”,”red”];

Console.log(colors[0]);//获取第一个元素的值

Colors[“1”] = “blue”;//给第二个元素重新赋值

Console.log(colors);

Colors[“4”] = “yellow”;//设置第5个元素的值，此时数组中有5个元素项

Console.log(colors);

Length属性，获取或设置数组中元素的个数

Console.log(colors.length);//获取数组中元素的个数

Colors.length = 1;//设置数组中元素的个数

Console.log(colors);

函数

函数可以封装一段JavaScript代码，它只定义一次，但可以被执行或调用任意多次

编程就是把需求分解成一组函数与数据结构的能力

函数的定义：function 函数名 （var1，var2，…，varX）{

//函数体

}

函数的调用：函数名（）；

函数包含一组语句，它们是JavaScript的基础模块单元，用于代码复用、信息隐藏和组合调用

函数的三要素：

函数的功能

函数的参数

函数的返回值

函数的参数：

形参：定义函数的时候，没有实际的值，给实参占位

实参：调用函数的时候，有实际的值

函数调用的时候，实参的个数可以不用和形参的个数相等

函数的返回值

如果return后面跟内容了，返回return后面的内容

如果return后面没有跟内容，返回undefined

如果函数内部没有写return，返回undefined

如果函数体中出现return则后面的代码不执行

当不写返回值，或者return后面没有跟内容的时候，返回的也有返回值undefined，这是和其他语言不同的地方

推荐的做法是要么让函数始终都返回一个值，要么永远都不要返回值

函数内部可以调用其它函数

执行的过程

函数执行内部调用的函数的时候，会执行内部的函数，当内部的函数执行完毕，会继续执行当前的函数

函数的几种形式

无参数无返回值

有参数无返回值

无参数有返回值

有参数有返回值

没有重载

在其它语言中，有重载的概念

重载：函数的名字相同，但是参数个数不同

JavaScript中没有重载的概念

下面相同名称的函数会把上面的函数覆盖

JavaScript中不允许有同名的函数（不是绝对的）

 

函数的两种定义方式

1. 函数声明

Function f (a,b) {

Return a + b;

}

Console.log(f(5,6));

2. 函数表达式

//myFun和f等价

Var maFun = function (a,b) {

Return a + b;

}

Console.log(myFun(6,7));

函数声明和函数表达式的区别

函数声明： 函数提升

函数表达式： 变量提升

变量的作用域

变量的作用区域，变量在什么位置可以使用

块级作用域

在其它语言中，任何一对花括号{ }中的语句都属于一个块，在这之中定义的所有变量在代码块外都是不可见的

JavaScript中没有块级作用域

全局变量

只要在在<script>标签内部定义的变量  和  不使用var 声明的变量都是 全局变量

定义在script或者不属于某个函数的变量

在任何位置都可以访问

局部变量

在函数内部使用var声明的变量  就是 局部变量

定义在函数内部的变量，只能在该函数内部使用

其它

函数内部可以访问到该函数所属的外部作用域的变量（作用域链）

不使用var声明的变量是全局变量，不推荐使用 比如： 在函数内声明a = 5;

变量超出作用域之后会销毁，全局变量关闭网页或浏览器才会销毁

变量提升

变量提升

定义变量的时候，变量的声明会被提升到作用域的最上面，变量的赋值不会提升

函数提升

JavaScript解析器首先会把当前作用域的函数声明提前到整个作用域的最前面

匿名函数

Var myFun = function ( ) { }  没有定义名字的函数

一般用在绑定事件的时候

语法： function （）{ }

自调用函数： （function（）{alert（“hello”）}）（）

前面小括号定义，后面小括号调用

递归

什么是递归？

函数自己调用自己，类似：从前有座山，山上有座庙。。。

方法自身调用，一般还要有结束的条件

递归是比较消耗资源的，不断的开辟新的局部作用域（新函数体）容易造成堆栈溢出而报错

函数是一种数据类型

函数是一种数据类型 function

函数可以作为另一个函数的参数

对象

面向对象介绍和内置对象

目标

会自己定义一个构造函数，创建自定义对象

什么是对象？

生活中的对象： 一辆车  一部手机 。。。

对象具有特征和行为

面向对象和基于对象

面向对象：可以创建自定义的类型、很好的支持继承和多态。面向对象的语言 c++、Java、c#。。。

面向对象的特征：封装、继承、多态

万物皆对象：世间的一切事物都可以用对象来描述

基于对象：无法创建自定义的类型、不能很好的支持继承和多态。基于对象的语言JavaScript

JavaScript中的对象

无序属性的集合

其属性可以包含基本值、对象和函数。

对象就是一组没有顺序的值。

可以把JavaScript中的对象想象成键值对，其中值可以是数据和函数。

对象的特征和行为

特征----属性

行为----方法

构造函数

New Object ();

New 后面调用函数，我们称为构造函数

Object （）我们把它视为一个构造函数，构造函数的本质就是一个函数，只不过构造函数的目的是创建新对象，为新对象进行初始化（设置对象的属性）。

JSON

什么是JSON?

JavaScript Object Notation (JavaScript 对象表示形式)

JavaScript 的子集

JSON和对象字面量的区别

JSON的属性必须用双引号引起来，对象字面量可以省略

“name”: “盖伦”，           name: “盖伦”，

JSON是描述数据的一种标准规范

复习JavaScript的数据类型

简单（基本）数据类型：Number String Undefined Null Boolean 五种

复杂（引用）数据类型：Object Array Date Function等

基本（简单）类型和引用（复杂）类型

Array

数组—引用类型—JavaScript中的内置对象

Array对象的属性

Length 获取数组的长度（元素的个数）

常用方法

检测数组

Instanceof  检测是否是数组 var a = [];    a instanceof Array;

Array.isArray(); HTML5中新增

转换数组

ToString();  把数组转换成字符串

ValueOf（）;返回数组对象本身

Join：将数组的数值转换为字符串，并在字符串中间添加符号输出，默认为逗号

Typeof和instanceof 的区别

Typeof 可以获取任意变量的类型，任意类型的对象使用typeof获取到的都是Object

Instanceof 只能判断对象的类型 精确判断对象具体的类型

DOM和BOM

DOM

DOM （Document Object Model）文档对象模型 ，又称为文档树模型，是一套操作HTML 和XML文档的API。

DOM 可以把HTML和XML描述为一个文档树，树上的每一个分支都可以视为一个对象，

通过DOM可以添加、修改和移除文档上的某一部分

DOM的相关概念

DOM就是把HTML视为一个层次结构（树形结构）的文档

文档（Document）就是指HTML或XML文件

节点（Node） HTML文档中所有的内容都可以称之为节点

元素（Element）HTML文档中的标签可以称为元素

文档元素（根元素）文档中的第一个元素，HTML文档中的根元素就是<html>

文本节点

属性节点

父节点 parent

子节点 child

兄弟节点 sibling

DOM可以做什么

找对象（元素element）

设置元素的属性

设置元素的样式

动态创建、修改和删除元素

事件—--触发响应

事件的触发者（事件源）

事件的名称

事件的响应程序

获取页面元素

DOMCore---可以用在任何DOM文档中

GetElementById()  根据id属性获取一个DOM对象，区分大小写，符合代码规范

GetElementsByTagName() 根据标签返回多个DOM对象

HTML-DOM  仅仅能够用在HTML文档中

GetElementsByName()

HTML5中新增

GetElementByClassName()

DOM 对象的属性

DOM对象的属性和HTML的标签属性几乎是一致的

Src、title、className、href

innerHTML   会把内容解析到DOM树上

获取标签之间的内容

设置标签之间的内容

InnerHTML（FF中textContent）  会对内容转义

获取标签之间的内容

设置标签之间的内容