《JavaScript DOM 编程艺术（第2版）》- 综合笔记

时间 2019-11-13

标签 javascript dom 编程艺术综合笔记栏目 JavaScript 繁體版

原文原文链接

第 1 章 JavaScript 简史

1.1 JavaScript 的起源

JavaScript 是 Netscape 公司与 Sun 公司合做开发的。javascript

JavaScript 是 ECMAScript 标准的一种实现，但在通常表述中，这二者是指同一种编程语言。css

1.2 DOM

DOM（Document Object Model，文档对象模型），是一套对文档的内容进行抽象和概念化的方法。html

经过 DOM 能够对文档内的某些实际内容进行查询和操控。java

1.3 浏览器战争

1.3.1 DHTML

DHTML（Dynamic HMTL，动态 HTML），是描述 HTML、CSS 和 JavaScript 技术组合的术语。其背后的含义是：node

利用 HTML 把网页标记为各类元素；
利用 CSS 设置元素样式和它们显示的位置；
利用 JavaScript 实时地操控页面和改变样式。

1.3.2 浏览器之间的冲突

Netscape 公司和 Microsoft 公司的浏览器的 DOM 的差别，致使了当时 DHTML 技术的难以实现。编程

1.4 制定标准

W3C 于 1998 年 10 月完成了“第 1 级 DOM”（DOM Level 1）标准，这种标准化的 DOM 可让任何一种程序设计语言对使用任何一种标记语言编写出来的任何一种文档进行操控。api

1.4.1 浏览器之外的考虑

DOM 是一种 API（Application Programming Interface，应用程序编程接口），也是一种已经获得有关各方共同承认的基本约定。数组

W3C 对 DOM 的定义是：“一个与系统平台和编程语言无关的接口，程序和脚本能够经过这个接口动态的访问和修改文档的内容、结构和样式。”浏览器

1.4.2 浏览器战争的结局

因为 Windows 操做系统的成功，Netscape 公司输了。战争促进了 DOM 标准的最终制定。网络

1.4.3 崭新的起点

WebKit 是 Safari 和 Chrome 采用的一个开源 Web 浏览器引擎；它与另外一个开源引擎——FireFox 的核心 Gecko，共同促进了 IE 的核心 Trident 等专有浏览器引擎逐步向 Web 标准靠拢。

1.5 小结

略。

第 2 章 JavaScript 语法

2.1 准备工做

使用 JavaScript 的两种方式：

将代码放到文档 <head> 标签中的 <script> 标签之间；
将代码保存为扩展名 .js 的独立文件，而后在文档的 <head> 标签中添加 <script> 标签，并使用 <script> 标签的 src 属性指向该文件。

最好的作法是把 <script> 标签放到 HTML 文档的最后，</body> 标签以前。

程序语言分为解释型和编译型两大类。Java 或 C++ 等语言须要一个编译器（compiler）。编译器是一种程序，可以把 Java 等高级语言编写出来的源代码翻译为直接在计算机上执行的文件。

解释型程序设计语言不须要编译器，仅须要解释器，对于 JavaScript 语言，通常由浏览器负责完成有关的解释和执行工做。

2.2 语法

2.2.1 语句

JavaScript 编写的脚本又一系列指令构成，这些指令叫做语句（statement）。

各条语句放在不一样行就能够分隔开，若是多条语句要放在同一行，必须使用分号分隔；建议每条语句的末尾都加分号。

2.2.2 注释

脚本中有一些须要解释器直接忽略的仅供参考或提醒的信息，这类语句就是注释（comment）。

单行注释开头使用双斜线 //；
多行注释须要将注释内容使用 /* 和 */ 包裹起来。

2.2.3 变量

人们把那些会发生变化的东西称为变量（variable），例如人的心情、年龄等。

把值存入变量的操做称为赋值（assignment）。

JavaScript 容许直接对变量赋值而无需事先声明这个变量，这在不少程序设计语言中是不容许的。

要求在使用任何变量以前必须先对它作出“介绍”，就叫做声明（declare）。

在 JavaScript 中，若是对某个变量赋值以前未声明该变量，赋值操做将自动声明该变量。虽然如此，但提早声明变量是良好的习惯，另外还关乎于变量的做用域与变量声明提早等影响。

声明变量使用 var 操做符（ES6 标准以前的方式）。另外：

