JavaScript 语言入门教程

2019-09-19 JavaScript JavaScript 0 评论字数统计: 29.7k(字) 阅读时长: 110(分)
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>JavaScript 语言入门教程</title>
</head>
<body>
  <!-- <script type="text/javascript" src="./assets/index.js"></script> -->
  <!-- JavaScript 的基本语法 -->
  1.语句
  JavaScript 程序的执行单位为行（line），也就是一行一行地执行。一般情况下，每一行就是一个语句。
  2.变量
  - 概念
  变量是对“值”的具名引用。变量就是为“值”起名，然后引用这个名字，就等同于引用这个值。变量的名字就是变量名。
  - 变量提升
  JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升（hoisting）。
  3.标识符
  - 标识符（identifier）指的是用来识别各种值的合法名称。
  4.注释
  - 源码中被 JavaScript 引擎忽略的部分就叫做注释，它的作用是对代码进行解释。
  5.区块
  - JavaScript 使用大括号，将多个相关的语句组合在一起，称为“区块”（block）。
  6.条件语句
  JavaScript 提供if结构和switch结构，完成条件判断，即只有满足预设的条件，才会执行相应的语句。
  - if结构
  - if...else结构
  - switch结构
  - 三元运算符 (条件) ? 表达式1 : 表达式2
    JavaScript 还有一个三元运算符（即该运算符需要三个运算子）?:，也可以用于逻辑判断。
  7.循环语句
  循环语句用于重复执行某个操作，它有多种形式。
  - while 循环
    While语句包括一个循环条件和一段代码块，只要条件为真，就不断循环执行代码块。
  - for 循环
    for语句是循环命令的另一种形式，可以指定循环的起点、终点和终止条件。
  - do...while循环
    do...while循环与while循环类似，唯一的区别就是先运行一次循环体，然后判断循环条件。
  - break 语句和 continue 语句
    break语句和continue语句都具有跳转作用，可以让代码不按既有的顺序执行。
  - 标签（label）
    JavaScript 语言允许，语句的前面有标签（label），相当于定位符，用于跳转到程序的任意位置，标签的格式如下。
  <!-- 数据类型 -->
  JavaScript 语言的每一个值，都属于某一种数据类型。JavaScript 的数据类型，共有六种。
  - 数值（number）：整数和小数（比如1和3.14）
  - 字符串（string）：文本（比如Hello World）。
  - 布尔值（boolean）：表示真伪的两个特殊值，即true（真）和false（假）
  - undefined：表示“未定义”或不存在，即由于目前没有定义，所以此处暂时没有任何值
  - null：表示空值，即此处的值为空。
  - 对象（object）：各种值组成的集合。
  
  1.原始类型（primitive type）
  - 通常，数值、字符串、布尔值这三种类型，即它们是最基本的数据类型，不能再细分了。
  2.合成类型（complex type）
  - 一个对象往往是多个原始类型的值的合成，可以看作是一个存放各种值的容器。
  3.特殊值
  - undefined和null
  
  对象是最复杂的数据类型，又可以分成三个子类型。
  - 狭义的对象（object）
  - 数组（array）
  - 函数（function）

  4.typeof 运算符：检测数据类型
  <!-- null, undefined 和布尔值 -->
  null与undefined都可以表示“没有”，含义非常相似。
  1.用法和含义
  - null表示空值，即该处的值现在为空。
  - undefined表示“未定义”。
  2.布尔值
  - 布尔值代表“真”和“假”两个状态。“真”用关键字true表示，“假”用关键字false表示。
  下列运算符会返回布尔值：
  - 前置逻辑运算符： ! (Not)
  - 相等运算符：===，!==，==，!=
  - 比较运算符：>，>=，<，<=
  <!-- 数值 -->
  1.整数和浮点数
  JavaScript 内部，所有数字都是以64位浮点数形式储存，即使整数也是如此。
  - 数值精度
  - 数值范围
  2.数值的表示法
  3.数值的进制
  JavaScript 对整数提供四种进制的表示方法：十进制、十六进制、八进制、二进制。
  4.特殊数值
  - 正零和负零
  - NaN是 JavaScript 的特殊值，表示“非数字”（Not a Number），主要出现在将字符串解析成数字出错的场合。
  - Infinity表示“无穷”，用来表示两种场景。一种是一个正的数值太大，或一个负的数值太小。
  5.与数值相关的全局方法
  - parseInt()方法用于将字符串转为整数。
  - parseFloat方法用于将一个字符串转为浮点数。
  - isNaN方法可以用来判断一个值是否为NaN。
  - isFinite方法返回一个布尔值，表示某个值是否为正常的数值。
  <!-- 字符串 -->
  字符串就是零个或多个排在一起的字符，放在单引号或双引号之中。
  1.转义
  - 反斜杠（\）在字符串内有特殊含义，用来表示一些特殊字符，所以又称为转义符。
    \0 ：null
    \b ：后退键
    \f ：换页符
    \n ：换行符
    \r ：回车键
    \t ：制表符
    \v ：垂直制表符
    \' ：单引号
    \" ：双引号
    \\ ：反斜杠
  - 字符串与数组
    字符串可以被视为字符数组，因此可以使用数组的方括号运算符，用来返回某个位置的字符（位置编号从0开始）。
  - length 属性
    length属性返回字符串的长度，该属性也是无法改变的。
  2.字符集
  JavaScript 使用 Unicode 字符集。JavaScript 引擎内部，所有字符都用 Unicode 表示。
  3.Base64 转码
  Base64 就是一种编码方法，可以将任意值转成 0～9、A～Z、a-z、+和/这64个字符组成的可打印字符。使用它的主要目的，不是为了加密，而是为了不出现特殊字符，简化程序的处理。
  - btoa()：任意值转为 Base64 编码
  - atob()：Base64 编码转为原来的值
  <!-- 对象 -->
  1.对象（object）是 JavaScript 语言的核心概念，也是最重要的数据类型。
  - 键名，对象的所有键名都是字符串（ES6 又引入了 Symbol 值也可以作为键名），所以加不加引号都可以。
  - 对象的引用，如果不同的变量名指向同一个对象，那么它们都是这个对象的引用，也就是说指向同一个内存地址。修改其中一个变量，会影响到其他所有变量。
  - JavaScript 引擎的做法是，如果遇到这种情况，无法确定是对象还是代码块，一律解释为代码块。
  2.属性的操作
  - 读取对象的属性，有两种方法，一种是使用点运算符，还有一种是使用方括号运算符。
  - 点运算符和方括号运算符，不仅可以用来读取值，还可以用来赋值。
  - 查看一个对象本身的所有属性，可以使用Object.keys方法。
  - delete命令用于删除对象的属性，删除成功后返回true。
  - in 运算符，用于检查对象是否包含某个属性（注意，检查的是键名，不是键值），如果包含就返回true，否则返回false。
  - for...in 循环，for...in循环用来遍历一个对象的全部属性。
  3.with 语句
  with (对象) {
    语句;
  }
  <!-- 函数 -->
  1.函数是一段可以反复调用的代码块。函数还能接受输入的参数，不同的参数会返回不同的值。
  - function 命令，function命令声明的代码区块，就是一个函数。function命令后面是函数名，函数名后面是一对圆括号，里面是传入函数的参数。函数体放在大括号里面。
  - 函数表达式，除了用function命令声明函数，还可以采用变量赋值的写法。
  - Function 构造函数，第三种声明函数的方式是Function构造函数。
  - 函数的重复声明，后一次的函数声明覆盖了前面一次。而且，由于函数名的提升（参见下文），前一次声明在任何时候都是无效的，这一点要特别注意。
  - 圆括号运算符，return 语句和递归
  - JavaScript 语言将函数看作一种值，与其它值（数值、字符串、布尔值等等）地位相同。凡是可以使用值的地方，就能使用函数。
  - JavaScript 引擎将函数名视同变量名，所以采用function命令声明函数时，整个函数会像变量声明一样，被提升到代码头部。
  2.函数的属性和方法 
  - name属性，函数的name属性返回函数的名字。
  - length属性，函数的length属性返回函数预期传入的参数个数，即函数定义之中的参数个数。
  - toString()，函数的toString方法返回一个字符串，内容是函数的源码。
  3.函数作用域
  - 作用域（scope）指的是变量存在的范围。在 ES5 的规范中，JavaScript 只有两种作用域：一种是全局作用域，变量在整个程序中一直存在，所有地方都可以读取；另一种是函数作用域，变量只在函数内部存在。ES6 又新增了块级作用域，本教程不涉及。
  - 函数内部的变量提升，与全局作用域一样，函数作用域内部也会产生“变量提升”现象。
  - 函数本身的作用域，函数本身也是一个值，也有自己的作用域。它的作用域与变量一样，就是其声明时所在的作用域，与其运行时所在的作用域无关。
  4.参数
  - 函数运行的时候，有时需要提供外部数据，不同的外部数据会得到不同的结果，这种外部数据就叫参数。
  - 函数参数不是必需的，JavaScript 允许省略参数。
  - 函数参数如果是原始类型的值（数值、字符串、布尔值），传递方式是传值传递（passes by value）。这意味着，在函数体内修改参数值，不会影响到函数外部。
  - 如果有同名的参数，则取最后出现的那个值。
  - arguments 对象，由于 JavaScript 允许函数有不定数目的参数，所以需要一种机制，可以在函数体内部读取所有参数。
  - 与数组的关系，需要注意的是，虽然arguments很像数组，但它是一个对象。数组专有的方法（比如slice和forEach），不能在arguments对象上直接使用。
  - callee 属性，arguments对象带有一个callee属性，返回它所对应的原函数。
  5.函数的其他知识点
  - 闭包，闭包的最大用处有两个，一个是可以读取函数内部的变量，另一个就是让这些变量始终保持在内存中，即闭包可以使得它诞生环境一直存在。
  - 闭包的另一个用处，是封装对象的私有属性和私有方法。
  - 立即调用的函数表达式（IIFE）
  6.eval 命令
  - eval命令接受一个字符串作为参数，并将这个字符串当作语句执行。
  - eval 的别名调用
  <!-- 数组 -->
  1.数组（array）是按次序排列的一组值。每个值的位置都有编号（从0开始），整个数组用方括号表示。
  2.数组的本质，本质上，数组属于一种特殊的对象。typeof运算符会返回数组的类型是object。
  3.length 属性，数组的length属性，返回数组的成员数量。
  4.in 运算符，检查某个键名是否存在的运算符in，适用于对象，也适用于数组。
  5.for...in 循环和数组的遍历，for...in循环不仅可以遍历对象，也可以遍历数组，毕竟数组只是一种特殊对象。
  6.数组的空位，当数组的某个位置是空元素，即两个逗号之间没有任何值，我们称该数组存在空位（hole）。
  7.类似数组的对象，如果一个对象的所有键名都是正整数或零，并且有length属性，那么这个对象就很像数组，语法上称为“类似数组的对象”（array-like object）。
  <!-- 运算符 -->
  1.算术运算符
  - 加法运算符：x + y
  - 减法运算符： x - y
  - 乘法运算符： x * y
  - 除法运算符：x / y
  - 指数运算符：x ** y
  - 余数运算符：x % y
  - 自增运算符：++x 或者 x++
  - 自减运算符：--x 或者 x--
  - 数值运算符： +x
  - 负数值运算符：-x
  2.比较运算符
  - 大于运算符：> 
  - 小于运算符：< 
  - 小于或等于运算符：<= 
  - 大于或等于运算符：>= 
  - 相等运算符：== 
  - 严格相等运算符：=== 
  - 不相等运算符：!= 
  - 严格不相等运算符：!== 
  3.布尔运算符
  - 取反运算符：!
  - 且运算符：&&
  - 或运算符：||
  - 三元运算符：?:
  4.二进制位运算符
  - 二进制或运算符（or）：符号为|，表示若两个二进制位都为0，则结果为0，否则为1。
  - 二进制与运算符（and）：符号为&，表示若两个二进制位都为1，则结果为1，否则为0。
  - 二进制否运算符（not）：符号为~，表示对一个二进制位取反。
  - 异或运算符（xor）：符号为^，表示若两个二进制位不相同，则结果为1，否则为0。
  - 左移运算符（left shift）：符号为<<，详见下文解释。
  - 右移运算符（right shift）：符号为>>，详见下文解释。
  - 头部补零的右移运算符（zero filled right shift）：符号为>>>，详见下文解释。
  5.其他运算符，运算顺序
  - void运算符的作用是执行一个表达式，然后不返回任何值，或者说返回undefined。
  - 逗号运算符用于对两个表达式求值，并返回后一个表达式的值。
  - 运算顺序
  <!-- 数据类型的转换 -->
  1.JavaScript 是一种动态类型语言，变量没有类型限制，可以随时赋予任意值。
  2.强制转换
  - Number()，使用Number函数，可以将任意类型的值转化成数值。
  - String()，String函数可以将任意类型的值转化成字符串。
  - Boolean()函数可以将任意类型的值转为布尔值。
  3.自动转换
  - 第一种情况，不同类型的数据互相运算。
  - 第二种情况，对非布尔值类型的数据求布尔值。
  - 第三种情况，对非数值类型的值使用一元运算符（即+和-）。
  <!-- 错误处理机制 -->
  1.Error 实例对象
  - JavaScript 解析或运行时，一旦发生错误，引擎就会抛出一个错误对象。JavaScript 原生提供Error构造函数，所有抛出的错误都是这个构造函数的实例。
  2.原生错误类型
  - SyntaxError对象是解析代码时发生的语法错误。
  - ReferenceError对象是引用一个不存在的变量时发生的错误。
  - RangeError对象是一个值超出有效范围时发生的错误。主要有几种情况，一是数组长度为负数，二是Number对象的方法参数超出范围，以及函数堆栈超过最大值。
  - TypeError对象是变量或参数不是预期类型时发生的错误。
  - URIError对象是 URI 相关函数的参数不正确时抛出的错误，主要涉及encodeURI()、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape()和unescape()这六个函数。
  - EvalError 对象，eval函数没有被正确执行时，会抛出EvalError错误。
  总结，以上这6种派生错误，连同原始的Error对象，都是构造函数。开发者可以使用它们，手动生成错误对象的实例。这些构造函数都接受一个参数，代表错误提示信息（message）。
  3.自定义错误，除了 JavaScript 原生提供的七种错误对象，还可以定义自己的错误对象。
  4.throw语句的作用是手动中断程序执行，抛出一个错误。
  5.try...catch 结构，一旦发生错误，程序就中止执行了。
  6.finally 代码块，try...catch结构允许在最后添加一个finally代码块，表示不管是否出现错误，都必需在最后运行的语句。
  <!-- 编程风格 -->
  1.“编程风格”（programming style）指的是编写代码的样式规则。
  2.缩进，行首的空格和 Tab 键，都可以产生代码缩进效果（indent）。
  3.区块，如果循环和判断的代码体只有一行，JavaScript 允许该区块（block）省略大括号。
  4.圆括号（parentheses），在 JavaScript 中有两种作用，一种表示函数的调用，另一种表示表达式的组合（grouping）。
  5.行尾的分号，分号表示一条语句的结束。JavaScript 允许省略行尾的分号。
  6.全局变量，JavaScript 最大的语法缺点，可能就是全局变量对于任何一个代码块，都是可读可写。这对代码的模块化和重复使用，非常不利。
  7.变量声明，JavaScript 会自动将变量声明“提升”（hoist）到代码块（block）的头部。
  8.with 语句，with可以减少代码的书写，但是会造成混淆。
  9.相等和严格相等，JavaScript 有两个表示相等的运算符：“相等”（==）和“严格相等”（===）。
  10.语句的合并，有些程序员追求简洁，喜欢合并不同目的的语句。
  11.自增（++）和自减（--）运算符，放在变量的前面或后面，返回的值不一样，很容易发生错误。
  12.switch...case 结构，switch...case结构要求，在每一个case的最后一行必须是break语句，否则会接着运行下一个case。
  <!-- console 对象与控制台 -->
  1.console.log()，console.info()，console.debug()
  - 方法用于在控制台输出信息。
  2.console.warn()，console.error()
  - 方法用于在控制台输出警告信息。
  3.console.table()
  - 对于某些复合类型的数据，console.table方法可以将其转为表格显示。
  4.console.count()
  - count方法用于计数，输出它被调用了多少次。
  5.console.dir()，console.dirxml()
  - dir方法用来对一个对象进行检查（inspect），并以易于阅读和打印的格式显示。
  6.console.assert()
  - console.assert方法主要用于程序运行过程中，进行条件判断，如果不满足条件，就显示一个错误，但不会中断程序执行。这样就相当于提示用户，内部状态不正确。
  7.console.time()，console.timeEnd()
  - 这两个方法用于计时，可以算出一个操作所花费的准确时间。
  8.console.group()，console.groupEnd()，console.groupCollapsed()
  - console.group和console.groupEnd这两个方法用于将显示的信息分组。它只在输出大量信息时有用，分在一组的信息，可以用鼠标折叠/展开。
  9.console.trace()，console.clear()
  - console.trace方法显示当前执行的代码在堆栈中的调用路径。
  - console.clear方法用于清除当前控制台的所有输出，将光标回置到第一行。
  10.控制台命令行 API
  - $_属性返回上一个表达式的值。
  - $0 - $4，控制台保存了最近5个在 Elements 面板选中的 DOM 元素，$0代表倒数第一个（最近一个），$1代表倒数第二个，以此类推直到$4。
  - $(selector)返回第一个匹配的元素，等同于document.querySelector()。
  - $$(selector)返回选中的 DOM 对象，等同于document.querySelectorAll。
  - $x(path)方法返回一个数组，包含匹配特定 XPath 表达式的所有 DOM 元素。
  - inspect(object)方法打开相关面板，并选中相应的元素，显示它的细节。
  - getEventListeners(object)方法返回一个对象，该对象的成员为object登记了回调函数的各种事件（比如click或keydown），每个事件对应一个数组，数组的成员为该事件的回调函数。
  - keys(object)方法返回一个数组，包含object的所有键名。
  - values(object)方法返回一个数组，包含object的所有键值。
  - monitorEvents(object[, events])方法监听特定对象上发生的特定事件。事件发生时，会返回一个Event对象，包含该事件的相关信息。
  - unmonitorEvents方法用于停止监听。
  - monitorEvents允许监听同一大类的事件。所有事件可以分成四个大类。
    mouse："mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel"
    key："keydown", "keyup", "keypress", "textInput"
    touch："touchstart", "touchmove", "touchend", "touchcancel"
    control："resize", "scroll", "zoom", "focus", "blur", "select", "change", "submit", "reset"
  11.其他方法
  - clear()：清除控制台的历史。
  - copy(object)：复制特定 DOM 元素到剪贴板。
  - dir(object)：显示特定对象的所有属性，是console.dir方法的别名。
  - dirxml(object)：显示特定对象的 XML 形式，是console.dirxml方法的别名。
  12.debugger 语句
  - debugger语句主要用于除错，作用是设置断点。
  <!-- Object 对象 -->
  1.Object()
  - Object本身是一个函数，可以当作工具方法使用，将任意值转为对象。
  2.Object 构造函数
  - Object不仅可以当作工具函数使用，还可以当作构造函数使用，即前面可以使用new命令。
  3.Object 的静态方法
  - Object.keys方法的参数是一个对象，返回一个数组。该数组的成员都是该对象自身的（而不是继承的）所有属性名。
  - Object.getOwnPropertyNames方法与Object.keys类似，也是接受一个对象作为参数，返回一个数组，包含了该对象自身的所有属性名。
  4.对象属性模型的相关方法
  - Object.getOwnPropertyDescriptor()：获取某个属性的描述对象。
  - Object.defineProperty()：通过描述对象，定义某个属性。
  - Object.defineProperties()：通过描述对象，定义多个属性。
  5.控制对象状态的方法
  - Object.preventExtensions()：防止对象扩展。
  - Object.isExtensible()：判断对象是否可扩展。
  - Object.seal()：禁止对象配置。
  - Object.isSealed()：判断一个对象是否可配置。
  - Object.freeze()：冻结一个对象。
  - Object.isFrozen()：判断一个对象是否被冻结。
  6.原型链相关方法
  - Object.create()：该方法可以指定原型对象和属性，返回一个新的对象。
  - Object.getPrototypeOf()：获取对象的Prototype对象。
  7.Object 的实例方法
  - Object.prototype.valueOf()：返回当前对象对应的值。
  - Object.prototype.toString()：返回当前对象对应的字符串形式。
  - Object.prototype.toLocaleString()：返回当前对象对应的本地字符串形式。
  - Object.prototype.hasOwnProperty()：判断某个属性是否为当前对象自身的属性，还是继承自原型对象的属性。
  - Object.prototype.isPrototypeOf()：判断当前对象是否为另一个对象的原型。
  - Object.prototype.propertyIsEnumerable()：判断某个属性是否可枚举。
  <!-- 属性描述对象 -->
  JavaScript 提供了一个内部数据结构，用来描述对象的属性，控制它的行为，比如该属性是否可写、可遍历等等。这个内部数据结构称为“属性描述对象”（attributes object）。
  属性描述对象提供6个元属性。
  - value是该属性的属性值，默认为undefined。
  - writable是一个布尔值，表示属性值（value）是否可改变（即是否可写），默认为true。
  - enumerable是一个布尔值，表示该属性是否可遍历，默认为true。如果设为false，会使得某些操作（比如for...in循环、Object.keys()）跳过该属性。
  - configurable是一个布尔值，表示可配置性，默认为true。如果设为false，将阻止某些操作改写该属性，比如无法删除该属性，也不得改变该属性的属性描述对象（value属性除外）。也就是说，configurable属性控制了属性描述对象的可写性。
  - get是一个函数，表示该属性的取值函数（getter），默认为undefined。
  - set是一个函数，表示该属性的存值函数（setter），默认为undefined。

  1.Object.getOwnPropertyDescriptor()方法可以获取属性描述对象。它的第一个参数是目标对象，第二个参数是一个字符串，对应目标对象的某个属性名。
  2.Object.getOwnPropertyNames方法返回一个数组，成员是参数对象自身的全部属性的属性名，不管该属性是否可遍历。
  3.Object.defineProperty()方法允许通过属性描述对象，定义或修改一个属性，然后返回修改后的对象。
  4.propertyIsEnumerable()方法返回一个布尔值，用来判断某个属性是否可遍历。注意，这个方法只能用于判断对象自身的属性，对于继承的属性一律返回false。
  5.原属性，属性描述对象的各个属性称为“元属性”，因为它们可以看作是控制属性的属性。
  - value属性是目标属性的值。
  - writable属性是一个布尔值，决定了目标属性的值（value）是否可以被改变。
  - enumerable（可遍历性）返回一个布尔值，表示目标属性是否可遍历。
  - configurable(可配置性）返回一个布尔值，决定了是否可以修改属性描述对象。
  6.存取器
  - 除了直接定义以外，属性还可以用存取器（accessor）定义。其中，存值函数称为setter，使用属性描述对象的set属性；取值函数称为getter，使用属性描述对象的get属性。
  7.对象的拷贝
  - 为了解决这个问题，我们可以通过Object.defineProperty方法来拷贝属性。
  8.控制对象状态
  - Object.preventExtensions方法可以使得一个对象无法再添加新的属性。
  - Object.isExtensible方法用于检查一个对象是否使用了Object.preventExtensions方法。
  - Object.seal方法使得一个对象既无法添加新属性，也无法删除旧属性。
  - Object.isSealed方法用于检查一个对象是否使用了Object.seal方法。
  - Object.freeze方法可以使得一个对象无法添加新属性、无法删除旧属性、也无法改变属性的值，使得这个对象实际上变成了常量。
  - Object.isFrozen方法用于检查一个对象是否使用了Object.freeze方法。
  - 局限性，上面的三个方法锁定对象的可写性有一个漏洞：可以通过改变原型对象，来为对象增加属性。
  <!-- Array 对象 -->
  1.Array是 JavaScript 的原生对象，同时也是一个构造函数，可以用它生成新的数组。
  2.Array.isArray()，方法返回一个布尔值，表示参数是否为数组。
  3.valueOf()，方法是一个所有对象都拥有的方法，表示对该对象求值。
  4.toString()，方法也是对象的通用方法，数组的toString方法返回数组的字符串形式。
  5.push()，push方法用于在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度。
  6.pop()，pop方法用于删除数组的最后一个元素，并返回该元素。
  7.shift()，shift()方法用于删除数组的第一个元素，并返回该元素。
  8.unshift()，unshift()方法用于在数组的第一个位置添加元素，并返回添加新元素后的数组长度。
  9.join()，join()方法以指定参数作为分隔符，将所有数组成员连接为一个字符串返回。
  10.concat()，concat方法用于多个数组的合并。它将新数组的成员，添加到原数组成员的后部，然后返回一个新数组，原数组不变。
  11.reverse()，reverse方法用于颠倒排列数组元素，返回改变后的数组。注意，该方法将改变原数组。
  12.slice()，slice方法用于提取目标数组的一部分，返回一个新数组，原数组不变。
  13.splice()，splice方法用于删除原数组的一部分成员，并可以在删除的位置添加新的数组成员，返回值是被删除的元素。注意，该方法会改变原数组。
  14.sort()，sort方法对数组成员进行排序，默认是按照字典顺序排序。排序后，原数组将被改变。
  15.map()，map方法将数组的所有成员依次传入参数函数，然后把每一次的执行结果组成一个新数组返回。
  15.forEach()，forEach方法与map方法很相似，也是对数组的所有成员依次执行参数函数。但是，forEach方法不返回值，只用来操作数据。
  16.filter()，filter方法用于过滤数组成员，满足条件的成员组成一个新数组返回。
  17.some()，some方法是只要一个成员的返回值是true，则整个some方法的返回值就是true，否则返回false。
  18.every()，every方法是所有成员的返回值都是true，整个every方法才返回true，否则返回false。
  19.reduce()，reduce是从左到右处理（从第一个成员到最后一个成员）。
  20.reduceRight()，reduceRight则是从右到左（从最后一个成员到第一个成员），其他完全一样。
  21.indexOf()，indexOf方法返回给定元素在数组中第一次出现的位置，如果没有出现则返回-1。
  22.lastIndexOf()，lastIndexOf方法返回给定元素在数组中最后一次出现的位置，如果没有出现则返回-1。
  23.链式使用
  <!-- 包装对象 -->
  1.valueOf()
  - valueOf()方法返回包装对象实例对应的原始类型的值。
  2.toString()
  - toString()方法返回对应的字符串形式。
  3.原始类型与实例对象的自动转换
  - 原始类型的值会自动当作包装对象调用，即调用包装对象的属性和方法。
  4.自定义方法
  - 除了原生的实例方法，包装对象还可以自定义方法和属性，供原始类型的值直接调用。
  <!-- Boolean 对象 -->
  1.Boolean对象是 JavaScript 的三个包装对象之一。作为构造函数，它主要用于生成布尔值的包装对象实例。
  2.Boolean 函数的类型转换作用
  - Boolean对象除了可以作为构造函数，还可以单独使用，将任意值转为布尔值。这时Boolean就是一个单纯的工具方法。
  <!-- Number 对象 -->
  1.Number对象是数值对应的包装对象，可以作为构造函数使用，也可以作为工具函数使用。
  2.静态属性
  - Number.POSITIVE_INFINITY：正的无限，指向Infinity。
  - Number.NEGATIVE_INFINITY：负的无限，指向-Infinity。
  - Number.NaN：表示非数值，指向NaN。
  - Number.MIN_VALUE：表示最小的正数（即最接近0的正数，在64位浮点数体系中为5e-324），相应的，最接近0的负数为-Number.MIN_VALUE。
  - Number.MAX_SAFE_INTEGER：表示能够精确表示的最大整数，即9007199254740991。
  - Number.MIN_SAFE_INTEGER：表示能够精确表示的最小整数，即-9007199254740991。
  3.实例方法
  - Number.prototype.toString()，Number对象部署了自己的toString方法，用来将一个数值转为字符串形式。
  - Number.prototype.toFixed()，toFixed()方法先将一个数转为指定位数的小数，然后返回这个小数对应的字符串。
  - Number.prototype.toExponential()，toExponential方法用于将一个数转为科学计数法形式。
  - Number.prototype.toPrecision()，toPrecision方法用于将一个数转为指定位数的有效数字。
  4.自定义方法
  - 与其他对象一样，Number.prototype对象上面可以自定义方法，被Number的实例继承。
  <!-- String 对象 -->
  1.String对象是 JavaScript 原生提供的三个包装对象之一，用来生成字符串对象。
  2.静态方法
  - String.fromCharCode()，该方法的参数是一个或多个数值，代表 Unicode 码点，返回值是这些码点组成的字符串。
  3.实例属性
  - String.prototype.length，字符串实例的length属性返回字符串的长度。
  4.实例方法
  - String.prototype.charAt()，charAt方法返回指定位置的字符，参数是从0开始编号的位置。
  - String.prototype.charCodeAt()，charCodeAt方法返回字符串指定位置的 Unicode 码点（十进制表示），相当于String.fromCharCode()的逆操作。
  - String.prototype.concat()，concat方法用于连接两个字符串，返回一个新字符串，不改变原字符串。
  - String.prototype.slice()，slice方法用于从原字符串取出子字符串并返回，不改变原字符串。它的第一个参数是子字符串的开始位置，第二个参数是子字符串的结束位置（不含该位置）。
  - String.prototype.substring()，substring方法用于从原字符串取出子字符串并返回，不改变原字符串，跟slice方法很相像。它的第一个参数表示子字符串的开始位置，第二个位置表示结束位置（返回结果不含该位置）。
  - String.prototype.substr()，substr方法用于从原字符串取出子字符串并返回，不改变原字符串，跟slice和substring方法的作用相同。
  - String.prototype.indexOf()，indexOf方法用于确定一个字符串在另一个字符串中第一次出现的位置，返回结果是匹配开始的位置。如果返回-1，就表示不匹配。
  - String.prototype.lastIndexOf()，lastIndexOf方法的用法跟indexOf方法一致，主要的区别是lastIndexOf从尾部开始匹配，indexOf则是从头部开始匹配。
  - String.prototype.trim()，trim方法用于去除字符串两端的空格，返回一个新字符串，不改变原字符串。
  - String.prototype.toLowerCase()，toLowerCase方法用于将一个字符串全部转为小写，返回一个新字符串，不改变原字符串。
  - String.prototype.toUpperCase()，toUpperCase则是全部转为大写，返回一个新字符串，不改变原字符串。
  - String.prototype.match()，match方法用于确定原字符串是否匹配某个子字符串，返回一个数组，成员为匹配的第一个字符串。如果没有找到匹配，则返回null。
  - String.prototype.search()，search方法的用法基本等同于match，但是返回值为匹配的第一个位置。如果没有找到匹配，则返回-1。
  - String.prototype.replace()，replace方法用于替换匹配的子字符串，一般情况下只替换第一个匹配（除非使用带有g修饰符的正则表达式）。
  - String.prototype.split()，split方法按照给定规则分割字符串，返回一个由分割出来的子字符串组成的数组。
  - String.prototype.localeCompare()，localeCompare方法用于比较两个字符串。它返回一个整数，如果小于0，表示第一个字符串小于第二个字符串；如果等于0，表示两者相等；如果大于0，表示第一个字符串大于第二个字符串。
  <!-- Math 对象 -->
  1.Math是 JavaScript 的原生对象，提供各种数学功能。
  2.静态方法
  - Math.abs()：绝对值
  - Math.ceil()：向上取整
  - Math.floor()：向下取整
  - Math.max()：最大值
  - Math.min()：最小值
  - Math.pow()：指数运算
  - Math.sqrt()：平方根
  - Math.log()：自然对数
  - Math.exp()：e的指数
  - Math.round()：四舍五入
  - Math.random()：随机数
  3.三角函数方法
  - Math.sin()：返回参数的正弦（参数为弧度值）
  - Math.cos()：返回参数的余弦（参数为弧度值）
  - Math.tan()：返回参数的正切（参数为弧度值）
  - Math.asin()：返回参数的反正弦（返回值为弧度值）
  - Math.acos()：返回参数的反余弦（返回值为弧度值）
  - Math.atan()：返回参数的反正切（返回值为弧度值）
  <!-- Date 对象 -->
  1.Date对象是 JavaScript 原生的时间库。Date对象可以作为普通函数直接调用，返回一个代表当前时间的字符串。
  2.构造函数的用法，Date还可以当作构造函数使用。对它使用new命令，会返回一个Date对象的实例。
  3.日期的运算
  4.静态方法
  - Date.now()，返回当前时间距离时间零点（1970年1月1日 00:00:00 UTC）的毫秒数，相当于 Unix 时间戳乘以1000。
  - Date.parse()，用来解析日期字符串，返回该时间距离时间零点（1970年1月1日 00:00:00）的毫秒数。
  - Date.UTC()，接受年、月、日等变量作为参数，返回该时间距离时间零点（1970年1月1日 00:00:00 UTC）的毫秒数。
  - Date.prototype.valueOf()，返回实例对象距离时间零点（1970年1月1日00:00:00 UTC）对应的毫秒数，该方法等同于getTime方法。
  5.实例方法，Date的实例对象，有几十个自己的方法，除了valueOf和toString，可以分为以下三类。
  - to类：从Date对象返回一个字符串，表示指定的时间。
  - get类：获取Date对象的日期和时间。
  - set类：设置Date对象的日期和时间。
  6.to 类方法
  - Date.prototype.toString()，toString方法返回一个完整的日期字符串。
  - Date.prototype.toUTCString()，toUTCString方法返回对应的 UTC 时间，也就是比北京时间晚8个小时。
  - Date.prototype.toISOString()，toISOString方法返回对应时间的 ISO8601 写法。
  - Date.prototype.toJSON()，toJSON方法返回一个符合 JSON 格式的 ISO 日期字符串，与toISOString方法的返回结果完全相同。
  - Date.prototype.toDateString()，toDateString方法返回日期字符串（不含小时、分和秒）。
  - Date.prototype.toTimeString()，toTimeString方法返回时间字符串（不含年月日）。
  - 本地时间
    Date.prototype.toLocaleString()：完整的本地时间。
    Date.prototype.toLocaleDateString()：本地日期（不含小时、分和秒）。
    Date.prototype.toLocaleTimeString()：本地时间（不含年月日）。
  7.get 类方法
  - getTime()：返回实例距离1970年1月1日00:00:00的毫秒数，等同于valueOf方法。
  - getDate()：返回实例对象对应每个月的几号（从1开始）。
  - getDay()：返回星期几，星期日为0，星期一为1，以此类推。
  - getFullYear()：返回四位的年份。
  - getMonth()：返回月份（0表示1月，11表示12月）。
  - getHours()：返回小时（0-23）。
  - getMilliseconds()：返回毫秒（0-999）。
  - getMinutes()：返回分钟（0-59）。
  - getSeconds()：返回秒（0-59）。
  - getTimezoneOffset()：返回当前时间与 UTC 的时区差异，以分钟表示，返回结果考虑到了夏令时因素。
  8.set 类方法
  - setDate(date)：设置实例对象对应的每个月的几号（1-31），返回改变后毫秒时间戳。
  - setFullYear(year [, month, date])：设置四位年份。
  - setHours(hour [, min, sec, ms])：设置小时（0-23）。
  - setMilliseconds()：设置毫秒（0-999）。
  - setMinutes(min [, sec, ms])：设置分钟（0-59）。
  - setMonth(month [, date])：设置月份（0-11）。
  - setSeconds(sec [, ms])：设置秒（0-59）。
  - setTime(milliseconds)：设置毫秒时间戳。
  <!-- RegExp 对象 -->
  1.实例属性
  - RegExp.prototype.ignoreCase：返回一个布尔值，表示是否设置了i修饰符。
  - RegExp.prototype.global：返回一个布尔值，表示是否设置了g修饰符。
  - RegExp.prototype.multiline：返回一个布尔值，表示是否设置了m修饰符。
  - RegExp.prototype.flags：返回一个字符串，包含了已经设置的所有修饰符，按字母排序。
  2.实例方法
  - RegExp.prototype.test()，正则实例对象的test方法返回一个布尔值，表示当前模式是否能匹配参数字符串。
  - RegExp.prototype.exec()，正则实例对象的exec方法，用来返回匹配结果。如果发现匹配，就返回一个数组，成员是匹配成功的子字符串，否则返回null。
  3.字符串的实例方法
  - String.prototype.match()：返回一个数组，成员是所有匹配的子字符串。
  - String.prototype.search()：按照给定的正则表达式进行搜索，返回一个整数，表示匹配开始的位置。
  - String.prototype.replace()：按照给定的正则表达式进行替换，返回替换后的字符串。
  - String.prototype.split()：按照给定规则进行字符串分割，返回一个数组，包含分割后的各个成员。
  4.匹配规则
  - 字面量字符和元字符
  * 点字符（.)，点字符（.）匹配除回车（\r）、换行(\n) 、行分隔符（\u2028）和段分隔符（\u2029）以外的所有字符。
  * 位置字符用来提示字符所处的位置，主要有两个字符。^ 表示字符串的开始位置，$ 表示字符串的结束位置。
  * 选择符（|），竖线符号（|）在正则表达式中表示“或关系”（OR），即cat|dog表示匹配cat或dog。
  - 转义符，正则表达式中那些有特殊含义的元字符，如果要匹配它们本身，就需要在它们前面要加上反斜杠。
  - 特殊字符，正则表达式对一些不能打印的特殊字符，提供了表达方法：
    * \cX 表示Ctrl-[X]，其中的X是A-Z之中任一个英文字母，用来匹配控制字符。
    *   [\b] 匹配退格键(U+0008)，不要与\b混淆。
    *  \n 匹配换行键。
    *  \r 匹配回车键。
    *  \t 匹配制表符 tab（U+0009）。
    *  \v 匹配垂直制表符（U+000B）。
    *  \f 匹配换页符（U+000C）。
    *  \0 匹配null字符（U+0000）。
    *  \xhh 匹配一个以两位十六进制数（\x00-\xFF）表示的字符。
    * \uhhhh 匹配一个以四位十六进制数（\u0000-\uFFFF）表示的 Unicode 字符。
  - 字符类，字符类（class）表示有一系列字符可供选择，只要匹配其中一个就可以了。
    * 脱字符（^），如果方括号内的第一个字符是[^]，则表示除了字符类之中的字符，其他字符都可以匹配。
    * 连字符（-），某些情况下，对于连续序列的字符，连字符（-）用来提供简写形式，表示字符的连续范围。
  - 预定义模式：
    \d 匹配0-9之间的任一数字，相当于[0-9]。
    \D 匹配所有0-9以外的字符，相当于[^0-9]。
    \w 匹配任意的字母、数字和下划线，相当于[A-Za-z0-9_]。
    \W 除所有字母、数字和下划线以外的字符，相当于[^A-Za-z0-9_]。
    \s 匹配空格（包括换行符、制表符、空格符等），相等于[ \t\r\n\v\f]。
    \S 匹配非空格的字符，相当于[^ \t\r\n\v\f]。
    \b 匹配词的边界。
    \B 匹配非词边界，即在词的内部。
  - 重复类，模式的精确匹配次数，使用大括号（{}）表示。
  - 量词符：
    ? 问号表示某个模式出现0次或1次，等同于{0, 1}。
    * 星号表示某个模式出现0次或多次，等同于{0,}。
    + 加号表示某个模式出现1次或多次，等同于{1,}。
  - 贪婪模式，上一小节的三个量词符，默认情况下都是最大可能匹配，即匹配直到下一个字符不满足匹配规则为止。这被称为贪婪模式。
  - 修饰符，修饰符（modifier）表示模式的附加规则，放在正则模式的最尾部。
    * g 修饰符，g修饰符表示全局匹配（global），加上它以后，正则对象将匹配全部符合条件的结果，主要用于搜索和替换。
    * i 修饰符，默认情况下，正则对象区分字母的大小写，加上i修饰符以后表示忽略大小写（ignoreCase）。
    * m 修饰符，m修饰符表示多行模式（multiline），会修改^和$的行为。
  - 组匹配，正则表达式的括号表示分组匹配，括号中的模式可以用来匹配分组的内容。
  - 非捕获组，(?:x)称为非捕获组（Non-capturing group），表示不返回该组匹配的内容，即匹配的结果中不计入这个括号。
  - 先行断言，x(?=y)称为先行断言（Positive look-ahead），x只有在y前面才匹配，y不会被计入返回结果。
  - 先行否定断言，x(?!y)称为先行否定断言（Negative look-ahead），x只有不在y前面才匹配，y不会被计入返回结果。
  <!-- JSON 对象 -->
  1.JSON 格式（JavaScript Object Notation 的缩写）是一种用于数据交换的文本格式，
  - 规定：
    复合类型的值只能是数组或对象，不能是函数、正则表达式对象、日期对象。
    原始类型的值只有四种：字符串、数值（必须以十进制表示）、布尔值和null（不能使用NaN, Infinity, -Infinity和undefined）。
    字符串必须使用双引号表示，不能使用单引号。
    对象的键名必须放在双引号里面。
    数组或对象最后一个成员的后面，不能加逗号。
  - JSON.stringify()，JSON.stringify方法用于将一个值转为 JSON 字符串。该字符串符合 JSON 格式，并且可以被JSON.parse方法还原。
  - JSON.parse()，JSON.parse方法用于将 JSON 字符串转换成对应的值。
  <!-- 实例对象与 new 命令 -->
  1.对象是什么？
  - 对象是单个实物的抽象。
  - 对象是一个容器，封装了属性（property）和方法（method）。
  2.构造函数
  - 函数体内部使用了this关键字，代表了所要生成的对象实例。
  - 生成对象的时候，必须使用new命令。
  3.new 命令
  - new 命令的原理：
    创建一个空对象，作为将要返回的对象实例。
    将这个空对象的原型，指向构造函数的prototype属性。
    将这个空对象赋值给函数内部的this关键字。
    开始执行构造函数内部的代码。
  - new.target
    函数内部可以使用new.target属性。如果当前函数是new命令调用，new.target指向当前函数，否则为undefined。
  4.Object.create() 创建实例对象
  构造函数作为模板，可以生成实例对象。但是，有时拿不到构造函数，只能拿到一个现有的对象。我们希望以这个现有的对象作为模板，生成新的实例对象，这时就可以使用Object.create()方法。
  <!-- this 关键字 -->
  1.this就是属性或方法“当前”所在的对象。
  2.JavaScript 语言之所以有 this 的设计，跟内存里面的数据结构有关系。
  3.使用场合
  - 全局环境，全局环境使用this，它指的就是顶层对象window。
  - 构造函数，构造函数中的this，指的是实例对象。
  - 对象的方法，如果对象的方法里面包含this，this的指向就是方法运行时所在的对象。该方法赋值给另一个对象，就会改变this的指向。
  4.使用注意点 
  - 避免多层 this，由于this的指向是不确定的，所以切勿在函数中包含多层的this。
  - 避免数组处理方法中的 this，数组的map和foreach方法，允许提供一个函数作为参数。
  - 避免回调函数中的 this，回调函数中的this往往会改变指向，最好避免使用。
  5.绑定 this 的方法
  - Function.prototype.call()，函数实例的call方法，可以指定函数内部this的指向（即函数执行时所在的作用域），然后在所指定的作用域中，调用该函数。
  - Function.prototype.apply()，apply方法的作用与call方法类似，也是改变this指向，然后再调用该函数。一的区别就是，它接收一个数组作为函数执行时的参数。
  - Function.prototype.bind()，bind方法用于将函数体内的this绑定到某个对象，然后返回一个新函数。
  <!-- 对象的继承 -->
  1.构造函数的缺点，同一个构造函数的多个实例之间，无法共享属性，从而造成对系统资源的浪费。
  2.prototype 属性的作用，JavaScript 规定，每个函数都有一个prototype属性，指向一个对象。
  3.原型链，JavaScript 规定，所有对象都有自己的原型对象（prototype）。一方面，任何一个对象，都可以充当其他对象的原型；另一方面，由于原型对象也是对象，所以它也有自己的原型。因此，就会形成一个“原型链”（prototype chain）：对象到原型，再到原型的原型……
  4.constructor 属性，prototype对象有一个constructor属性，默认指向prototype对象所在的构造函数。
  5.instanceof 运算符，instanceof运算符返回一个布尔值，表示对象是否为某个构造函数的实例。
  6.构造函数的继承
    // 第一步，子类继承父类的实例
    function Rectangle() {
      Shape.call(this); // 调用父类构造函数
    }
    // 另一种写法
    function Rectangle() {
      this.base = Shape;
      this.base();
    }

    // 第二步，子类继承父类的原型
    Rectangle.prototype = Object.create(Shape.prototype);
    Rectangle.prototype.constructor = Rectangle;
  7.多重继承
    function M1() {
      this.hello = 'hello';
    }

    function M2() {
      this.world = 'world';
    }

    function S() {
      M1.call(this);
      M2.call(this);
    }

    // 继承 M1
    S.prototype = Object.create(M1.prototype);
    // 继承链上加入 M2
    Object.assign(S.prototype, M2.prototype);

    // 指定构造函数
    S.prototype.constructor = S;

    var s = new S();
    s.hello // 'hello'
    s.world // 'world'
  8.模块
  - 模块是实现特定功能的一组属性和方法的封装。
  var module1 = new Object({
  　_count : 0,
  　m1 : function (){
  　　//...
  　},
  　m2 : function (){
    　//...
  　}
  });
  - 封装私有变量：构造函数的写法
  function StringBuilder() {
    var buffer = [];

    this.add = function (str) {
       buffer.push(str);
    };

    this.toString = function () {
      return buffer.join('');
    };

  }
  - 封装私有变量：立即执行函数的写法
  var module1 = (function () {
  　var _count = 0;
  　var m1 = function () {
  　  //...
  　};
  　var m2 = function () {
  　　//...
  　};
  　return {
  　　m1 : m1,
  　　m2 : m2
  　};
  })();
  9.模块的放大模式
  var module1 = (function (mod){
  　mod.m3 = function () {
  　　//...
  　};
  　return mod;
  })(module1);
  10.输入全局变量：独立性是模块的重要特点，模块内部最好不与程序的其他部分直接交互。
  var module1 = (function ($, YAHOO) {
  　//...
  })(jQuery, YAHOO);
  <!-- Object 对象的相关方法 -->
  1.Object.getPrototypeOf()，Object.getPrototypeOf方法返回参数对象的原型。这是获取原型对象的标准方法。
  2.Object.setPrototypeOf()，Object.setPrototypeOf方法为参数对象设置原型，返回该参数对象。它接受两个参数，第一个是现有对象，第二个是原型对象。
  3.Object.create()，生成实例对象的常用方法是，使用new命令让构造函数返回一个实例。
  4.Object.prototype.isPrototypeOf()，实例对象的isPrototypeOf方法，用来判断该对象是否为参数对象的原型。
  5.Object.prototype.__proto__，实例对象的__proto__属性（前后各两个下划线），返回该对象的原型。该属性可读写。
  6.获取原型对象方法的比较，获取实例对象obj的原型对象，有三种方法。
  - obj.__proto__
  - obj.constructor.prototype
  - Object.getPrototypeOf(obj)
  7.Object.getOwnPropertyNames()，Object.getOwnPropertyNames方法返回一个数组，成员是参数对象本身的所有属性的键名，不包含继承的属性键名。
  8.Object.prototype.hasOwnProperty()，对象实例的hasOwnProperty方法返回一个布尔值，用于判断某个属性定义在对象自身，还是定义在原型链上。
  9.in 运算符和 for...in 循环，in运算符返回一个布尔值，表示一个对象是否具有某个属性。它不区分该属性是对象自身的属性，还是继承的属性。
  10.对象的拷贝Object.getOwnPropertyDescriptors方法。
  <!-- 严格模式 -->
  1.设计目的
  - 明确禁止一些不合理、不严谨的语法，减少 JavaScript 语言的一些怪异行为。
  - 增加更多报错的场合，消除代码运行的一些不安全之处，保证代码运行的安全。
  - 提高编译器效率，增加运行速度。
  - 为未来新版本的 JavaScript 语法做好铺垫。
  2.启用方法，进入严格模式的标志，是一行字符串use strict。
  3.显式报错，严格模式使得 JavaScript 的语法变得更严格，更多的操作会显式报错。其中有些操作，在正常模式下只会默默地失败，不会报错。
  - 只读属性不可写
  - 只设置了取值器的属性不可写
  - 禁止扩展的对象不可扩展
  - eval、arguments 不可用作标识名
  - 函数不能有重名的参数
  - 禁止八进制的前缀0表示法
  4.增强的安全措施
  - 全局变量显式声明 
  - 禁止 this 关键字指向全局对象
  - 禁止使用 fn.callee、fn.caller
  - 禁止使用 arguments.callee、arguments.caller
  - 禁止删除变量
  5.静态绑定
  - 禁止使用 with 语句
  - 创设 eval 作用域
  - arguments 不再追踪参数的变化
  6.向下一个版本的 JavaScript 过渡
  - 非函数代码块不得声明函数
  - 保留字
  <!-- 异步操作概述 -->
  1.单线程模型，单线程模型指的是，JavaScript 只在一个线程上运行。
  2.同步任务和异步任务，程序里面所有的任务，可以分成两类：同步任务（synchronous）和异步任务（asynchronous）。
  3.任务队列和事件循环，JavaScript 运行时，除了一个正在运行的主线程，引擎还提供一个任务队列（task queue），里面是各种需要当前程序处理的异步任务。
  4.异步操作的模式
  - 回调函数，回调函数是异步操作最基本的方法。
  - 事件监听，另一种思路是采用事件驱动模式。异步任务的执行不取决于代码的顺序，而取决于某个事件是否发生。
  - 发布/订阅，事件完全可以理解成“信号”，如果存在一个“信号中心”，某个任务执行完成，就向信号中心“发布”（publish）一个信号，其他任务可以向信号中心“订阅”（subscribe）这个信号，从而知道什么时候自己可以开始执行。这就叫做”发布/订阅模式”（publish-subscribe pattern），又称“观察者模式”（observer pattern）。
  5.异步操作的流程控制
  - 串行执行，我们可以编写一个流程控制函数，让它来控制异步任务，一个任务完成以后，再执行另一个。这就叫串行执行。
  - 并行执行，流程控制函数也可以是并行执行，即所有异步任务同时执行，等到全部完成以后，才执行final函数。
  - 并行与串行的结合，所谓并行与串行的结合，就是设置一个门槛，每次最多只能并行执行n个异步任务，这样就避免了过分占用系统资源。
  <!-- 定时器 -->
  JavaScript 提供定时执行代码的功能，叫做定时器（timer），主要由setTimeout()和setInterval()这两个函数来完成。它们向任务队列添加定时任务。
  1.setTimeout()，setTimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。
  2.setInterval()，setInterval函数的用法与setTimeout完全一致，区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行。
  3.clearTimeout()，clearInterval()，setTimeout和setInterval函数，都返回一个整数值，表示计数器编号。将该整数传入clearTimeout和clearInterval函数，就可以取消对应的定时器。
  4.实例：debounce 函数
  5.运行机制，setTimeout和setInterval的运行机制，是将指定的代码移出本轮事件循环，等到下一轮事件循环，再检查是否到了指定时间。
  6.setTimeout(f, 0)，setTimeout(f, 0)会在下一轮事件循环一开始就执行。
  7.应用，setTimeout(f, 0)有几个非常重要的用途。它的一大应用是，可以调整事件的发生顺序。比如，网页开发中，某个事件先发生在子元素，然后冒泡到父元素，即子元素的事件回调函数，会早于父元素的事件回调函数触发。如果，想让父元素的事件回调函数先发生，就要用到setTimeout(f, 0)。
  <!-- Promise 对象 -->
  Promise 对象是 JavaScript 的异步操作解决方案，为异步操作提供统一接口。
  1.Promise 对象的状态，Promise 实例具有三种状态。
  - 异步操作未完成（pending）
  - 异步操作成功（fulfilled）
  - 异步操作失败（rejected）
  2.Promise 构造函数，JavaScript 提供原生的Promise构造函数，用来生成 Promise 实例。
  3.Promise.prototype.then()，Promise 实例的then方法，用来添加回调函数。then方法可以接受两个回调函数，第一个是异步操作成功时（变为fulfilled状态）的回调函数，第二个是异步操作失败（变为rejected）时的回调函数（该参数可以省略）。一旦状态改变，就调用相应的回调函数。
  4.then() 用法辨析
  5.实例：图片加载
  var preloadImage = function (path) {
    return new Promise(function (resolve, reject) {
      var image = new Image();
      image.onload  = resolve;
      image.onerror = reject;
      image.src = path;
    });
  };
  Promise 的优点在于，让回调函数变成了规范的链式写法，程序流程可以看得很清楚。Promise 的缺点是，编写的难度比传统写法高，而且阅读代码也不是一眼可以看懂。
  6.微任务，Promise 的回调函数属于异步任务，会在同步任务之后执行。
  new Promise(function (resolve, reject) {
    resolve(1);
  }).then(console.log);

  console.log(2);
  // 2
  // 1
  <!-- DOM 概述 -->
  1.DOM 的最小组成单位叫做节点（node）。节点的类型有七种。
  - Document：整个文档树的顶层节点
  - DocumentType：doctype标签（比如<!DOCTYPE html>）
  - Element：网页的各种HTML标签（比如<body>、<a>等）
  - Attribute：网页元素的属性（比如class="right"）
  - Text：标签之间或标签包含的文本
  - Comment：注释
  - DocumentFragment：文档的片段
  2.节点树
  一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是 DOM 树。除了根节点，其他节点都有三种层级关系。
  - 父节点关系（parentNode）：直接的那个上级节点
  - 子节点关系（childNodes）：直接的下级节点
  - 同级节点关系（sibling）：拥有同一个父节点的节点
  3.DOM 提供操作接口，用来获取这三种关系的节点。
  - 子节点接口包括firstChild（第一个子节点）lastChild（最后一个子节点）等属性
  - 同级节点接口包括nextSibling（紧邻在后的那个同级节点）previousSibling（紧邻在前的那个同级节点）属性。
  <!-- Node 接口 -->
  1.Node.prototype.nodeType，nodeType属性返回一个整数值，表示节点的类型。
  2.Node.prototype.nodeName，nodeName属性返回节点的名称。
  不同节点的nodeName属性值如下。
  - 文档节点（document）：#document
  - 元素节点（element）：大写的标签名
  - 属性节点（attr）：属性的名称
  - 文本节点（text）：#text
  - 文档片断节点（DocumentFragment）：#document-fragment
  - 文档类型节点（DocumentType）：文档的类型
  - 注释节点（Comment）：#comment
  3.Node.prototype.nodeValue，nodeValue属性返回一个字符串，表示当前节点本身的文本值，该属性可读写。只有文本节点（text）、注释节点（comment）和属性节点（attr）有文本值，因此这三类节点的nodeValue可以返回结果，其他类型的节点一律返回null。
  4.Node.prototype.textContent，textContent属性返回当前节点和它的所有后代节点的文本内容。
  5.Node.prototype.baseURI，baseURI属性返回一个字符串，表示当前网页的绝对路径。
  6.Node.prototype.ownerDocument，Node.ownerDocument属性返回当前节点所在的顶层文档对象，即document对象。
  7.Node.prototype.nextSibling，Node.nextSibling属性返回紧跟在当前节点后面的第一个同级节点。如果当前节点后面没有同级节点，则返回null。
  8.Node.prototype.previousSibling，previousSibling属性返回当前节点前面的、距离最近的一个同级节点。如果当前节点前面没有同级节点，则返回null。
  9.Node.prototype.parentNode，parentNode属性返回当前节点的父节点。对于一个节点来说，它的父节点只可能是三种类型：元素节点（element）、文档节点（document）和文档片段节点（documentfragment）。
  10.Node.prototype.parentElement，parentElement属性返回当前节点的父元素节点。如果当前节点没有父节点，或者父节点类型不是元素节点，则返回null。
  11.Node.prototype.firstChild，Node.prototype.lastChild，firstChild属性返回当前节点的第一个子节点，如果当前节点没有子节点，则返回null。lastChild属性返回当前节点的最后一个子节点，如果当前节点没有子节点，则返回null。用法与firstChild属性相同。
  12.Node.prototype.childNodes，childNodes属性返回一个类似数组的对象（NodeList集合），成员包括当前节点的所有子节点。
  13.Node.prototype.isConnected，isConnected属性返回一个布尔值，表示当前节点是否在文档之中。
  14.Node.prototype.appendChild()，appendChild()方法接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点。该方法的返回值就是插入文档的子节点。
  15.Node.prototype.hasChildNodes()，hasChildNodes方法返回一个布尔值，表示当前节点是否有子节点。
  - node.hasChildNodes()
  - node.firstChild !== null
  - node.childNodes && node.childNodes.length > 0
  hasChildNodes方法结合firstChild属性和nextSibling属性，可以遍历当前节点的所有后代节点。
  16.Node.prototype.cloneNode()，cloneNode方法用于克隆一个节点。它接受一个布尔值作为参数，表示是否同时克隆子节点。它的返回值是一个克隆出来的新节点。
  17.Node.prototype.insertBefore()，insertBefore方法用于将某个节点插入父节点内部的指定位置。
  18.Node.prototype.removeChild()，removeChild方法接受一个子节点作为参数，用于从当前节点移除该子节点。返回值是移除的子节点。
  19.Node.prototype.replaceChild()，replaceChild方法用于将一个新的节点，替换当前节点的某一个子节点。
  20.Node.prototype.contains()，contains方法返回一个布尔值，表示参数节点是否满足以下三个条件之一。
  - 参数节点为当前节点。
  - 参数节点为当前节点的子节点。
  - 参数节点为当前节点的后代节点。
  21.Node.prototype.compareDocumentPosition()，compareDocumentPosition方法的用法，与contains方法完全一致，返回一个六个比特位的二进制值，表示参数节点与当前节点的关系。
  22.Node.prototype.isEqualNode()，Node.prototype.isSameNode()，isEqualNode方法返回一个布尔值，用于检查两个节点是否相等。所谓相等的节点，指的是两个节点的类型相同、属性相同、子节点相同。
  23.Node.prototype.normalize()，normalize方法用于清理当前节点内部的所有文本节点（text）。它会去除空的文本节点，并且将毗邻的文本节点合并成一个，也就是说不存在空的文本节点，以及毗邻的文本节点。
  24.Node.prototype.getRootNode()，getRootNode()方法返回当前节点所在文档的根节点document，与ownerDocument属性的作用相同。
  <!-- NodeList 接口，HTMLCollection 接口 -->
  1.NodeList 接口，NodeList实例是一个类似数组的对象，它的成员是节点对象。通过以下方法可以得到NodeList实例。
  - Node.childNodes
  - document.querySelectorAll()等节点搜索方法
  2.NodeList.prototype.length，length属性返回 NodeList 实例包含的节点数量。
  3.NodeList.prototype.forEach()，forEach方法用于遍历 NodeList 的所有成员。它接受一个回调函数作为参数，每一轮遍历就执行一次这个回调函数，用法与数组实例的forEach方法完全一致。
  4.NodeList.prototype.item()，item方法接受一个整数值作为参数，表示成员的位置，返回该位置上的成员。
  5.NodeList.prototype.keys()，NodeList.prototype.values()，NodeList.prototype.entries() ，这三个方法都返回一个 ES6 的遍历器对象，可以通过for...of循环遍历获取每一个成员的信息。区别在于，keys()返回键名的遍历器，values()返回键值的遍历器，entries()返回的遍历器同时包含键名和键值的信息。
  6.HTMLCollection 接口，HTMLCollection是一个节点对象的集合，只能包含元素节点（element），不能包含其他类型的节点。
  7.HTMLCollection.prototype.length，length属性返回HTMLCollection实例包含的成员数量。
  8.HTMLCollection.prototype.item()，item方法接受一个整数值作为参数，表示成员的位置，返回该位置上的成员。
  9.HTMLCollection.prototype.namedItem()，namedItem方法的参数是一个字符串，表示id属性或name属性的值，返回对应的元素节点。如果没有对应的节点，则返回null。
  <!-- ParentNode 接口，ChildNode 接口 -->
  ParentNode接口表示当前节点是一个父节点，提供一些处理子节点的方法。ChildNode接口表示当前节点是一个子节点，提供一些相关方法。
  1.ParentNode.children，children属性返回一个HTMLCollection实例，成员是当前节点的所有元素子节点。该属性只读。
  2.ParentNode.firstElementChild，firstElementChild属性返回当前节点的第一个元素子节点。如果没有任何元素子节点，则返回null。
  3.ParentNode.lastElementChild，lastElementChild属性返回当前节点的最后一个元素子节点，如果不存在任何元素子节点，则返回null。
  4.ParentNode.childElementCount，childElementCount属性返回一个整数，表示当前节点的所有元素子节点的数目。如果不包含任何元素子节点，则返回0。
  5.ParentNode.append()，ParentNode.prepend()
  - append方法为当前节点追加一个或多个子节点，位置是最后一个元素子节点的后面。该方法不仅可以添加元素子节点，还可以添加文本子节点。
  - prepend方法为当前节点追加一个或多个子节点，位置是第一个元素子节点的前面。它的用法与append方法完全一致，也是没有返回值。
  6.ChildNode 接口
  - ChildNode.remove()，remove方法用于从父节点移除当前节点。
  - ChildNode.before()，ChildNode.after()，before方法用于在当前节点的前面，插入一个或多个同级节点。两者拥有相同的父节点。注意，该方法不仅可以插入元素节点，还可以插入文本节点。after方法用于在当前节点的后面，插入一个或多个同级节点，两者拥有相同的父节点。用法与before方法完全相同。
  - ChildNode.replaceWith()，replaceWith方法使用参数节点，替换当前节点。参数可以是元素节点，也可以是文本节点。
  <!-- Document 节点 -->
  1.document节点对象代表整个文档，每张网页都有自己的document对象。document对象有不同的办法可以获取。
  - 正常的网页，直接使用document或window.document。
  - iframe框架里面的网页，使用iframe节点的contentDocument属性。
  - Ajax 操作返回的文档，使用XMLHttpRequest对象的responseXML属性。
  - 内部节点的ownerDocument属性。
  2.快捷方式属性
  - document.defaultView，document.defaultView属性返回document对象所属的window对象。如果当前文档不属于window对象，该属性返回null。
  - document.doctype，对于 HTML 文档来说，document对象一般有两个子节点。第一个子节点是document.doctype，指向<DOCTYPE>节点，即文档类型（Document Type Declaration，简写DTD）节点。HTML 的文档类型节点，一般写成<!DOCTYPE html>。如果网页没有声明 DTD，该属性返回null。
  - document.documentElement，document.documentElement属性返回当前文档的根元素节点（root）。它通常是document节点的第二个子节点，紧跟在document.doctype节点后面。HTML网页的该属性，一般是<html>节点。
  - document.body，document.head，document.body属性指向<body>节点，document.head属性指向<head>节点。这两个属性总是存在的，如果网页源码里面省略了<head>或<body>，浏览器会自动创建。另外，这两个属性是可写的，如果改写它们的值，相当于移除所有子节点。
  - document.scrollingElement，document.scrollingElement属性返回文档的滚动元素。也就是说，当文档整体滚动时，到底是哪个元素在滚动。标准模式下，这个属性返回的文档的根元素document.documentElement（即<html>）。兼容（quirk）模式下，返回的是<body>元素，如果该元素不存在，返回null。
  - document.activeElement，document.activeElement属性返回获得当前焦点（focus）的 DOM 元素。通常，这个属性返回的是<input>、<textarea>、<select>等表单元素，如果当前没有焦点元素，返回<body>元素或null。
  - document.fullscreenElement，document.fullscreenElement属性返回当前以全屏状态展示的 DOM 元素。如果不是全屏状态，该属性返回null。
  3.节点集合属性
  - document.links，document.links属性返回当前文档所有设定了href属性的<a>及<area>节点。
  - document.forms，document.forms属性返回所有<form>表单节点。
  - document.images，document.images属性返回页面所有<img>图片节点。
  - document.embeds，document.plugins，document.embeds属性和document.plugins属性，都返回所有<embed>节点。
  - document.scripts，document.scripts属性返回所有<script>节点。
  - document.styleSheets，document.styleSheets属性返回文档内嵌或引入的样式表集合
    document.links instanceof HTMLCollection // true
    document.images instanceof HTMLCollection // true
    document.forms instanceof HTMLCollection // true
    document.embeds instanceof HTMLCollection // true
    document.scripts instanceof HTMLCollection // true
    HTMLCollection实例是类似数组的对象，所以这些属性都有length属性，都可以使用方括号运算符引用成员。如果成员有id或name属性，还可以用这两个属性的值，在HTMLCollection实例上引用到这个成员。
  - 文档静态信息属性
  - document.documentURI，document.URL，document.documentURI属性和document.URL属性都返回一个字符串，表示当前文档的网址。不同之处是它们继承自不同的接口，documentURI继承自Document接口，可用于所有文档；URL继承自HTMLDocument接口，只能用于 HTML 文档。
  - document.domain，document.domain属性返回当前文档的域名，不包含协议和端口。比如，网页的网址是http://www.example.com:80/hello.html，那么document.domain属性就等于www.example.com。如果无法获取域名，该属性返回null。
  - document.location，Location对象是浏览器提供的原生对象，提供 URL 相关的信息和操作方法。通过window.location和document.location属性，可以拿到这个对象。
  - document.lastModified，document.lastModified属性返回一个字符串，表示当前文档最后修改的时间。不同浏览器的返回值，日期格式是不一样的。
  - document.title，document.title属性返回当前文档的标题。默认情况下，返回<title>节点的值。但是该属性是可写的，一旦被修改，就返回修改后的值。
  - document.characterSet，document.characterSet属性返回当前文档的编码，比如UTF-8、ISO-8859-1等等。
  - document.referrer，document.referrer属性返回一个字符串，表示当前文档的访问者来自哪里。
  - document.dir，document.dir返回一个字符串，表示文字方向。它只有两个可能的值：rtl表示文字从右到左，阿拉伯文是这种方式；ltr表示文字从左到右，包括英语和汉语在内的大多数文字采用这种方式。
  - document.compatMode，compatMode属性返回浏览器处理文档的模式，可能的值为BackCompat（向后兼容模式）和CSS1Compat（严格模式）。
  4.文档状态属性
  - document.hidden，document.hidden属性返回一个布尔值，表示当前页面是否可见。如果窗口最小化、浏览器切换了 Tab，都会导致导致页面不可见，使得document.hidden返回true。
  - document.visibilityState，document.visibilityState返回文档的可见状态。
    visible：页面可见。注意，页面可能是部分可见，即不是焦点窗口，前面被其他窗口部分挡住了。
    hidden：页面不可见，有可能窗口最小化，或者浏览器切换到了另一个 Tab。
    prerender：页面处于正在渲染状态，对于用户来说，该页面不可见。
    unloaded：页面从内存里面卸载了。
  - document.readyState，document.readyState属性返回当前文档的状态，共有三种可能的值。
    loading：加载 HTML 代码阶段（尚未完成解析）
    interactive：加载外部资源阶段
    complete：加载完成
  - document.cookie，document.cookie属性用来操作浏览器 Cookie
  - document.designMode，document.designMode属性控制当前文档是否可编辑。
  - document.implementation，document.implementation属性返回一个DOMImplementation对象。该对象有三个方法，主要用于创建独立于当前文档的新的 Document 对象。
    DOMImplementation.createDocument()：创建一个 XML 文档。
    DOMImplementation.createHTMLDocument()：创建一个 HTML 文档。
    DOMImplementation.createDocumentType()：创建一个 DocumentType 对象。
  5.方法
  - document.open方法清除当前文档所有内容，使得文档处于可写状态，供document.write方法写入内容。
  - document.close方法用来关闭document.open()打开的文档。
  - document.write方法用于向当前文档写入内容。在网页的首次渲染阶段，只要页面没有关闭写入（即没有执行document.close()），document.write写入的内容就会追加在已有内容的后面。
  - document.querySelector()，document.querySelectorAll()，document.querySelector方法接受一个 CSS 选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。
  - document.getElementsByTagName()，document.getElementsByTagName方法搜索 HTML 标签名，返回符合条件的元素。它的返回值是一个类似数组对象（HTMLCollection实例），可以实时反映 HTML 文档的变化。如果没有任何匹配的元素，就返回一个空集。
  - document.getElementsByClassName()，document.getElementsByClassName方法返回一个类似数组的对象（HTMLCollection实例），包括了所有class名字符合指定条件的元素，元素的变化实时反映在返回结果中。
  - document.getElementsByName()，document.getElementsByName方法用于选择拥有name属性的 HTML 元素（比如<form>、<radio>、<img>、<frame>、<embed>和<object>等），返回一个类似数组的的对象（NodeList实例），因为name属性相同的元素可能不止一个。
  - document.getElementById()，document.getElementById方法返回匹配指定id属性的元素节点。如果没有发现匹配的节点，则返回null。
  - document.elementFromPoint()，document.elementsFromPoint()，document.elementFromPoint方法返回位于页面指定位置最上层的元素节点。document.elementsFromPoint()返回一个数组，成员是位于指定坐标（相对于视口）的所有元素。
  - document.createElement()，document.createElement方法用来生成元素节点，并返回该节点。
  - document.createTextNode()，document.createTextNode方法用来生成文本节点（Text实例），并返回该节点。它的参数是文本节点的内容。
  - document.createAttribute()，document.createAttribute方法生成一个新的属性节点（Attr实例），并返回它。
  - document.createComment()，document.createComment方法生成一个新的注释节点，并返回该节点。
  - document.createDocumentFragment()，document.createDocumentFragment方法生成一个空的文档片段对象（DocumentFragment实例）。
  - document.createEvent()，document.createEvent方法生成一个事件对象（Event实例），该对象可以被element.dispatchEvent方法使用，触发指定事件。
  - document.hasFocus()，document.hasFocus方法返回一个布尔值，表示当前文档之中是否有元素被激活或获得焦点。
  - document.adoptNode()，document.importNode()，document.adoptNode方法将某个节点及其子节点，从原来所在的文档或DocumentFragment里面移除，归属当前document对象，返回插入后的新节点。插入的节点对象的ownerDocument属性，会变成当前的document对象，而parentNode属性是null。
  - document.createNodeIterator()，document.createNodeIterator方法返回一个子节点遍历器。
  - document.createTreeWalker()，document.createTreeWalker方法返回一个 DOM 的子树遍历器。它与document.createNodeIterator方法基本是类似的，区别在于它返回的是TreeWalker实例，后者返回的是NodeIterator实例。另外，它的第一个节点不是根节点。document.createTreeWalker方法的第一个参数是所要遍历的根节点，第二个参数指定所要遍历的节点类型（与document.createNodeIterator方法的第二个参数相同）。
  - document.execCommand()，如果document.designMode属性设为on，那么整个文档用户可编辑；如果元素的contenteditable属性设为true，那么该元素可编辑。
  - document.execCommand()的返回值是一个布尔值。如果为false，表示这个方法无法生效。
  - document.execCommand()方法可以执行的样式改变有很多种，下面是其中的一些：bold、insertLineBreak、selectAll、createLink、insertOrderedList、subscript、delete、insertUnorderedList、superscript、formatBlock、insertParagraph、undo、forwardDelete、insertText、unlink、insertImage、italic、unselect、insertHTML、redo。
  - document.queryCommandSupported()，document.queryCommandSupported()方法返回一个布尔值，表示浏览器是否支持document.execCommand()的某个命令。
  - document.queryCommandEnabled()，document.queryCommandEnabled()方法返回一个布尔值，表示当前是否可用document.execCommand()的某个命令。
  - document.getSelection() ，这个方法指向window.getSelection()。
  // Element 节点
  1.Element.id，Element.id属性返回指定元素的id属性，该属性可读写。
  2.Element.tagName，Element.tagName属性返回指定元素的大写标签名，与nodeName属性的值相等。
  3.Element.dir，Element.dir属性用于读写当前元素的文字方向，可能是从左到右（"ltr"），也可能是从右到左（"rtl"）。
  4.Element.accessKey，Element.accessKey属性用于读写分配给当前元素的快捷键。
  5.Element.draggable，Element.draggable属性返回一个布尔值，表示当前元素是否可拖动。该属性可读写。
  6.Element.lang，Element.lang属性返回当前元素的语言设置。该属性可读写。
  7.Element.tabIndex，Element.tabIndex属性返回一个整数，表示当前元素在 Tab 键遍历时的顺序。该属性可读写。
  8.Element.title，Element.title属性用来读写当前元素的 HTML 属性title。该属性通常用来指定，鼠标悬浮时弹出的文字提示框。
  9.Element.hidden，Element.hidden属性返回一个布尔值，表示当前元素的hidden属性，用来控制当前元素是否可见。
  10.Element.contentEditable，Element.isContentEditable，Element.contentEditable属性返回一个字符串，表示是否设置了contenteditable属性，有三种可能的值。该属性可写。
      "true"：元素内容可编辑
      "false"：元素内容不可编辑
      "inherit"：元素是否可编辑，继承了父元素的设置
    Element.isContentEditable属性返回一个布尔值，同样表示是否设置了contenteditable属性。该属性只读。
  11.Element.attributes，Element.attributes属性返回一个类似数组的对象，成员是当前元素节点的所有属性节点。
  12.Element.className，Element.classList，className属性用来读写当前元素节点的class属性。它的值是一个字符串，每个class之间用空格分割。
