重读《JavaScript DOM编程艺术》（第一版）

今天来了雅兴去图书馆看书。把《JavaScript DOM编程艺术》温习了一遍，平时写js的机会不是特别多，很多知识都有些模糊了。

伴随着身边键盘卡啦卡啦的声音，一位手速不是一般的快的程序猿。我也快速的回顾了下~

Chapter 1     JavaScript简史

1、Netscape(网景)/Sun公司

2、JavaScript 1.0 — Netscspe Navigator 2

3、VBScript — IE 3

4、ECMA标准化 — 浏览器之争

5、什么是DOM？

W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

6、DHTML：HTML\CSS\JS三种技术结合的产物。（忽略）

7、W3C DOM标准化

8、JavaScript

（1）ECMAScript:核心语言功能

（2）DOM：Document Object Model 文档对象模型（多层节点结构）

（3）BOM：Broser Object Model浏览器对象模型

9、五大主流浏览器

IE、firefox、Chrome、Safari、Opera

Chapter 2      JavaScript语法

1、基本语法

（1）区分大小写

（2）借鉴C

（3）驼峰大小写格式

（4）注释          //           /**/

2、JavaScript插入方法

（1）嵌入

（2）外部

3、变量

（1）不允许含空格、标点，$除外

（2）局部变量(var)/全局变量

4、数据类型

（1）Undefined

（2）null（空对象指针，Undefined的值是null派生的）

（3）Boolean（true/false）

（4）Number（NaN/Infinity）

（5）String（转义字符，单/双引号）

（6）Array（length，关联数组）

（7）Object（var mkq = new Person ;）

5、拼接

alert(“10″+20);  //1020

alert(10+20);  //30

6、基本操作符

（1）一元

++\–+（符）-（符）

（2）位

~/&/|/^/<>/>>>（无符号右移）

（3）布尔操作

!/&&/||

（4）乘性

乘：

其中一个NaN → NaN

Indefinity*0 → NaN（not a number）

Indefinity*Indefinity → Indefinity

除：

其中一个NaN → NaN

Indefinity/Indefinity → NaN

0/0 → NaN

余同除

（5）加性

+/-

（6）关系

/=/<=

（7）相等

!=

=  全等

!   不全等

（8）条件

… ? … : …

（10）赋值

（11）逗号

值为最后一项

7、语句

if/while/do-while/for

switch

break/continue

8、函数

（1）function

（2）作用域（局部变量（函数里var）/全局变量）

Chapter 3      DOM

1、DOM

D — Document

O — Object

M — Model

2、节点node

元素节点（element node）：标签

文本节点（text node）：内容

属性节点（attribute node）：标签属性

3、getElementById()

getElementByTagName()

getElementByTagName(“*”).length元素节点的数目

4、getAttribute(属性名) 查属性节点

setAttribute(属性名,value) 修改属性节点

Chapter 4      案例研究：JavaScript美术馆

• 第一张
• 第二张
• 第三张
• 第四张

请选择图片

55555~调了我半个小时，结果是把source打成了sourse，我说怎么一点反应都没有。

回归知识点：

1、onclick=”return false;”

默认行为不会发生（不会链接到另一图片）

2、childNodes(所有子元素)

3、nodeType

(1)1 — 元素node

(2)2 — 属性node

(3)3 — 文本node

4、setAttribute()：不必记忆哪种属性可以用DOM

5、nodeValue节点的值

6、firstChild第一个元素

lastChild最后一个元素

Chapter 5      JavaScript编程原则和良好习惯

1、创建新窗口

window.open(url,name,features);

window.open(winURL,”mkq”,”width=320,height=490″);

2、JS伪协议：极力不推荐

3、预留退路：如果JavaScript禁用，如何？

4、分离JavaScript

5、window.onload()

Chapter 6      JavaScript美术馆改进版

1、预留退路：假设JS禁用的情况下

就算JS禁用：

还是能展示每一张图片，就是观看起来麻烦一些。

2、分离JavaScript

应该在外部文件里用onclick=”…”，这样才能做到分离JS。

方法：用一个id与JS联系。

细节：

（1）多个JS函数写进onload事件处理函数上

（2）可读性

（3）函数都要养成写{}的习惯

（4）不要放过每一个细节

（5）DOM Core和HTML-DOM

DOM Core

placeholder.setAttribute(“src”,source);

HTML-DOM

placeholder.src=source;

让我想到了花了2天赶出来的工作室主页~以后要上线，绝对要改好了再出现！这样用户体验才能满分！

Chapter 7     动态创建HTML内容

1、动态html

（1）老的方法：document.write()严重违背分离原则.innerHTML()

（2）新的方法：createElement()/createTextNode()/appendChild()/insertBefore()

2、creatElement()

创造元素节点

3、creatTextNode()

创建文本节点。

4、appendChild()

创建子节点。

5、insertBefore()

把一个新的元素插入到一个现有元素前面

parentElement(parentNode).insertBefore(newElement,targetElement)

insertAfter()方法不存在

6、innerHTML

是一项专利技术，不是业界标准。

7、最后的gallery