能够用一条语句一次声明多个变量，变量名之间使用 , 分割；
变量的声明和赋值操做能够同时进行；

在 JavaScript 中变量名区分大小写；变量名中只能使用字母、数字、下划线 _ 和美圆符号 $，且第一个字符不能为数字。

变量名通常使用驼峰格式（camel case）或在词语之间使用下划线链接的方式命名。

在 JavaScript 中直接在代码中写出的数据称为字面量（literal），字面量除了表示本身之外不能表示任何别的东西……“它就是它！”嗯……

2.2.4 数据类型

有些其余语言要求在声明变量的同时声明变量的数据类型，这种作法称为类型声明（typing）。

必须明确类型声明的语言称为强类型（strongly typed）语言；而 JavaScript 不须要进行类型声明，所以它是一种弱类型（weakly typed）语言。这意味着能够在任何阶段改变变量的数据类型。

JavaScript 中的重要数据类型有：

1. 字符串
字符串（string）类型由零个或多个字符构成（零个的称为“空字符串”），字符串必须包在引号里，单引号双引号皆可，通常推荐单引号，而且整个脚本要一致，这才是良好的编程习惯。

若是要表示的字符串中包含单引号，为了不解释器认为它是整个字符串的结尾，则将其放在双引号中，反之则反。可是通常推荐使用转义符来转义（escaping）有代码含义的字符，在 JavaScript 中，使用反斜线\对字符进行转义。

2. 数值
数值（number）类型包含整数和带任意位小数的浮点数。在数值前面加一个减号-表示该数值为负数。

3. 布尔值
布尔（boolean）类型只包含两个值—— true 和 false。

布尔值不是字符串，千万不要把布尔值使用引号包起来。'false' 和 false 值两码事。

备注：书中只简单提到三种基本数据类型，没有提到另外两种基本数据类型 undefined 和 null，以及复杂数据类型 object。

2.2.5 数组

字符串、数值和布尔值都是标量（scalar）。若是某个变量是标量，它在任意时刻就只能有一个值。若是想用一个变量来存储一组值，就须要使用数组（array）。

数组是指用一个变量表示一个值的集合，集合中的每一个值都是这个数组的一个元素（element）。

声明数组有两种方式：

使用 Array 关键字，声明数组的同时能够指定数组的初始元素个数，也就是数组的长度（length）；
使用字符字面量的方式，即便用一对中括号来表示数组；

向数组中添加元素的操做称为填充（populating）；在填充数组时，须要给出新元素的值以及新元素在数组中的位置，这个位置就是这个元素的下标（index）；下标从 0 开始，数组里每一个元素都有下标，使用下标时必须用方括号将其括起来。

前面提到的两种声明数组的方法均可以在声明的同时，对数组进行填充操做。

数组元素能够保存任何类型的数据，同一数组的元素也能够保存不一样类型的数据；若是数组的元素中保存了另外一个数组，这种数组被称为多元数组，多元数组虽然强大，但通常建议使用对象将复杂数据保存在数组中。

在填充数组时只给出了元素的值，其下标为默认的数值，这个数组就是一个传统数组；而在填充时为元素同时添加下标和值，且下标不是数值，这种数组称为关联数组。填充元素时将下标设置为字符串，实际与为数组添加属性的操做相同。

备注：其实关联数组与 JSON 格式的数据相似，可是不推荐使用关联数组。

2.2.6 对象

与数组相似，对象也是使用一个名字表示一组值。对象的每一个值都是对象的一个属性。

建立对象也有两种方式：

使用 Object 关键字；
使用字符字面量的方式，即便用一对花括号来表示对象。

访问、添加或修改对象的属性可使用点号 .，也可使用中括号，中括号内的属性名必须为字符串，是要用引号括起来的。使用对象直接量的方式能够同时声明对象和为对象添加属性；属性的值能够是任何数据类型。

2.3 操做

对数据进行计算和处理的动做称为操做（operation）。

算数操做符

加 +、减 -、乘 *、除 / 操做，都是算术操做（arithmetic operation）；每一种都必须借助于相应的操做符（operator）才能完成，操做符是 JavaScript 为完成各类操做而定义的一些符号。

能够把多种操做组合在一块儿使用；为避免产生歧义或提升运算优先级，可使用括号把不一样的操做分割开。

