较久前读了一遍此书，再次温习一遍,梳理一下
最好的阅读是输出 ——玉伯

img

第一章 JavaScript简史

1.1 JavaScript的起源。

关键词：Netscape，LiveScript

1.2 DOM。

DOM是一套对文档的内容进行抽象和概念化的方法。

1.3 浏览器战争。

1.3.1 DHTML

1.3.2 浏览器之间的冲突。

DHTML打开了一个充满机会的新世界，但想要进入其中的人们却发现这是个充满苦难的世界。因此，没多久，DHTML就冲一个大热门变成了一个人们不愿提起的名词。

1.4 制定标准。

浏览器制造商们感兴趣的只不过是通过JavaScript操控网页的具体方法，但W3C推出的标准化DOM却可以让任何一种程序设计语言对使用任何一种标记语言编写出来的任何一份文档进行操控。

1.4.1 浏览器以外的考虑

DOM是一种API(应用编程接口)。简单地说，API就是一组已经得到有关各方共同认可的基本约定。

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

1.4.2 浏览器战争的结局

微软战胜Netscape

1.4.3 崭新的起点

WebKit，一种Web浏览器引擎；

Gecko(Firefox的核心)；

Trident(IE的核心)；

1.5 小结

第2章 JavaScript语法

2.1 准备工作

把script标签放到HTML文档的最后，</body>标签之前

程序设计语言分为：

2.2 语法

英语是一种解释型语言。语法就是它语言结构方面的各项规则

2.2.1 语句

这些指令叫做语句，建议在每条语句的末尾加分号，使代码易读。

2.2.2注释

JavaScript解释器能直接忽略掉这些信息

2.2.3变量

var mood="happy",age=33;

像上面这样声明和赋值是最有效率的做法，相当于下面语句的总和

var mood,age;
mood="happy";
age=33;

JavaScript语法不允许变量名中包含空格或标点符号(美元符号”$”除外)

通常驼峰格式是函数名，方法名和对象属性名命名的首选格式

2.2.4 数据类型

类型声明

强类型。弱类型

转义：在JavaScript里用反斜线对字符进行转义

布尔值不是字符串，false和”false“是两回事

2.2.5 数组

下标必须用方括号括起来

声明数组的同时对它进行填充。逗号隔开。

关联数组。不推荐使用。

2.2.6 对象

可以把数组也声明为对象。

2.3 操作

算术操作符，变量可以包含操作:var total=(1+4)*5;

2.4 条件语句

2.4.1 比较操作符

这里提到了一个原文有误的地方，赋值运算并非总是返回真值。

相等操作符==认为空字符串与false的含义相同。

2.4.2 逻辑操作符

逻辑与。逻辑或

2.5 循环语句

if语句唯一不足是无法完成重复性的操作。

2.5.1 while循环

2.5.2 for循环

2.6 函数

传参。

命名，驼峰，不包含空格。

变量的作用域

2.7 对象

属性。方法

2.7.1 内建对象

数组(Array)，Math对象，Data对象……

2.7.2 宿主对象

由浏览器提供的预定义对象。Form,Image,Element,document

2.8 小结

第3章

3.1 文档：DOM中的”D“。

3.2 对象：DOM中的”O“.

用户自定义对象，内建对象，数宿主对象。

3.3 模型：DOM中的”M“

模型：某种事物的表现形式

树

3.4 节点

node

3.4.1 元素节点

3.4.2 文本节点

3.4.3 属性节点。所有的属性节点都被包含在元素节点中。

3.4.4 CSS

3.4.5 获取元素

3种DOM方法获取元素节点：通过元素ID，通过便签名字和通过类名字

3.4.6 盘点知识点

3.5 获取和设置属性

3.5.1 getAttribute

3.5.2 setAttribute

object.setAttribute(attribute,value)

有两个参数，第一个参数为属性名，第二个参数为属性值；通过setAttribute对文档做出修改后，通过浏览器查看源代码时看到的仍是改变签的属性。这种表里不一的现象源自DOM的工作模式：先加载文档的静态内容，再动态刷新，动态刷新不影响静态内容。这正是DOM的真正威力：对页面内容进行刷新却不需要在浏览器里刷新页面。

3.6 小结

第4章 案例研究JavaScript图片库

4.1 标记

4.2 JavaScript。

为了把“占位符”图片替换为想要查看的图片，需要改变它的src属性。

4.2.1 非DOM解决方案。

但setAttribute的优势在于可以毫无问题地对文档里的元素属性进行修改。

