update dom tree

Li Xinyang · Li Xinyang · commit db530d1c1f38 · 2015-06-29T23:50:59.000+08:00
diff --git a/chapter3/00_intro.md b/chapter3/00_intro.md
@@ -8,7 +8,8 @@
 
 # DOM 编程艺术
 
-DOM 编程就是使用 W3C 定义的 API (Application Program Interface) 来操作 HTML 文档
+DOM 编程就是使用 W3C 定义的 API (Application Program Interface)
+来操作 HTML 文档
 （此处不局限于 HTML，亦可操作 XHTML、XML  等），使用户可以与进行页面交互。
 你需要了解节点、属性、样式等基本 DOM 操作，DOM 事件模型，数据存储
 (Cookie、Storage) 与数据通信 (Ajax) ，JavaScript 动画，音频、视频、Canvas
diff --git a/chapter3/01_dom_tree.md b/chapter3/01_dom_tree.md
@@ -190,28 +190,37 @@ __proto__: HTMLParagraphElement
 在元素节点中提取自己所需的节点，并予以操作。
 
 ```Javascript
-// 找到目标节点
+// Document.getElementsByTagName()
+// 更具标签名找到目标节点的集合
 var node = document.getElementsByTagName('h1')[0];
 
-// 找到目标节点的父节点，此例中为 body 元素
+// Node.parentNode;
+// 获得目标节点的父节点，此例中为 body 元素
 node.parentNode;
-// 找到目标节点的第一个子节点，此例中并不存在即为 null
+
+// Node.firstChild
+// 获得目标节点的第一个子节点，此例中并不存在即为 null
 node.firstChild; // null
-// 找到目标节点的最后一个子节点，此例中并不存在即为 null
+
+// Node.lastChild
+// 获得目标节点的最后一个子节点，此例中并不存在即为 null
 node.lastChild;  // null
 
-// 找到目标节点的前一个相邻节点，此例中为 a 元素（<a href="">My Link</a>）
+// Node.previousSibling;
+// 获得目标节点的前一个相邻节点，此例中为 a 元素（<a href="">My Link</a>）
 node.previousBibling;
-// 找到目标节点的下一个相邻节点，此例中并不存在即为 null
+
+// Node.nextSibling;
+// 获得目标节点的下一个相邻节点，此例中并不存在即为 null
 node.nextSibling;
 ```
 
 ### 节点类型
 
 **常用节点类型**
 
-- ELEMENT_NODE 可使用 `document.createElement('elementName');`创建
-- TEXT_NODE 可使用 `document.createTextNode('Text Value');` 创建
+- ELEMENT_NODE 可使用 `Document.createElement('elementName');`创建
+- TEXT_NODE 可使用 `Document.createTextNode('Text Value');` 创建
 
 **不常用节点类型**
 
@@ -221,7 +230,7 @@ node.nextSibling;
 
 **不同节点对应的NodeType类型**
 
-此值可以通过 `element.nodeType` 来获取。
+此值可以通过 `Node.nodeType` 来获取。
 
 |节点编号|节点名称|
 |--------|--------|
@@ -238,7 +247,8 @@ node.nextSibling;
 |11|Document Fragment|
 |12|Notation|
 
-NOTE：此处需要清楚`节点`和`元素`的区别。我们平常说的`元素`其实指的是节点中得
+NOTE：此处需要清楚`节点`和`元素`的区别。我们平常说的`元素`
+其实指的是节点中得
 `元素节点`，
 所以说`节点`包含`元素`，节点还包括文本节点、实体节点等。
 
@@ -261,9 +271,9 @@ NOTE：此处需要清楚`节点`和`元素`的区别。我们平常说的`元
 ```
 // 在选取元素节点后
 
-p.firstElementChild; // <em>Xinyang</em>
-p.lastElementChild;  // <a href="http://li-xinyang.com">主页</a>
+p.firstElementChild;       // <em>Xinyang</em>
+p.lastElementChild;        // <a href="http://li-xinyang.com">主页</a>
 
-em.nextElementSibling; // <a href="http://li-xinyang.com">主页</a>
+em.nextElementSibling;     // <a href="http://li-xinyang.com">主页</a>
 em.previousElementSibling; // null
 ```
diff --git a/chapter3/02_node_manipulation.md b/chapter3/02_node_manipulation.md
@@ -4,7 +4,6 @@
 
   - [节点操作](#%E8%8A%82%E7%82%B9%E6%93%8D%E4%BD%9C)
     - [获取节点](#%E8%8E%B7%E5%8F%96%E8%8A%82%E7%82%B9)
-- [h1](#h1)
       - [接口获取节点](#%E6%8E%A5%E5%8F%A3%E8%8E%B7%E5%8F%96%E8%8A%82%E7%82%B9)
         - [getElementById](#getelementbyid)
         - [getElementsByTagName](#getelementsbytagname)
@@ -22,22 +21,25 @@
 
 ## 节点操作
 
-通过 JavaScript 来选取操作修改节点。
+因为 DOM 的存在，这使我们可以通过 JavaScript 来获取、创建、修改、或删除节点。
+
+NOTE：下面提供的例子中的 `element` 均为已经被去出的元素节点。
 
 ### 获取节点
 
 **父子关系**
 
-- `parentNode`
-- `firstChild`/`lastChild`
-- `childNodes`/`children`
+- `element.parentNode`
+- `element.firstChild`/`element.lastChild`
+- `element.childNodes`/`element.children`
 
 **兄弟关系**
 
-- `previousSibling`/`nextSibling`
-- `previousElementSibling`/`nextElementSibling`
+- `element.previousSibling`/`element.nextSibling`
+- `element.previousElementSibling`/`element.nextElementSibling`
 
-通过节点直接的关系获取节点会导致代码维护性大大降低（节点之间的关系变化会直接影响到获取节点）。通过接口则可以有效的解决此问题。
+通过节点直接的关系获取节点会导致代码维护性大大降低（节点之间的关系变化会直接影响到获取节点）。
+通过接口则可以有效的解决此问题。
 
 ```html
 <!DOCTYPE html>
@@ -303,4 +305,4 @@ var elementsHTML = element.innerHTML;
 **存在的问题**
 
 - 低版本 IE 存在内存泄露
-- 安全问题（用户可以在名称中运行脚本代码）
+- 安全问题（用户可以在名称中运行脚本代码）