为一个变量加 1 能够简写为++，减法操做也能够如此，再复习一遍前置 ++ 或 -- 和后置 ++ 或 -- 的区别：

前置 ++ / --先计算，后赋值；
后置 ++ / --先赋值，后计算。

这里要重点一下加法操做符，当两个操做数都为数字时便进行加法操做，若是有一个操做数是字符串时，便将另外一个操做数转换为字符串并将两个操做数首位相连地拼接（concatenation）为一个字符串。

值或变量包含自身的加法（或拼接）/减法操做后的赋值能够简写为 += / -=。

2.4 条件语句

JavaScript 使用条件语句（conditional statement）来作判断。

最多见的条件语句是 if 语句，条件必须放到 if 后面的圆括号中，条件的求值结果永远是一个布尔值；花括号中的语句，只要在给定条件的求值结果为 true 的状况下才会执行。

若是 if 语句后面只有一条语句，能够不加花括号，可是并不推荐这样作。

2.4.1 比较操做符

比较操做符包括大于 >、小于 <、大于或等于 >=、小于或等于 <=、相等 ==、全等 ===、不相等 != 和不全等 !==。

一个等于号 = 是赋值操做符，不是比较操做符，因此不要在条件判断时使用错；若是使用了赋值操做符进行了条件判断，会使判断条件的结果最终取决于被赋值的变量转换后的布尔值。

相等/不相等和全等/不全等的区别简单的说是：相等操做符不表示严格相等，在比较时会发生两个操做数的类型转换；而全等是严格相等，须要数据类型和值彻底相等才会返回 true，比较时是不会发生数据类型转换的。

2.4.2 逻辑操做符

JavaScript 容许把条件语句里的操做组合在一块儿。判断两个或更多个条件的成立与否的操做，称为逻辑比较（operand）。

逻辑与操做符 && 只要在它的两个操做数都为真时才会返回 true。

逻辑或操做符 || 只要有一个操做数为真则会返回 true。

逻辑非操做符 ! 只能用于单个操做数，其结果是将操做数返回的布尔值取反。

2.5 循环语句

循环语句能够反复屡次执行同一段代码，只要给定条件仍然能获得知足，包含在循环语句中的代码就将重复执行；一旦给定条件返回值再也不为 true，则中止循环。

2.5.1 while 循环

只要圆括号内的给定条件求值为 true，则包含在花括号里的代码反复执行；通常会在花括号里设定中止循环的条件。

do...while 循环

与 while 循环的区别是，在循环条件求值以前，包含在花括号里的代码至少会执行一次，而后再判断循环条件是否成立。

2.5.2 for 循环

for 循环是 while 循环的一种变体。

for 循环最多见的用途是对某个数组里的全体元素进行遍历处理，通常状况下，都会设定循环中止的条件为，循环轮次变量小于数组的最大长度，即 i < arr.length。

2.6 函数

若是须要屡次使用同一段代码，能够把它们封装成一个函数（function），函数就是一组容许在代码里随时调用的语句，每一个函数其实是一个短小的脚本。

通常状况下，须要先对函数作出定义再调用它们；固然也有自调用的匿名函数这种二般的状况。

函数能够接收传递进来的数据，并使用这些数据完成预约的操做，这些传递进函数的数据称为参数（argument）。

在定义函数时，能够为其声明任意多个参数，它们之间须要使用逗号分隔；在函数内部能够像使用普通变量通常使用任何一个传递进来的参数。

函数不只能够接收数据，还能够返回数据，返回数据使用 return 关键字，当结果返回完毕后，函数也将中止运行。

变量命名推荐使用下滑线分隔单词，而函数命名推荐使用驼峰格式，这样能够一目了然的分辨变量和函数。

变量的做用域

变量能够是全局的，也能够是局部的。

全局变量（global variable）能够在脚本中的任何位置被引用；全局变量的做用域是整个脚本。

局部变量（local variable）只存在于声明它的函数内部，在该函数外部是没法引用这个局部变量的；局部变量的做用域仅限于某个特定的函数内部。

前面提到变量声明时，应该使用 var 关键字，这样作就是为了明确变量的做用域。不使用 var 关键字声明的变量属于全局变量，不论这个变量是在脚本的什么位置声明的。而使用 var 关键字，变量就将成为一个局部变量，除非它不是在某个函数中。