4.2.2 最终的函数代码清单

4.3 应用这个JavaScript函数。

为了减少对站点的请求次数，应该把.js文件合并到一个文件中。事件处理函数。在特定事件发生时调用特定的JavaScript代码。

this

4.4 对这个函数进行扩展

4.4.1 childNodes属性。

获取任何一个元素的所有子元素，是一个数组。

4.4.2 nodeType属性。

childNodes属性返回的数组包含所有类型的节点，而不仅仅是元素节点。即空格和换行符都会被解释为节点。有12种可取值，但其中仅有3种实用价值:

4.4.3 在标记里增加一段描述

4.4.4 用JavaScript改变这段描述

4.4.5 nodeValue属性。

改变一个文本节点的值。

4.4.6 firstChild和lastChild属性

4.4.7 利用nodeValue属性刷新这段描述

4.5 小结重点：

如何利用DOM所提供的方法去编写图片库脚本。

如何利用事件处理函数把JavaScript代码与网页集成在一起。

第5章 最佳实践

5.1 过去的错误

5.1.1 不要怪罪JavaScript。

禁用JavaScript解释功能，质量低劣的脚本就会导致用户无法正常浏览。

5.1.2 Flash的遭遇。

滥用。

5.1.3 质疑一切。

增加这种额外行为是否有明确必要。

5.2 平稳退化。

浏览器不支持JavaScript的情况下顺理浏览。open()方法

5.2.1 “JavaScript:”伪协议。