classList属性返回一个类似数组的对象，当前元素节点的每个class就是这个对象的一个成员。
  classList对象有下列方法。
    add()：增加一个 class。
    remove()：移除一个 class。
    contains()：检查当前元素是否包含某个 class。
    toggle()：将某个 class 移入或移出当前元素。
    item()：返回指定索引位置的 class。
    toString()：将 class 的列表转为字符串。
  13.Element.dataset，网页元素可以自定义data-属性，用来添加数据。
  14.Element.innerHTML，Element.innerHTML属性返回一个字符串，等同于该元素包含的所有 HTML 代码。该属性可读写，常用来设置某个节点的内容。它能改写所有元素节点的内容，包括<HTML>和<body>元素。
  15.Element.outerHTML，Element.outerHTML属性返回一个字符串，表示当前元素节点的所有 HTML 代码，包括该元素本身和所有子元素。
  16.Element.clientHeight，Element.clientWidth
  17.Element.clientLeft，Element.clientTop
  18.Element.scrollHeight，Element.scrollWidth
  19.Element.scrollLeft，Element.scrollTop
  20.Element.offsetParent 
  21.Element.offsetHeight，Element.offsetWidth
  22.Element.offsetLeft，Element.offsetTop
  23.Element.style
  24.Element.children，Element.childElementCount
  25.Element.firstElementChild，Element.lastElementChild
  26.Element.nextElementSibling，Element.previousElementSibling
  27.属性相关方法，元素节点提供六个方法，用来操作属性。
  - getAttribute()：读取某个属性的值
  - getAttributeNames()：返回当前元素的所有属性名
  - setAttribute()：写入属性值
  - hasAttribute()：某个属性是否存在
  - hasAttributes()：当前元素是否有属性
  - removeAttribute()：删除属性
  28.Element.querySelector()，Element.querySelector方法接受 CSS 选择器作为参数，返回父元素的第一个匹配的子元素。如果没有找到匹配的子元素，就返回null。
  29.Element.querySelectorAll()，Element.querySelectorAll方法接受 CSS 选择器作为参数，返回一个NodeList实例，包含所有匹配的子元素。
  30.Element.getElementsByClassName()，Element.getElementsByClassName方法返回一个HTMLCollection实例，成员是当前元素节点的所有具有指定 class 的子元素节点。该方法与document.getElementsByClassName方法的用法类似，只是搜索范围不是整个文档，而是当前元素节点。
  31.Element.getElementsByTagName()，Element.getElementsByTagName方法返回一个HTMLCollection实例，成员是当前节点的所有匹配指定标签名的子元素节点。
  23.Element.closest() ，Element.closest方法接受一个 CSS 选择器作为参数，返回匹配该选择器的、最接近当前节点的一个祖先节点（包括当前节点本身）。如果没有任何节点匹配 CSS 选择器，则返回null。
  24.Element.matches()，Element.matches方法返回一个布尔值，表示当前元素是否匹配给定的 CSS 选择器。
  25.事件相关方法，以下三个方法与Element节点的事件相关。这些方法都继承自EventTarget接口，
  - Element.addEventListener()：添加事件的回调函数
  - Element.removeEventListener()：移除事件监听函数
  - Element.dispatchEvent()：触发事件
  26.Element.scrollIntoView()，Element.scrollIntoView方法滚动当前元素，进入浏览器的可见区域，类似于设置window.location.hash的效果。
  27.Element.getBoundingClientRect()，Element.getBoundingClientRect方法返回一个对象，提供当前元素节点的大小、位置等信息，基本上就是 CSS 盒状模型的所有信息。
    - x：元素左上角相对于视口的横坐标
    - y：元素左上角相对于视口的纵坐标
    - height：元素高度
    - width：元素宽度
    - left：元素左上角相对于视口的横坐标，与x属性相等
    - right：元素右边界相对于视口的横坐标（等于x + width）
    - top：元素顶部相对于视口的纵坐标，与y属性相等
    - bottom：元素底部相对于视口的纵坐标（等于y + height）
  28.Element.getClientRects()，Element.getClientRects方法返回一个类似数组的对象，里面是当前元素在页面上形成的所有矩形（所以方法名中的Rect用的是复数）。
  29.Element.insertAdjacentElement()，Element.insertAdjacentElement方法在相对于当前元素的指定位置，插入一个新的节点。该方法返回被插入的节点，如果插入失败，返回null。
  30.Element.insertAdjacentHTML()，Element.insertAdjacentText()
  31.Element.remove()，Element.remove方法继承自 ChildNode 接口，用于将当前元素节点从它的父节点移除。
  32.Element.focus()，Element.blur()，Element.focus方法用于将当前页面的焦点，转移到指定元素上。
  33.Element.click()，Element.click方法用于在当前元素上模拟一次鼠标点击，相当于触发了click事件。
  // 属性的操作
  Element.attributes 属性
  元素的标准属性
  属性操作的标准方法
  概述
  Element.getAttribute()
  Element.getAttributeNames()
  Element.setAttribute()
  Element.hasAttribute()
  Element.hasAttributes()
  Element.removeAttribute()
  dataset 属性
  // Text 节点和 DocumentFragment 节点
  Text 节点的属性
  data
  wholeText
  length
  nextElementSibling，previousElementSibling
  Text 节点的方法
  appendData()，deleteData()，insertData()，replaceData()，subStringData()
  remove()
  splitText()
  DocumentFragment 节点
  // CSS 操作
  HTML 元素的 style 属性
  CSSStyleDeclaration 接口
  简介
  CSSStyleDeclaration 实例属性
  CSSStyleDeclaration 实例方法
  CSS 模块的侦测
  CSS 对象
  CSS.escape()
  CSS.supports()
  window.getComputedStyle()
  CSS 伪元素
  StyleSheet 接口
  概述
  实例属性
  实例方法
  实例：添加样式表
  CSSRuleList 接口
  CSSRule 接口
  概述
  CSSRule 实例的属性
  CSSStyleRule 接口
  CSSMediaRule 接口
  window.matchMedia()
  基本用法
  MediaQueryList 接口的实例属性
  MediaQueryList 接口的实例方法
  // Mutation Observer API
  MutationObserver 构造函数
  MutationObserver 的实例方法
  observe()
  disconnect()，takeRecords（）
  MutationRecord 对象
  应用示例
  子元素的变动
  属性的变动
  取代 DOMContentLoaded 事件
  // EventTarget 接口
  1.DOM 的事件操作（监听和触发），都定义在EventTarget接口。
  - addEventListener：绑定事件的监听函数
  - removeEventListener：移除事件的监听函数
  - dispatchEvent：触发事件
  2.EventTarget.addEventListener()
  - EventTarget.addEventListener()用于在当前节点或对象上，定义一个特定事件的监听函数。一旦这个事件发生，就会执行监听函数。该方法没有返回值。
  3.EventTarget.removeEventListener()
  - EventTarget.removeEventListener方法用来移除addEventListener方法添加的事件监听函数。该方法没有返回值。
  4.EventTarget.dispatchEvent()
  -EventTarget.dispatchEvent方法在当前节点上触发指定事件，从而触发监听函数的执行。该方法返回一个布尔值，只要有一个监听函数调用了Event.preventDefault()，则返回值为false，否则为true。
  // 事件模型
  1.监听函数
  浏览器的事件模型，就是通过监听函数（listener）对事件做出反应。事件发生后，浏览器监听到了这个事件，就会执行对应的监听函数。这是事件驱动编程模式（event-driven）的主要编程方式。
  - HTML 的 on- 属性，HTML 语言允许在元素的属性中，直接定义某些事件的监听代码。
  - 元素节点的事件属性，元素节点对象的事件属性，同样可以指定监听函数。
  - EventTarget.addEventListener()，所有 DOM 节点实例都有addEventListener方法，用来为该节点定义事件的监听函数。
  2.this 的指向，监听函数内部的this指向触发事件的那个元素节点。
  3.事件的传播，一个事件发生后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段。
  - 第一阶段：从window对象传导到目标节点（上层传到底层），称为“捕获阶段”（capture phase）。
  - 第二阶段：在目标节点上触发，称为“目标阶段”（target phase）。
  - 第三阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling phase）。
  4.事件处理，由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理（delegation）。
  // Event 对象
  1.Event，事件发生以后，会产生一个事件对象，作为参数传给监听函数。浏览器原生提供一个Event对象，所有的事件都是这个对象的实例，或者说继承了Event.prototype对象。
  2.实例属性
  - Event.bubbles属性返回一个布尔值，表示当前事件是否会冒泡。该属性为只读属性，一般用来了解 Event 实例是否可以冒泡。前面说过，除非显式声明，Event构造函数生成的事件，默认是不冒泡的。
  - Event.eventPhase属性返回一个整数常量，表示事件目前所处的阶段。该属性只读。
    Event.eventPhase的返回值有四种可能。
    0，事件目前没有发生。
    1，事件目前处于捕获阶段，即处于从祖先节点向目标节点的传播过程中。
    2，事件到达目标节点，即Event.target属性指向的那个节点。
    3，事件处于冒泡阶段，即处于从目标节点向祖先节点的反向传播过程中。
  - Event.cancelable属性返回一个布尔值，表示事件是否可以取消。该属性为只读属性，一般用来了解 Event 实例的特性。
  - Event.cancelBubble属性是一个布尔值，如果设为true，相当于执行Event.stopPropagation()，可以阻止事件的传播。
  - Event.defaultPrevented属性返回一个布尔值，表示该事件是否调用过Event.preventDefault方法。该属性只读。
  - Event.currentTarget属性返回事件当前所在的节点，即事件当前正在通过的节点，也就是当前正在执行的监听函数所在的那个节点。随着事件的传播，这个属性的值会变。
  - Event.target属性返回原始触发事件的那个节点，即事件最初发生的节点。这个属性不会随着事件的传播而改变。
  - Event.type属性返回一个字符串，表示事件类型。事件的类型是在生成事件的时候指定的。该属性只读。
  - Event.timeStamp属性返回一个毫秒时间戳，表示事件发生的时间。它是相对于网页加载成功开始计算的。
  - Event.isTrusted属性返回一个布尔值，表示该事件是否由真实的用户行为产生。
  - Event.detail属性只有浏览器的 UI （用户界面）事件才具有。该属性返回一个数值，表示事件的某种信息。具体含义与事件类型相关。
  3.实例方法
  - Event.preventDefault方法取消浏览器对当前事件的默认行为。
  - Event.stopPropagation()，stopPropagation方法阻止事件在 DOM 中继续传播，防止再触发定义在别的节点上的监听函数，但是不包括在当前节点上其他的事件监听函数。
  - Event.stopImmediatePropagation()，Event.stopImmediatePropagation方法阻止同一个事件的其他监听函数被调用，不管监听函数定义在当前节点还是其他节点。
  - Event.composedPath()，Event.composedPath()返回一个数组，成员是事件的最底层节点和依次冒泡经过的所有上层节点。
  // 鼠标事件
  1.鼠标事件的种类
  - click：按下鼠标（通常是按下主按钮）时触发。
  - dblclick：在同一个元素上双击鼠标时触发。
  - mousedown：按下鼠标键时触发。
  - mouseup：释放按下的鼠标键时触发。
  - mousemove：当鼠标在一个节点内部移动时触发。当鼠标持续移动时，该事件会连续触发。为了避免性能问题，建议对该事件的监听函数做一些限定，比如限定一段时间内只能运行一次。
  - mouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件（详见后文）。
  - mouseover：鼠标进入一个节点时触发，进入子节点会再一次触发这个事件（详见后文）。
  - mouseout：鼠标离开一个节点时触发，离开父节点也会触发这个事件（详见后文）。
  - mouseleave：鼠标离开一个节点时触发，离开父节点不会触发这个事件（详见后文）。
  - contextmenu：按下鼠标右键时（上下文菜单出现前）触发，或者按下“上下文菜单键”时触发。
  - wheel：滚动鼠标的滚轮时触发，该事件继承的是WheelEvent接口。
  2.MouseEvent 接口概述，MouseEvent接口代表了鼠标相关的事件，单击（click）、双击（dblclick）、松开鼠标键（mouseup）、按下鼠标键（mousedown）等动作，所产生的事件对象都是MouseEvent实例。此外，滚轮事件和拖拉事件也是MouseEvent实例。该对象可以配置以下属性，所有属性都是可选的。
    - screenX：数值，鼠标相对于屏幕的水平位置（单位像素），默认值为0，设置该属性不会移动鼠标。
    - screenY：数值，鼠标相对于屏幕的垂直位置（单位像素），其他与screenX相同。
    - clientX：数值，鼠标相对于程序窗口的水平位置（单位像素），默认值为0，设置该属性不会移动鼠标。
    - clientY：数值，鼠标相对于程序窗口的垂直位置（单位像素），其他与clientX相同。
    - ctrlKey：布尔值，是否同时按下了 Ctrl 键，默认值为false。
    - shiftKey：布尔值，是否同时按下了 Shift 键，默认值为false。
    - altKey：布尔值，是否同时按下 Alt 键，默认值为false。
    - metaKey：布尔值，是否同时按下 Meta 键，默认值为false。
    - button：数值，表示按下了哪一个鼠标按键，默认值为0，表示按下主键（通常是鼠标的左键）或者当前事件没有定义这个属性；1表示按下辅助键（通常是鼠标的中间键），2表示按下次要键（通常是鼠标的右键）。
    - buttons：数值，表示按下了鼠标的哪些键，是一个三个比特位的二进制值，默认为0（没有按下任何键）。1（二进制001）表示按下主键（通常是左键），2（二进制010）表示按下次要键（通常是右键），4（二进制100）表示按下辅助键（通常是中间键）。因此，如果返回3（二进制011）就表示同时按下了左键和右键。
    - relatedTarget：节点对象，表示事件的相关节点，默认为null。mouseenter和mouseover事件时，表示鼠标刚刚离开的那个元素节点；mouseout和mouseleave事件时，表示鼠标正在进入的那个元素节点。
  3.MouseEvent 接口的实例属性
    MouseEvent.altKey、MouseEvent.ctrlKey、MouseEvent.metaKey、MouseEvent.shiftKey这四个属性都返回一个布尔值，表示事件发生时，是否按下对应的键。它们都是只读属性。
    - altKey属性：Alt 键
    - ctrlKey属性：Ctrl 键
    - metaKey属性：Meta 键（Mac 键盘是一个四瓣的小花，Windows 键盘是 Windows 键）
    - shiftKey属性：Shift 键

    MouseEvent.button属性返回一个数值，表示事件发生时按下了鼠标的哪个键。该属性只读。
    - 0：按下主键（通常是左键），或者该事件没有初始化这个属性（比如mousemove事件）。
    - 1：按下辅助键（通常是中键或者滚轮键）。
    - 2：按下次键（通常是右键）。

    MouseEvent.buttons属性返回一个三个比特位的值，表示同时按下了哪些键。它用来处理同时按下多个鼠标键的情况。该属性只读。
    - 1：二进制为001（十进制的1），表示按下左键。
    - 2：二进制为010（十进制的2），表示按下右键。
    - 4：二进制为100（十进制的4），表示按下中键或滚轮键。

    MouseEvent.clientX属性返回鼠标位置相对于浏览器窗口左上角的水平坐标（单位像素），MouseEvent.clientY属性返回垂直坐标。这两个属性都是只读属性。

    MouseEvent.movementX属性返回当前位置与上一个mousemove事件之间的水平距离（单位像素）。
    MouseEvent.movementY属性返回当前位置与上一个mousemove事件之间的垂直距离（单位像素）。

    MouseEvent.screenX属性返回鼠标位置相对于屏幕左上角的水平坐标（单位像素），MouseEvent.screenY属性返回垂直坐标。这两个属性都是只读属性。

    MouseEvent.offsetX属性返回鼠标位置与目标节点左侧的padding边缘的水平距离（单位像素），MouseEvent.offsetY属性返回与目标节点上方的padding边缘的垂直距离。这两个属性都是只读属性。

    MouseEvent.pageX属性返回鼠标位置与文档左侧边缘的距离（单位像素），MouseEvent.pageY属性返回与文档上侧边缘的距离（单位像素）。它们的返回值都包括文档不可见的部分。这两个属性都是只读。

    MouseEvent.relatedTarget属性返回事件的相关节点。对于那些没有相关节点的事件，该属性返回null。该属性只读。

    事件名称      target 属性   relatedTarget 属性
    focusin     接受焦点的节点   丧失焦点的节点
    focusout    丧失焦点的节点   接受焦点的节点
    mouseenter  将要进入的节点   将要离开的节点
    mouseleave  将要离开的节点   将要进入的节点
    mouseout    将要离开的节点   将要进入的节点
    mouseover   将要进入的节点   将要离开的节点
    dragenter   将要进入的节点   将要离开的节点
    dragexit    将要离开的节点   将要进入的节点

    4.MouseEvent 接口的实例方法
    - MouseEvent.getModifierState方法返回一个布尔值，表示有没有按下特定的功能键。

    5.WheelEvent 接口，WheelEvent 接口继承了 MouseEvent 实例，代表鼠标滚轮事件的实例对象。该对象的属性除了Event、UIEvent的配置属性以外，还可以接受以下几个属性，所有属性都是可选的。
      - deltaX：数值，表示滚轮的水平滚动量，默认值是 0.0。
      - deltaY：数值，表示滚轮的垂直滚动量，默认值是 0.0。
      - deltaZ：数值，表示滚轮的 Z 轴滚动量，默认值是 0.0。
      - deltaMode：数值，表示相关的滚动事件的单位，适用于上面三个属性。0表示滚动单位为像素，1表示单位为行，2表示单位为页，默认为0。

    6.WheelEvent事件实例除了具有Event和MouseEvent的实例属性和实例方法，还有一些自己的实例属性，但是没有自己的实例方法。
      下面的属性都是只读属性。
      - WheelEvent.deltaX：数值，表示滚轮的水平滚动量。
      - WheelEvent.deltaY：数值，表示滚轮的垂直滚动量。
      - WheelEvent.deltaZ：数值，表示滚轮的 Z 轴滚动量。
      - WheelEvent.deltaMode：数值，表示上面三个属性的单位，0是像素，1是行，2是页。

    // 键盘事件
    1.键盘事件的种类
    - keydown：按下键盘时触发。
    - keypress：按下有值的键时触发，即按下 Ctrl、Alt、Shift、Meta 这样无值的键，这个事件不会触发。对于有值的键，按下时先触发keydown事件，再触发这个事件。
    - keyup：松开键盘时触发该事件。
    如果用户一直按键不松开，就会连续触发键盘事件，触发的顺序如下。
      keydown
      keypress
      keydown
      keypress
      ...（重复以上过程）
      keyup

    2.KeyboardEvent 接口概述，KeyboardEvent接口用来描述用户与键盘的互动。这个接口继承了Event接口，并且定义了自己的实例属性和实例方法。KeyboardEvent构造函数接受两个参数。第一个参数是字符串，表示事件类型；第二个参数是一个事件配置对象，该参数可选。除了Event接口提供的属性，还可以配置以下字段，它们都是可选。
    - key：字符串，当前按下的键，默认为空字符串。
    - code：字符串，表示当前按下的键的字符串形式，默认为空字符串。
    - location：整数，当前按下的键的位置，默认为0。
    - ctrlKey：布尔值，是否按下 Ctrl 键，默认为false。
    - shiftKey：布尔值，是否按下 Shift 键，默认为false。
    - altKey：布尔值，是否按下 Alt 键，默认为false。
    - metaKey：布尔值，是否按下 Meta 键，默认为false。
    - repeat：布尔值，是否重复按键，默认为false。

    3.KeyboardEvent 的实例属性
    - KeyboardEvent.altKey：是否按下 Alt 键
    - KeyboardEvent.ctrlKey：是否按下 Ctrl 键
    - KeyboardEvent.metaKey：是否按下 meta 键（Mac 系统是一个四瓣的小花，Windows 系统是 windows 键）
    - KeyboardEvent.shiftKey：是否按下 Shift 键
    - KeyboardEvent.code属性返回一个字符串，表示当前按下的键的字符串形式。该属性只读。
      下面是一些常用键的字符串形式，其他键请查文档。
      数字键0 - 9：返回digital0 - digital9
      字母键A - z：返回KeyA - KeyZ
      功能键F1 - F12：返回 F1 - F12
      方向键：返回ArrowDown、ArrowUp、ArrowLeft、ArrowRight
      Alt 键：返回AltLeft或AltRight
      Shift 键：返回ShiftLeft或ShiftRight
      Ctrl 键：返回ControlLeft或ControlRight
    - KeyboardEvent.key属性返回一个字符串，表示按下的键名。该属性只读。
    - KeyboardEvent.location属性返回一个整数，表示按下的键处在键盘的哪一个区域。它可能取以下值。
      0：处在键盘的主区域，或者无法判断处于哪一个区域。
      1：处在键盘的左侧，只适用那些有两个位置的键（比如 Ctrl 和 Shift 键）。
      2：处在键盘的右侧，只适用那些有两个位置的键（比如 Ctrl 和 Shift 键）。
      3：处在数字小键盘。
    - KeyboardEvent.repeat返回一个布尔值，代表该键是否被按着不放，以便判断是否重复这个键，即浏览器会持续触发keydown和keypress事件，直到用户松开手为止。
    - KeyboardEvent.getModifierState()方法返回一个布尔值，表示是否按下或激活指定的功能键。它的常用参数如下。
      Alt：Alt 键
      CapsLock：大写锁定键
      Control：Ctrl 键
      Meta：Meta 键
      NumLock：数字键盘开关键
      Shift：Shift 键

    // 进度事件
    1.进度事件的种类，进度事件用来描述资源加载的进度，主要由 AJAX 请求、<img>、<audio>、<video>、<style>、<link>等外部资源的加载触发，继承了ProgressEvent接口。它主要包含以下几种事件。
    - abort：外部资源中止加载时（比如用户取消）触发。如果发生错误导致中止，不会触发该事件。
    - error：由于错误导致外部资源无法加载时触发。
    - load：外部资源加载成功时触发。
    - loadstart：外部资源开始加载时触发。
    - loadend：外部资源停止加载时触发，发生顺序排在error、abort、load等事件的后面。
    - progress：外部资源加载过程中不断触发。
    - timeout：加载超时时触发。
    注意，除了资源下载，文件上传也存在这些事件。

    2.ProgressEvent 接口，ProgressEvent接口主要用来描述外部资源加载的进度，比如 AJAX 加载、<img>、<video>、<style>、<link>等外部资源加载。进度相关的事件都继承了这个接口。

    // 表单事件
    1.表单事件的种类
    - input事件当<input>、<select>、<textarea>的值发生变化时触发。上面代码中，改变下拉框选项时，会触发input事件，从而执行回调函数inputHandler。
    - select事件当在<input>、<textarea>里面选中文本时触发。选中的文本可以通过event.target元素的selectionDirection、selectionEnd、selectionStart和value属性拿到。
    - change事件当<input>、<select>、<textarea>的值发生变化时触发。它与input事件的最大不同，就是不会连续触发，只有当全部修改完成时才会触发，另一方面input事件必然伴随change事件。具体来说，分成以下几种情况。
      
      激活单选框（radio）或复选框（checkbox）时触发。
      用户提交时触发。比如，从下列列表（select）完成选择，在日期或文件输入框完成选择。
      当文本框或<textarea>元素的值发生改变，并且丧失焦点时触发。

    - invalid 事件，用户提交表单时，如果表单元素的值不满足校验条件，就会触发invalid事件。
    - reset事件当表单重置（所有表单成员变回默认值）时触发。
    - submit事件当表单数据向服务器提交时触发。

    2.InputEvent 接口
    - InputEvent接口主要用来描述input事件的实例。该接口继承了Event接口，还定义了一些自己的实例属性和实例方法。
    - InputEvent.data属性返回一个字符串，表示变动的内容。
    - InputEvent.inputType属性返回一个字符串，表示字符串发生变更的类型。
    - InputEvent.dataTransfer属性返回一个 DataTransfer 实例。该属性只在文本框接受粘贴内容（insertFromPaste）或拖拽内容（insertFromDrop）时才有效。

    // 触摸事件
    1.浏览器的触摸 API 由三个部分组成。
      - Touch：一个触摸点
      - TouchList：多个触摸点的集合
      - TouchEvent：触摸引发的事件实例
    2.Touch 接口，Touch构造函数接受一个配置对象作为参数，它有以下属性。
      - identifier：必需，类型为整数，表示触摸点的唯一 ID。
      - target：必需，类型为元素节点，表示触摸点开始时所在的网页元素。
      - clientX：可选，类型为数值，表示触摸点相对于浏览器窗口左上角的水平距离，默认为0。
      - clientY：可选，类型为数值，表示触摸点相对于浏览器窗口左上角的垂直距离，默认为0。
      - screenX：可选，类型为数值，表示触摸点相对于屏幕左上角的水平距离，默认为0。
      - screenY：可选，类型为数值，表示触摸点相对于屏幕左上角的垂直距离，默认为0。
      - pageX：可选，类型为数值，表示触摸点相对于网页左上角的水平位置（即包括页面的滚动距离），默认为0。
      - pageY：可选，类型为数值，表示触摸点相对于网页左上角的垂直位置（即包括页面的滚动距离），默认为0。
      - radiusX：可选，类型为数值，表示触摸点周围受到影响的椭圆范围的 X 轴半径，默认为0。
      - radiusY：可选：类型为数值，表示触摸点周围受到影响的椭圆范围的 Y 轴半径，默认为0。
      - rotationAngle：可选，类型为数值，表示触摸区域的椭圆的旋转角度，单位为度数，在0到90度之间，默认值为0。
      - force：可选，类型为数值，范围在0到1之间，表示触摸压力。0代表没有压力，1代表硬件所能识别的最大压力，默认为0。
    3.Touch 接口的实例属性
      - Touch.identifier属性返回一个整数，表示触摸点的唯一 ID。这个值在整个触摸过程保持不变，直到触摸事件结束。
      - Touch.screenX属性和Touch.screenY属性，分别表示触摸点相对于屏幕左上角的横坐标和纵坐标，与页面是否滚动无关。
      - Touch.clientX属性和Touch.clientY属性，分别表示触摸点相对于浏览器视口左上角的横坐标和纵坐标，与页面是否滚动无关。
      - Touch.pageX属性和Touch.pageY属性，分别表示触摸点相对于当前页面左上角的横坐标和纵坐标，包含了页面滚动带来的位移。
      - Touch.radiusX属性和Touch.radiusY属性，分别返回触摸点周围受到影响的椭圆范围的 X 轴半径和 Y 轴半径，单位为像素。乘以 2 就可以得到触摸范围的宽度和高度。
      - Touch.rotationAngle属性表示触摸区域的椭圆的旋转角度，单位为度数，在0到90度之间。
      - Touch.force属性返回一个0到1之间的数值，表示触摸压力。0代表没有压力，1代表硬件所能识别的最大压力。
      - Touch.target属性返回一个元素节点，代表触摸发生时所在的那个元素节点。即使触摸点已经离开了这个节点，该属性依然不变。
    4.TouchList 接口
      TouchList接口表示一族的解除点的集合。它的实例是一个类似数组的对象，成员是Touch的实例对象，表示所有触摸点。用户用三根手指触摸，产生的TouchList实例就会包含三个成员，每根手指的接触点对应一个Touch实例对象。

      它的实例属性和实例方法只有两个。
      TouchList.length：数值，表示成员数量（即触摸点的数量）。
      TouchList.item()：返回指定位置的成员，它的参数是该成员的位置编号（从零开始）

    5.TouchEvent接口继承了 Event 接口，表示由触摸引发的事件实例，通常来自触摸屏或轨迹板。除了被继承的属性以外，它还有一些自己的属性。除了Event接口的配置属性，该接口还有一些自己的配置属性。
      - touches：TouchList实例，代表所有的当前处于活跃状态的触摸点，默认值是一个空数组[]。
      - targetTouches：TouchList实例，代表所有处在触摸的目标元素节点内部、且仍然处于活动状态的触摸点，默认值是一个空数组[]。
      - changedTouches：TouchList实例，代表本次触摸事件的相关触摸点，默认值是一个空数组[]。
      - ctrlKey：布尔值，表示 Ctrl 键是否同时按下，默认值为false。
      - shiftKey：布尔值，表示 Shift 键是否同时按下，默认值为false。
      - altKey：布尔值，表示 Alt 键是否同时按下，默认值为false。
      - metaKey：布尔值，表示 Meta 键（或 Windows 键）是否同时按下，默认值为false。
    
      实例属性：
      - TouchEvent.altKey：布尔值，表示触摸时是否按下了 Alt 键。
      - TouchEvent.ctrlKey：布尔值，表示触摸时是否按下了 Ctrl 键。
      - TouchEvent.shiftKey：布尔值：表示触摸时是否按下了 Shift 键。
      - TouchEvent.metaKey：布尔值，表示触摸时是否按下了 Meta 键（或 Windows 键）。
      - TouchEvent.changedTouches属性返回一个TouchList实例，成员是一组Touch实例对象，表示本次触摸事件的相关触摸点。对于不同的时间，该属性的含义有所不同。
        touchstart事件：被激活的触摸点
        touchmove事件：发生变化的触摸点
        touchend事件：消失的触摸点（即不再被触碰的点）
      - TouchEvent.touches属性返回一个TouchList实例，成员是所有仍然处于活动状态（即触摸中）的触摸点。一般来说，一个手指就是一个触摸点。
      - TouchEvent.targetTouches属性返回一个TouchList实例，成员是触摸事件的目标元素节点内部、所有仍然处于活动状态（即触摸中）的触摸点。

      6.触摸事件的种类，可以通过TouchEvent.type属性，查看到底发生的是哪一种事件。
      - touchstart：用户开始触摸时触发，它的target属性返回发生触摸的元素节点。
      - touchend：用户不再接触触摸屏时（或者移出屏幕边缘时）触发，它的target属性与touchstart事件一致的，就是开始触摸时所在的元素节点。它的changedTouches属性返回一个TouchList实例，包含所有不再触摸的触摸点（即Touch实例对象）。
      - touchmove：用户移动触摸点时触发，它的target属性与touchstart事件一致。如果触摸的半径、角度、力度发生变化，也会触发该事件。
      - touchcancel：触摸点取消时触发，比如在触摸区域跳出一个模态窗口（modal window）、触摸点离开了文档区域（进入浏览器菜单栏）、用户的触摸点太多，超过了支持的上限（自动取消早先的触摸点）。

      // 拖拉事件
      1.拖拉事件的种类，draggable属性可用于任何元素节点，但是图片（<img>）和链接（<a>）不加这个属性，就可以拖拉。
      当元素节点或选中的文本被拖拉时，就会持续触发拖拉事件，包括以下一些事件。
      - drag：拖拉过程中，在被拖拉的节点上持续触发（相隔几百毫秒）。
      - dragstart：用户开始拖拉时，在被拖拉的节点上触发，该事件的target属性是被拖拉的节点。通常应该在这个事件的监听函数中，指定拖拉的数据。
      - dragend：拖拉结束时（释放鼠标键或按下 ESC 键）在被拖拉的节点上触发，该事件的target属性是被拖拉的节点。它与dragstart事件，在同一个节点上触发。不管拖拉是否跨窗口，或者中途被取消，dragend事件总是会触发的。
      - dragenter：拖拉进入当前节点时，在当前节点上触发一次，该事件的target属性是当前节点。通常应该在这个事件的监听函数中，指定是否允许在当前节点放下（drop）拖拉的数据。如果当前节点没有该事件的监听函数，或者监听函数不执行任何操作，就意味着不允许在当前节点放下数据。在视觉上显示拖拉进入当前节点，也是在这个事件的监听函数中设置。
      - dragover：拖拉到当前节点上方时，在当前节点上持续触发（相隔几百毫秒），该事件的target属性是当前节点。该事件与dragenter事件的区别是，dragenter事件在进入该节点时触发，然后只要没有离开这个节点，dragover事件会持续触发。
      - dragleave：拖拉操作离开当前节点范围时，在当前节点上触发，该事件的target属性是当前节点。如果要在视觉上显示拖拉离开操作当前节点，就在这个事件的监听函数中设置。
      - drop：被拖拉的节点或选中的文本，释放到目标节点时，在目标节点上触发。注意，如果当前节点不允许drop，即使在该节点上方松开鼠标键，也不会触发该事件。如果用户按下 ESC 键，取消这个操作，也不会触发该事件。该事件的监听函数负责取出拖拉数据，并进行相关处理。

      2.DragEvent 接口
      - 拖拉事件都继承了DragEvent接口，这个接口又继承了MouseEvent接口和Event接口。浏览器原生提供一个DragEvent()构造函数，用来生成拖拉事件的实例对象。

      3.DataTransfer 接口概述
      - 所有拖拉事件的实例都有一个DragEvent.dataTransfer属性，用来读写需要传递的数据。这个属性的值是一个DataTransfer接口的实例。

      4.DataTransfer 的实例属性
      - DataTransfer.dropEffect属性用来设置放下（drop）被拖拉节点时的效果，会影响到拖拉经过相关区域时鼠标的形状。它可能取下面的值。
        copy：复制被拖拉的节点
        move：移动被拖拉的节点
        link：创建指向被拖拉的节点的链接
        none：无法放下被拖拉的节点

      - DataTransfer.effectAllowed属性设置本次拖拉中允许的效果。它可能取下面的值。
        copy：复制被拖拉的节点
        move：移动被拖拉的节点
        link：创建指向被拖拉节点的链接
        copyLink：允许copy或link
        copyMove：允许copy或move
        linkMove：允许link或move
        all：允许所有效果
        none：无法放下被拖拉的节点
        uninitialized：默认值，等同于all

      - DataTransfer.files属性是一个 FileList 对象，包含一组本地文件，可以用来在拖拉操作中传送。如果本次拖拉不涉及文件，则该属性为空的 FileList 对象。

      - DataTransfer.types属性是一个只读的数组，每个成员是一个字符串，里面是拖拉的数据格式（通常是 MIME 值）。

      - DataTransfer.items属性返回一个类似数组的只读对象（DataTransferItemList 实例），每个成员就是本次拖拉的一个对象（DataTransferItem 实例）。如果本次拖拉不包含对象，则返回一个空对象。
        DataTransferItemList 实例具有以下的属性和方法。
        - length：返回成员的数量
        - add(data, type)：增加一个指定内容和类型（比如text/html和text/plain）的字符串作为成员
        - add(file)：add方法的另一种用法，增加一个文件作为成员
        - remove(index)：移除指定位置的成员
        - clear()：移除所有的成员

        DataTransferItem 实例具有以下的属性和方法。
        - kind：返回成员的种类（string还是file）。
        - type：返回成员的类型（通常是 MIME 值）。
        - getAsFile()：如果被拖拉是文件，返回该文件，否则返回null。
        - getAsString(callback)：如果被拖拉的是字符串，将该字符传入指定的回调函数处理。该方法是异步的，所以需要传入回调函数。

      5.DataTransfer 的实例方法
      - DataTransfer.setData()方法用来设置拖拉事件所带有的数据。该方法没有返回值。
      - DataTransfer.getData()方法接受一个字符串（表示数据类型）作为参数，返回事件所带的指定类型的数据（通常是用setData方法添加的数据）。如果指定类型的数据不存在，则返回空字符串。通常只有drop事件触发后，才能取出数据。
      - DataTransfer.clearData()方法接受一个字符串（表示数据类型）作为参数，删除事件所带的指定类型的数据。如果没有指定类型，则删除所有数据。如果指定类型不存在，则调用该方法不会产生任何效果。
      - DataTransfer.setDragImage()方法可以自定义这张图片。它接受三个参数。第一个是<img>节点或者<canvas>节点，如果省略或为null，则使用被拖动的节点的外观；第二个和第三个参数为鼠标相对于该图片左上角的横坐标和右坐标。

      // 其他常见事件
      资源事件
      beforeunload 事件
      unload 事件
      load 事件，error 事件
      session 历史事件
      pageshow 事件，pagehide 事件
      popstate 事件
      hashchange 事件
      网页状态事件
      DOMContentLoaded 事件
      readystatechange 事件
      窗口事件
      scroll 事件
      resize 事件
      fullscreenchange 事件，fullscreenerror 事件
      剪贴板事件
      焦点事件
      CustomEvent 接口

      // GlobalEventHandlers 接口
      1.GlobalEventHandlers.onabort，某个对象的abort事件（停止加载）发生时，就会调用onabort属性指定的回调函数。
      2.GlobalEventHandlers.onerror，error事件发生时，就会调用onerror属性指定的回调函数。
        - window.onerror的处理函数共接受五个参数，含义如下。
          message：错误信息字符串
          source：报错脚本的 URL
          lineno：报错的行号，是一个整数
          colno：报错的列号，是一个整数
          error： 错误对象
      3.GlobalEventHandlers.onload、GlobalEventHandlers.onloadstart，元素完成加载时，会触发load事件，执行onload()。
      4.GlobalEventHandlers.onfocus，GlobalEventHandlers.onblur，当前元素获得焦点时，会触发element.onfocus；失去焦点时，会触发element.onblur。
      5.GlobalEventHandlers.onscroll，页面或元素滚动时，会触发scroll事件，导致执行onscroll()。
      6.GlobalEventHandlers.oncontextmenu，GlobalEventHandlers.onshow，用户在页面上按下鼠标的右键，会触发contextmenu事件，导致执行oncontextmenu()。如果该属性执行后返回false，就等于禁止了右键菜单。document.oncontextmenu与window.oncontextmenu效果一样。
      7.其他的事件属性
        鼠标的事件属性。

        onclick
        ondblclick
        onmousedown
        onmouseenter
        onmouseleave
        onmousemove
        onmouseout
        onmouseover
        onmouseup
        onwheel
        键盘的事件属性。

        onkeydown
        onkeypress
        onkeyup
        焦点的事件属性。

        onblur
        onfocus
        表单的事件属性。

        oninput
        onchange
        onsubmit
        onreset
        oninvalid
        onselect
        触摸的事件属性。

        ontouchcancel
        ontouchend
        ontouchmove
        ontouchstart
        拖动的事件属性分成两类：一类与被拖动元素相关，另一类与接收被拖动元素的容器元素相关。

        被拖动元素的事件属性。

        ondragstart：拖动开始
        ondrag：拖动过程中，每隔几百毫秒触发一次
        ondragend：拖动结束
        接收被拖动元素的容器元素的事件属性。

        ondragenter：被拖动元素进入容器元素。
        ondragleave：被拖动元素离开容器元素。
        ondragover：被拖动元素在容器元素上方，每隔几百毫秒触发一次。
        ondrop：松开鼠标后，被拖动元素放入容器元素。
        <dialog>对话框元素的事件属性。

        oncancel
        onclose

        // 浏览器模型
        window 对象
        Navigator 对象，Screen 对象
        Cookie
        XMLHttpRequest 对象
        同源限制
        CORS 通信
        Storage 接口
        History 对象
        Location 对象，URL 对象，URLSearchParams 对象
        ArrayBuffer 对象，Blob 对象
        File 对象，FileList 对象，FileReader 对象
        表单，FormData 对象
        IndexedDB API
        Web Worker

        // 网页元素接口
        <a>
        <img>
        <form>
        <input>
        <button>
        <option>
        <video>，<audio>
  </body>
</html>
本文链接： https://liushuai97.github.io/2019/09/19/JavaScript-语言入门教程/
版权声明： 本博客所有文章除特别声明外，均采用 CC BY 4.0 CN协议许可协议。转载请注明出处！
Anily前端 & Web Developer

任何值得做的事就值得把它做好。- Whatever is worth doing is worth doing well.