函数在行为方面应该像一个自给自足的脚本，在定义一个函数时，必定要把其内部变量所有明确地声明为局部变量。

2.7 对象

对象（object）是自包含的数据集合，包含在对象里的数据能够经过两种形式访问——属性（property）和方法（method），对象就是由一些属性和方法组合在一块儿构成的数据实体：

属性是隶属于某个特定对象的变量；
方法是只有某个特定对象才能调用的函数。

要访问对象的属性或方法，可使用点号。

实例（instance）是对象的具体个体；将对象实例化后，即可以访问对象的属性和方法。

为给定对象建立一个新实例须要使用 new 关键字。

在 JavaScript 中，由用户建立的对象被称为用户自定义对象（user-defined object）；而语言提供的一系列预先定义好的对象称为内建对象（native object）。

2.7.1 内建对象

常见的内建对象如前面提到的数组对象（Array），以及经常使用的数学对象（Math）和日期对象（Date）等。

全部对象都是 Object 对象的实例。

具备抽象化的对象在命名时首字母通常都是大写。

2.7.2 宿主对象

有一些非 JavaScript 提供的，但也是预先定义好的对象，它们是由 JavaScript 的运行环境提供的，这些对象称为宿主对象（host object）。

例如在浏览器环境中的 window 对象，在 Node.js 环境中是没有的。这本书主要讲的也是一个浏览器提供的宿主对象——Document 对象。

2.8 小结

略。

第 3 章 DOM

3.1 文档：DOM 中的“D”

指的是 Document，即文档。当建立一个网页并把它加载到 Web 浏览器中时，浏览器便把网页文档转换为一个文档对象。

3.2 对象：DOM 中的“O”

指的是 Object，即对象。宿主对象 window 是最基础的对象之一，它对应着浏览器窗口自己，这个对象的属性和方法一般统称为 BOM（Browser Object Model，浏览器对象模型）。

3.3 模型：DOM 中的“M”

指的是 Model，意思是“模型”，但更形象的描述是“Map”，即地图。简单理解，地图标明了文档中各个节点的方位和彼此之间的关系，JavaScript 能够依照这个地图，来访问对应的元素。

书中用 DOM 树来更清楚的表现了网页的结构。

3.4 节点

节点（node）表示网络中的一个链接点，一个网络就是由一些节点构成的集合。

DOM 也是由节点构成的集合，在 DOM 中主要有三种节点：元素节点、文本节点以及属性节点。

3.4.1 元素节点

元素节点（element node）是 DOM 的主要组成部分。

标签的名字就是元素的名字，在通常状况下，标签就等于元素。

3.4.2 文本节点

在文档中，文本节点（text node）老是被包含在元素节点的内部，但并不是全部元素节点都包含有文本节点。

3.4.3 属性节点

属性节点（attribute node）用来对元素节点做出更具体的描述。属性老是被放在起始标签中，因此属性节点老是被包含在元素节点中。但并不是全部元素都包含属性。

3.4.4 CSS

经过 CSS（Cascading Style Sheet，层叠样式表）能够告诉浏览器如何显示一份文档。

在 CSS 中，也把文档内容视为一棵节点树，节点树上的各个元素都将继承（inheritance）其父元素的样式属性。

为了把某个或多个元素与其余元素区别开，须要使用标签的 id 或 class 属性。

1. class 属性
能够在全部元素上任意应用 class 属性。class 属性不具备惟一性。

2. id 属性
id 属性的用途是给网页里的某个元素加上一个独一无二的标识符，也就是说在整个文档中，id 属性具备惟一性。

3.4.5 获取元素

有 3 种 DOM 方法能够获取元素节点，分别是经过元素 ID、经过标签名和经过类名来获取。

1. getElmentById
该方法返回一个拥有指定 id 属性的元素节点对应的对象。它是 document 对象特有的函数。

2. getElmentsByTagName
该方法返回的是一个对象数组，每一个对象对应文档中有指定标签名的元素。

该方法容许一个通配符*作为其参数，这样能够将文档中的全部标签元素所有返回为一个数组。

3. getElmentsByClassName 该方法为 HTML5 DOM 中新增的方法，能够经过标签 class 属性中的类名来访问元素，返回值是一个对象数组，每一个对象对应文档中具备指定类名的元素。