“真”协议用来在因特网上的计算机之间传输数据包，如HTTP协议(http://),FTP协议(ftp://)等。

伪协议则是一种非标准化的协议。伪协议调用JavaScript代码的做法不好。

5.2.2 内嵌的事件处理函数

<a href="#" ></a>单就这条指令而言，“#”是未指向任何目标的内部链接。不能平稳退化。

5.2.3 谁关心这个

不平稳退化，搜索引擎的排名受损害。

预留退路经典的“平稳退化”的例子：把href属性设置为真是存在的URL地址。

5.3 向 CSS学习

5.3.1 结构与样式的分离。文档结构与文档样式的分离可以确保网页都能平稳退化。

5.3.2 渐进增强

“内容就是一切”

所谓渐进增强就是用一些额外的信息层去包裹原始数据。按照渐进增强原则创建出来的网页几乎都符合平稳退化原则。

5.4 分离JavaScript

健壮

5.5 向后兼容

5.5.1 对象检测。true or false

5.5.2 浏览器嗅探技术。通过提取浏览器供应商提供的信息来解决向后兼容问题。充满风险的浏览器嗅探技术正在被更简单也更健壮的对象检测技术所取代。

5.6 性能考虑

5.6.1 尽量减少访问DOM和尽量减少标记不管什么时候，只要是查询DOM中的某些元素，浏览器都会搜索整个DOM树。更好的办法是吧第一次搜索的结果保存在一个变量中，然后在循环里重用该结果

5.6.2 合并和放置脚本减少请求数量

5.6.3 压缩脚本JSMin，YUI Compressor，Closure Compiler

5.7 小结

第6章 案例研究

图片库改进版网页的可用性和可访问性

6.1 快速回顾。主要回顾了第4章的例子

6.2 它支持平稳退化吗？

6.3 它的JavaScript和HTML标记是分离的吗？行为层作用于其结构层之上

6.3.1 添加事件处理函数检查点。

检查当前浏览器是否理解名为getElementsByTagName的DOM方法。函数应该只有一个入口和一个出口，但实际中不能过分拘泥于这项原则。变量名。保留字。把充当循环计数器的变量命名为“i”是一种传统做法。字母“i”在这里的含义是“increment(递增)”。返回布尔值false相当于向浏览器传递了这样一条消息：“如果这个链接没被点击的情况采取行动”。

6.3.2 共享onload事件

在《锋利的jQuery》里也讲过了window.onload的特点。

把函数绑定到window.onload事件上。

6.4 不要做太多的假设

6.5 优化

6.6 键盘访问

最好不要使用onkeypress事件处理函数。onclick事件处理函数已经能满足需要。虽然叫onclick，但它对键盘访问的支持相当完美。

6.7 把JavaScript与CSS结合起来

6.8 DOM Core和HTML-DOM

支持DOM的任何一种程序设计语言都可以使用它们。用途也并非仅限于处理网页。HTML-DOM代码通常会更短，必须提醒一下，它们只能用来处理Web文档。

6.9 小结

第7章 动态创建标记

7.1 一些传统方法。

document.write和innerHTML

7.1.1 document.write

document对象的write()方法可以方便快捷地把字符串插入到文档里。但最大缺点是它违背了“行为应该与表现分离”的原则。避免使用。

7.1.2 innerHTML属性

HTML专有属性，不能用于任何其他标记语言文档。

7.2 DOM方法

setAttribute方法并未改变文档的物理内容

7.2.1 createElement方法文档碎片

7.2.2 appenChild方法

7.2.3 createTextNode方法

7.2.4 一个更复杂的组合

7.3 重回图片库

7.3.1 在已有元素前插入一个新元素。

insertBefore()方法

7.3.2 在现有元素后插入一个新元素。

没有inserAfter()方法

7.3.3 图片库二次改进版

7.4 Ajax用于概括异步加载页面内容的技术

7.4.1 XMLHttpRequest对象

这个对象充当着浏览器中的脚本(客户端)与服务器之间的中间人的角色。readyState属性有5个可能的值。

7.4.2 渐进增强与Ajax

7.4.3 Hijax渐进增强地使用Ajax

7.5小结

第8章 充实文档的内容

8.1 不应该做什么不要滥用DOM

8.2 把“不可见”变成“可见”

把某个元素的display属性设置为none，甚至可以让它根本不出现在浏览器窗口里，这个元素仍是DOM节点树的组成部分，只是浏览器不显示它们而已。

8.3 内容

abbr和acronym

DOM念成一个单词dom，它就是一个首字母缩写词；如果把它念成三个字母D-O-M，它就是一个缩略语。所有的首字母缩略词都是缩略语。为了避免混乱持续下去，在HTML5中acronym标签已被abbr标签代替

8.3.1 选用HTML，XHTML还是HTML5

不管选用的哪种文档类型，使用的标记必须与选用的DOCTYPE声明保持一致。注意：为了与早期的浏览器保持兼容，应该在如<img/>,<br/>等的反斜杠字符的前面保留一个空格。

8.3.2 CSS

8.3.3 JavaScript

浏览器对缩略语的默认呈现行为也是各有各的做法

8.4 显示“缩略语列表”

8.4.1 编写displayAbbreviations函数为了提高循环的可读性，建议把本次循环里正在被遍历的那个abbreviations数组元素，赋给一个变量。

8.4.2 创建标记使用appendChild()方法吧dtitle_txt文本节点添加到dtitle元素节点引用body标签的具体做法有两种：

8.4.3 一个浏览器“地雷”对浏览器的名称和版本号进行嗅探的办法很难做到面面俱到，而且往往会导致非常复杂难解的代码

8.5 显示“文件来源链接表”

在实践中，浏览器会完全忽视cite属性的存在使用continue立刻跳到下一次循环，不再继续执行本次循环中的后续语句

注意：在编写DOM脚本时，你会想当然地认为某个节点肯定是一个元素节点，这是一种相当常见的错误。如果没有百分之百的把握，就一定要去检查nodeType属性值。

8.6 显示“快捷清单”accesskey

8.7 检索和添加信息

JavaScript脚本只应该用来充实文档的内容，要避免使用DOM技术来创建核心内容

8.8 小结

第9章 CSS-DOM

9.1 三位一体的网页

结构层：由标记语言创建，标签对网页内容的语义含义做出了描述，但这些标签并不包含任何关于内容如何显示的信息

表示层：由CSS负责完成

行为层：负责内容应该如何响应时间这一问题。

9.1.4 分离改变元素的呈现效果当然是表示层的“势力范围”，但响应用户触发的时间确实行为层的领地。表示层和行为层的这种重叠形成了一个灰色地带。CSS正在利用伪类走近DOM的领地，但DOM也有反击之道。

9.2 style属性

包含元素的样式，查询这个属性将返回一个对象而不是一个简单的字符串。

9.2.1 获取样式

方法和属性其实是关联在某个对象上的函数和变量

DOM要求用驼峰命名法

DOM style属性不能用来检索在外部CSS文件里声明的样式

9.2.2 声明样式

style对象的属性值永远是一个字符串

9.3 何时该用DOM脚本设置样式

9.3.1 根据元素在节点树里的位置来设置样式

9.3.2 根据某种条件反复设置某种样式虽然利用表格来做页面布局不是好主意，但利用表格来显示表格数据缺失理所应当的

9.3.3 响应事件判断

何时应该使用:hover属性，何时应该使用onmouseover事件

在需要决定是采用纯粹的CSS来解决，还是利用DOM来设置样式。要考虑以下因素：

如果你手里只有榔头，那么你看到的任何东西都像钉子。

9.4 className属性

通过className属性设置某个元素的class属性时将替换而不是追加该元素原有的class设置

可以封装一个addClassfunction

addClass(element,value){
                if (!element.className) {
                    element.className = value;
                }
                else{
                    newClassName = element.className;
                    newClassName+="";
                    newClassName+=value;
                    element.className = newClassName;
                }
            }

对函数进行抽象

把一个非常具体的东西改进为一个较为通用的东西的过程叫做抽象

第10章 用JavaScript实现动画效果

10.1 动画基础知识

简单地说，动画就是让元素的位置随着时间而不断地发生变化

10.1.1 位置

position属性的合法值有static,fixed,relative,和absolute四种

10.1.2 时间

setTimeout()，绝大多数时候把这个函数调用赋值给一个变量将是个好主意

10.1.3 时间递增量

10.1.4 抽象

使用参数变量代替硬编码常数

10.2 实用的动画

10.2.1 提出问题

10.2.2 解决问题

10.2.3 CSS

overflow属性的可取值有4种：visible,hidden,scroll和auto

10.2.4 JavaScript

10.2.5 变量作用域问题

也就是说，既不能使用全局变量，也不能使用局部变量。我们需要一种介乎它们而这之间的东西，需要一个只与正在被移动的那个元素有关的变量。

只与某个特定元素有关的变量是存在的。事实上，我们一直在使用它们。那就是属性。

JavaScript允许我们为元素创建属性。

10.2.6 改进动画效果

Math对象的ceil

10.2.7 添加安全检查

var xpos = parseInt(elem.style.left); var ypos = parseInt(elem.style.top);

看出来了吗？这里需要假设elem元素肯定有一个left样式和一个top样式属性。我们其实应该先检查一下这是不是事实

10.2.8 生成HTML标记

用JavaScript来生成

10.3 小结

第11章 HTML5

今天，HTML5的出现使得DOM,样式和行为之间的界限变得模糊了。

11.1 HTML5简介

随着HTML5的到来，上面所说的结构层，样式层和行为层已经被整装到小集合中，不过也仅仅就是一个集合。

HTML5的目标是和已有的HTML及XHTML文档全部兼容

不过有个前提——尽可能提前检查浏览器对HTML5的支持情况

11.2 来自朋友的忠告

Modernizr是一个开源的JavaScript库，利用它富特性检测功能。

一定要把这个脚本放在<head>元素中。虽然这与第五章建议的不一致，但这样做有特殊的原因。把它放在开头，可以在加载其它标记之前先加载它，以便它在文档呈现之前能够创建好新的HTML5元素。

11.3 几个示例

11.3.1 Canvas

HTML5 的canvas元素通过它可以动态创建和操作图形图像

canvas可不仅仅能够用来绘制矢量路径，还可以通过它来显示和操作位图图像。

11.3.2 音频和视频

video和audio

这两个标签都很简单，但是并没有说明支持哪些视频格式

编解码器的核心就是一个算法

目前没有一款浏览器支持所有容器和编解码器

眼下看来，为了保证每个人都能看到视频，必须制作多种合适的视频并在video元素中包含多个来源

可以自定义控件，不管创建什么控件，都别忘了在video元素中添加control元素

addEventListener是为对象添加事件处理函数的规范方法。IE8及以前版本使用的是一个不同的attachEvent方法。

10.3.3 表单

增加了新的控件类型，新的属性，如

旧浏览器会将该类型默认为text，并呈现出标准的文本输入框

为了应对不兼容的浏览器，必须使用特性检测来准备另一个方案。

11.4 HTML5还有其他特性吗？

有！并且就在写本篇文章前不久，HTML5规范已经尘埃落定！

11.5 小结

第12章 综合示例

主要做了一个综合的项目，把所有与DOM脚本编程相关的技术学以致用

12.1 项目简介

12.2 设计

12.3 CSS

12.4 标记

12.5 JavaScript

在使用JavaScript编写验证表单的脚本时，要记住三件事：

12.6 小结

有时候，只要静下心来，回头看一看，把视角放得开阔一些，问题就会变得很清楚。从Tim Berners Lee发明万维网(World Wide Web)至今，它的宏伟远景就没有改变过：

Web的无所不在是它的魅力。保证任何人都能无障碍地使用它，是一个最基本的原则。