04JS第三天----- js核心第一天---昨日反馈 ---DOM介绍

一、昨日反馈

1. 数据类型转换
   1. 转换成字符串
      1. 使用  变量.toString();  //不能转换undefined和null
      2. 使用String(变量); //能转换所有的数据类型
      3. 其他类型的变量和字符串相加（连）操作的时候，会把其他类型的变量通过String自动转换成字符串，然后在完成连接操作
   2. 转换成数值型
      1. parseInt(变量); //检查字符0处的字符是否是数字，如果是继续向后检查，直到发现一个非数字为止，然后将前面的数字部分转换成整型；如果发现0处的字符不是数字，则转换成NaN。
      2. parseFloat(变量); //转换成浮点型，规则和parseInt一样，只不过parseFloat允许有一个小数点。
      3. 强制转换Number(变量); // falseà0;  trueà1; undefinedàNaN;  nullà0;
   3. 转换成浮点型
      1. 下面的值转换成浮点型之后为false：""、0、 0.0、 undefined、 null、NaN。
      2. 除了上面列举的值，其他值转换成布尔都是true，包括"0", [], {};

 

1. 流程控制
   1. 顺序结构
   2. 分支结构
   3. 循环结构：可以给循环起一个名字，比如（ a:for(…)…）for循环中，前面的a就表示它的名字，用于break等指定循环使用

 

1. 函数基础
   1. 定义函数
      1. 常规的方式：function 函数名(){}   //可以先调用，后声明
      2. 表达式方式：var 函数名 = function(){}; //只能先定义，后使用
      3. 立即调用模式： ( function(){} ) ();  //红色的小括号必须的，表示里面声明的函数是一个整体；绿色的小括号表示调用函数。

 

1. 作用域
   1. 分类：全局作用域和局部（函数）作用域
   2. 作用域规则
      1. 函数可以使用函数之外定义的变量
      2. 函数内部优先使用内部的变量，如果内部没有，才去函数外部查找。（注意变量提升）
      3. 函数内部没有用var声明的变量，也是全局变量。

 

1. 变量提升和函数预加载
   1. 变量提升
      1. 如果在声明变量之前，就使用了一个变量。这种情况不会报错，它实际执行的过程是把声明变量的过程提升到使用之前，注意的是只是把声明变量的过程提升到使用之前，并没有把变量的赋值过程提升。
   2. 函数预加载
      1. 函数声明必须是常规方式（ function 函数名(){} ）
      2. 函数的调用和声明必须在同一个script标签中

二、今日目标

1、理解什么是DOM，它的作用是什么

2、能够通过多种方式查询页面中的元素

3、能够对页面中的元素进行增删改克隆操作

4、能够设置或获取元素的css样式

5、能够通过dom节点为元素绑定事件

6、能够获取兼容各个浏览器的事件对象

7、能够通过事件对象获取当前的keyCode

三、DOM介绍

3.1、什么是DOM

DOM全称是Document Object Model（文档对象模型），它是JS将HTML按文档结构和内容层次抽象出的模型，使得JavaScript有了访问HTML的能力，能够实现对HTML中内容的操作。DOM存在广泛，PHP以及其他语言也有各自的DOM模型。

3.2、节点与DOM模型

DOM模型呈现树状结构，因此也叫“树模型”，树中的内容（标签、属性、文本）称为“节点”，节点在dom中就是对象。包含有元素节点（标签）、属性节点、文本节点。dom模型中，每个节点，都是一个JavaScript对象。

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

• 整个文档是一个文档节点，用document对象表示，最大的节点
• 每个 HTML 元素是元素节点，比如html、head、body、a、h1
• HTML 元素内的文本是文本节点
• 每个 HTML 属性是属性节点，比如href

注释是注释节点

3.3、节点之间的关系

节点之间的关系犹如人类家族中的族谱。节点之间的关系包括：

• 父子关系（父子、后代、祖先级）
• 兄弟（姐妹）关系

单词：

• parent -- 父母
• child -- 孩子
• children -- 孩子（复数），表示所有孩子
• siblings -- 兄弟姐妹、同胞