作为JavaScript的入门书籍，之前一直没去看，实是惭愧。以前自己几乎没有系统去学JavaScript ，技能非常渣渣，so 从头开始。下面是读书笔记，写完后发现这本书内容挺少的，但要是问真正掌握了没有？呵呵。

《JavaScript DOM 编程艺术》读书笔记

杂七乱八，不一定来自原文

一：简介

• BOM：浏览器对象模型

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

二：语法

• 程序设计语言：解释型（js）、编译型（c++/java）

• 数据类型（typing）

弱类型，强类型：是否必须对数据类型做出声明，js毫无疑问是弱类型

字符串、数值、布尔值、数组、关联数组

• 对象（object）：自我包含数据集合，对象中得数据可以通过属性(property)和方法(method)访问。

javaScript 中的对象分为三种类型：
用户定义的对象(user-defined object)；
内建对象(native object)内建在JavaScript语言里的对象，如Array、Math和Date等；
宿主对象(host object)由浏览器提供的对象。

三：DOM

• DOM:Document Object Model(文档对象模型)

'M':model-->map 图谱

• 节点（node）：元素节点（element node）、文本节点、属性节点

• 基本操作：getElementById 返回对象，getElementsByTagName返回对象数组;getAttrubute、setAttrubute属性相关.

四：实例研究：JavaScript 美术馆

• childNodes 属性：获取任何元素的所有子元素数组；

• childNodes 属性：获取任何元素的所有子元素数组；

• nodeType 的属性值：元素节点：1；属性节点：2；文本节点：3；

• nodeValue 属性：改变一个文本节点的值，node.childNodes[0].nodeValue；
  firstChild,lastChild 属性：

五：JavaScript 编程原则和良好习惯

• HTML 中通过 javascript: 伪协议调用JavaScript代码做法不好；

• window.open(url,name,features) ：创建新的浏览器窗口；

• 循序渐进、平稳退化、向后兼容性、分离js、浏览器嗅探技术（browser sniffung）（不清楚是什么）

六：案例研究：JavaScript 美术馆改进版

• 把多个JS函数绑定到onload事件处理函数上：addLoadEvent();

  function addLoadEvent(func){ var oldonload = window.onload; if (typeof window.onload != 'function'){ window.onload = func; }else{ window.onload = function(){ oldonload(); func(); } } }

  function addLoadEvent(func){ var oldonload = window.onload; if (typeof window.onload != 'function'){ window.onload = func; }else{ window.onload = function(){ oldonload(); func(); } } }

• onclick、 onkeypress（谨慎）

七：动态HTML 内容

• innerHTML 属性：

  window.onload = function() { var testdiv = document.getElementById("testdiv"); testdiv.innerHTML = "<p>I inserted <em>this</em> content.</p>"; }

  window.onload = function() { var testdiv = document.getElementById("testdiv"); testdiv.innerHTML = "<p>I inserted <em>this</em> content.</p>"; }

• DOM的方法：

createElement：创造一个元素节点

createTextNode：创造一个文本节点

appendChild：将节点插入某元素中

• insertBefore、insertAfter（未提供）

  function insertAfter(newElement,targetElement) { var parent = targetElement.parentNode; if (parent.lastChild == targetElement) { parent.appendChild(newElement); } else { parent.insertBefore(newElement,targetElement.nextSibling); } }

  function insertAfter(newElement,targetElement) { var parent = targetElement.parentNode; if (parent.lastChild == targetElement) { parent.appendChild(newElement); } else { parent.insertBefore(newElement,targetElement.nextSibling); } }

• 八：充实文档内容

上章延伸

• 九：CSS-DOM

• Styling elements in the node tree（在结点树中进行样式设置）

• Repetitive styling（重复性的样式设置）

• Responding to events （响应特定事件的样式改变）

• className 属性；

十：javascript 动画效果

• setTimeout 与clearTimeout