JavaScript基础知识点 简略（DOM、函数、闭包）

之前知识点链接：JavaScript基础语法（变量/函数/数组/对象）

三、DOM（文档对象模型）

网页是一个动态的数据结构，通过JavaScript进行交互；可以访问并读取网页中元素的内容，还可以修改网页的内容或结构

DOM的创建过程

浏览器在加载并分析HTML时创建网页的DOM

DOM的结构

每个DOM顶部都是一个document对象，它下面是一个树，其中包含由HTML标记的各个元素构成的树枝和树叶

在代码中通过使用document对象来访问DOM常用DOM
访问方法： getElementById、getElementsByClassName、getElementsByTagName
使用getElementById从DOM获取元素时，得到的是一个元素对象，可以用它来读取、修改或替换元素的内容和特性，并将对DOM的修改返回到网页中。

元素属性/方法：

innerHTML：查看到的是包含在元素中的内容，用于读取或替换修改元素的内容
setAttribute：设置HTML元素特性
getAttribute：获取HTML元素特性
**注意：**在网页完全加载后在执行DOM（window.onload）

回调函数（事件处理程序）

给了解事件的对象提供一个函数；事件发生后，这个对象将通过调用这个函数来通知你。

DOM的其他功能：

·从DOM获取元素·
创建元素并将其加入到DOM中
·从DOM中删除元素
·遍历DOM中的元素
·…

四、类型

在JavaScript中，类型分为两组：基本类型和对象。不属于基本类型的值都是对象。
基本类型包括：数字、字符串、布尔值、null和undefined

undefined和null

**undefined：**在变量未初始化、对象没有指定属性或数组没有指定元素时；类型是undefined
**null：**在应该提供一个对象但无法创建或找到时；类型是object
·typeof 运算符，用于探测操作数的类型

NaN

NaN(Not a Number)，非数字，通过用于表示无法表示的数值结果，与包括自己在内的任意值都不相等。需要检查变量是否为NaN时，使用特殊函数isNaN，类型是数字。
·Infinity 指的是任何超过浮点数上限的值，类型是数字

比较运算符

**

相等运算符

**
如果两个值的类型相同，就直接比较，比较字符串时根据字母顺序（Unicode值）确定大小
如果两个值的类型不同，则尝试（临时性）转换为相同的类型，再进行比较

1. 比较字符和数字，把字符串转换为数字，空字符串转换为数字”0”
2. 比较布尔值和其他类型，把布尔值转换为数字，true转为1，false转为0
3. 比较null和unfinished，结果为true严格相等

运算符

• 当且仅当两个值的类型和值都相同时，它们才是严格相等的拼接和加法运算符+
• 当数字和字符串相加，数字转换为字符串再进行拼接
• 仅当两个变量包含的对象引用指向同一个对象时，它们才相等

假值

undefined、null、0、””和NaN

字符串的方法和属性

• 属性length：指出字符串中包含了多少个字符方法
• charAt：指定位置的字符
• 方法indexOf：返回指定参数首次出现的位置的索引，如果不存在返回-1
• 方法substring：返回索引之间的子串
• 方法split：根据用作分隔符的字符将字符串分成多个，并返回一个包含这些部分的数组
• slice：删除字符串的一部分并返回结果
• toLowerCase：将字符串中的所有大写字符都转换为小写，并返回结果
• lastIndexOf：查找最后一个字串
• match：在字符串中查找与正则表达式匹配的子串
• trim：删除字符串开头和末尾的空白字符，为处理用户输入提供了极大的便利
• replace：查找字串并将它们都替换为另一个字符串
• concat：拼接字符串
• toUpperCase：将字符串中的所有小写字符都转换为大写，并返回结果

五、异步编码/事件

大多数JavaScript代码都是用来响应事件的，要响应事件，可以编写注册一个事件处理程序。使用函数作为事件处理程序，事件处理程序的运行时间和运行顺序都是不确定的，它们是异步的。
发生在DOM元素上的事件导致一个event被传递给事务处理程序。
可能在短时间内发生很多事件。发生的事件太多，浏览器无法实时地处理时，这些事件将按发生的顺序顺序存储到事件队列中，让浏览器能够依次调用每个事件的处理程序。
使用函数setTimeout和setInterval创建在指定事件过后发生的事件

**

## 常用事件

**

• click：单击触发
• Resize：调整浏览器窗口大小时触发
• Play：单击元素的播放按钮时触发
• Pause：单击元素的暂停按钮时触发
• Load：浏览器加载网页后触发
• Unload：用户关闭浏览器窗口或切换到其他网页时触发
• Dragstart：用户拖曳网页中元素时触发
• Drop：用户放下拖曳的元素时触发
• Mousemove：在元素上移动鼠标时触发
• Mouseover：用户将鼠标指向元素时，将触发这个事件
• Keypress：用户按下任何键都触发
• Mouseout：用户将鼠标从元素上移开时触发
• Touchstart：在触摸设备上，用户触摸并按住这个元素时触发
• Touchend：用户停止触摸时，将触发这个事件

六、函数、作用域和闭包

函数声明和函数表达式创建的函数差异：

无论使用函数声明还是函数表达式，最终都将得到一个函数。一个差别是，使用函数声明时，函数将在执行代码前创建，而使用函数表达式时，函数将在运行阶段执行代码时创建。另一个差别与函数命名相关：使用函数声明时，将创建一个与函数同名的变量，并让它指向函数；而使用函数表达式时，通常不给函数指定名称。

一等值函数的定义：

在编程语言中，可像对待其他任何值一样对待的值，包括赋给变量、作为实参传递给函数以及从函数中返回
·函数引用是一个指向函数的值

词法作用域

词法作用域指的是JavaScript的作用域规则完全基于代码的结构，而不是一些动态的运行阶段属性。对于在函数中引用的变量，要确定它是在那里定义的，可从最里边（当前函数）开始依次向最外面进行查找，知道找到它为止。
优点是：只需查看代码的结构就可确定变量的作用域，进而确定它的值。

闭包

自由变量：在函数体内未被绑定的变量
环境：存储了在局部作用域内定义的所有变量闭包：包含自由变量的函数与为所有这些自由变量提供了变量绑定的环境一起，被称为闭包。
闭包包含的是实际的环境，而非环境的副本。

• ·通过将函数表达式用作实参来创建闭包
• ·使用事件处理程序来创建闭包，通常使用闭包来为事件处理程序捕获状态