docs(dom): edit node

ruanyf · ruanyf · commit aac34369c38e · 2016-08-13T17:28:18.000+08:00
diff --git a/_config.yml b/_config.yml
@@ -17,7 +17,7 @@ introduction: 导论
 grammar: 语法
 stdlib: 标准库
 oop: 面向对象编程
-dom: DOM
+dom: DOM模型
 bom: 浏览器环境
 htmlapi: HTML网页的API
 jquery: jQuery
diff --git a/dom/document.md b/dom/document.md
@@ -446,11 +446,7 @@ focused = document.hasFocus();
 
 注意，有焦点的文档必定被激活（active），反之不成立，激活的文档未必有焦点。比如如果用户点击按钮，从当前窗口跳出一个新窗口，该新窗口就是激活的，但是不拥有焦点。
 
-### querySelector()，getElementById()，querySelectorAll()，getElementsByTagName()，getElementsByClassName()，getElementsByName()，elementFromPoint()
-
-以下方法用来选中当前文档中的元素。
-
-**（1）querySelector()**
+### querySelector()
 
 `querySelector`方法返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回`null`。
 
@@ -461,26 +457,26 @@ var el2 = document.querySelector('#myParent > [ng-click]');
 
 `querySelector`方法无法选中CSS伪元素。
 
-**（2）getElementById()**
+### getElementById()
 
-`getElementById`方法返回匹配指定ID属性的元素节点。如果没有发现匹配的节点，则返回null。
+`getElementById`方法返回匹配指定`id`属性的元素节点。如果没有发现匹配的节点，则返回`null`。
 
 ```javascript
-var elem = document.getElementById("para1");
+var elem = document.getElementById('para1');
 ```
 
-注意，在搜索匹配节点时，`id`属性是大小写敏感的。比如，如果某个节点的`id`属性是`main`，那么`document.getElementById("Main")`将返回`null`，而不是指定节点。
+注意，在搜索匹配节点时，`id`属性是大小写敏感的。比如，如果某个节点的`id`属性是`main`，那么`document.getElementById('Main')`将返回`null`，而不是指定节点。
 
-`getElementById`方法与`querySelector`方法都能获取元素节点，不同之处是`querySelector`方法的参数使用CSS选择器语法，`getElementById`方法的参数是HTML标签元素的id属性。
+`getElementById`方法与`querySelector`方法都能获取元素节点，不同之处是`querySelector`方法的参数使用CSS选择器语法，`getElementById`方法的参数是HTML标签元素的`id`属性。
 
 ```javascript
 document.getElementById('myElement')
 document.querySelector('#myElement')
 ```
 
-上面代码中，两个方法都能选中id为myElement的元素，但是getElementById()比querySelector()效率高得多。
+上面代码中，两个方法都能选中`id`为`myElement`的元素，但是`getElementById()`比`querySelector()`效率高得多。
 
-**（3）querySelectorAll()**
+### querySelectorAll()
 
 `querySelectorAll`方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。
 
@@ -499,7 +495,6 @@ var matches = document.querySelectorAll('div.note, div.alert');
 querySelectorAll方法支持复杂的CSS选择器。
 
 ```javascript
-
 // 选中data-foo-bar属性等于someval的元素
 document.querySelectorAll('[data-foo-bar="someval"]');
 
@@ -511,16 +506,15 @@ document.querySelectorAll('DIV:not(.ignore)');
 
 // 同时选中div，a，script三类元素
 document.querySelectorAll('DIV, A, SCRIPT');
-
 ```
 
 如果`querySelectorAll`方法和`getElementsByTagName`方法的参数是字符串`*`，则会返回文档中的所有HTML元素节点。
 
 与querySelector方法一样，querySelectorAll方法无法选中CSS伪元素。
 
-**（4）getElementsByClassName()**
+### getElementsByClassName()
 
-getElementsByClassName方法返回一个类似数组的对象（HTMLCollection类型的对象），包括了所有class名字符合指定条件的元素（搜索范围包括本身），元素的变化实时反映在返回结果中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。
+`document.getElementsByClassName`方法返回一个类似数组的对象（HTMLCollection类型的对象），包括了所有class名字符合指定条件的元素（搜索范围包括本身），元素的变化实时反映在返回结果中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。
 
 ```javascript
 // document对象上调用
@@ -537,39 +531,39 @@ document.getElementsByClassName('red test');
 
 上面代码返回class同时具有red和test的元素。
 
-**（5）getElementsByTagName()**
+### getElementsByTagName()
 
-getElementsByTagName方法返回所有指定标签的元素（搜索范围包括本身）。返回值是一个HTMLCollection对象，也就是说，搜索结果是一个动态集合，任何元素的变化都会实时反映在返回的集合中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。
+`document.getElementsByTagName`方法返回所有指定标签的元素（搜索范围包括本身）。返回值是一个`HTMLCollection`对象，也就是说，搜索结果是一个动态集合，任何元素的变化都会实时反映在返回的集合中。这个方法不仅可以在`document`对象上调用，也可以在任何元素节点上调用。
 
 ```javascript
-var paras = document.getElementsByTagName("p");
+var paras = document.getElementsByTagName('p');
 ```
 
-上面代码返回当前文档的所有p元素节点。
+上面代码返回当前文档的所有`p`元素节点。
 
-注意，getElementsByTagName方法会将参数转为小写后，再进行搜索。
+注意，`getElementsByTagName`方法会将参数转为小写后，再进行搜索。
 
-**（6）getElementsByName()**
+### getElementsByName()
 
-getElementsByName方法用于选择拥有name属性的HTML元素，比如form、img、frame、embed和object，返回一个NodeList格式的对象，不会实时反映元素的变化。
+`document.getElementsByName`方法用于选择拥有`name`属性的HTML元素（比如`<form>`、`<img>`、`<frame>`、`<embed>`和`<object>`等），返回一个类似数组的的对象（`NodeList`对象的实例）。
 
 ```javascript
 // 表单为 <form name="x"></form>
-var forms = document.getElementsByName("x");
+var forms = document.getElementsByName('x');
 forms[0].tagName // "FORM"
 ```
 
-注意，在IE浏览器使用这个方法，会将没有name属性、但有同名id属性的元素也返回，所以name和id属性最好设为不一样的值。
+注意，`getElementsByName`返回的结果不会实时反映网页元素的变化。
 
-**（7）elementFromPoint()**
+### elementFromPoint()
 
-elementFromPoint方法返回位于页面指定位置的元素。
+`document.elementFromPoint`方法返回位于页面指定位置的元素。
 
 ```javascript
 var element = document.elementFromPoint(x, y);
 ```
 
-上面代码中，elementFromPoint方法的参数x和y，分别是相对于当前窗口左上角的横坐标和纵坐标，单位是CSS像素。elementFromPoint方法返回位于这个位置的DOM元素，如果该元素不可返回（比如文本框的滚动条），则返回它的父元素（比如文本框）。如果坐标值无意义（比如负值），则返回null。
+上面代码中，`elementFromPoint`方法的参数`x`和`y`，分别是相对于当前窗口左上角的横坐标和纵坐标，单位是像素。`elementFromPoint`方法返回位于这个位置的DOM元素，如果该元素不可返回（比如文本框的滚动条），则返回它的父元素（比如文本框）。如果坐标值无意义（比如负值），则返回`null`。
 
 ### createElement()，createTextNode()，createAttribute()，createDocumentFragment()
 
diff --git a/dom/node.md b/dom/node.md
@@ -1,37 +1,38 @@
 ---
-title: Node节点
+title: DOM 模型概述
 layout: page
 category: dom
 date: 2013-10-07
 modifiedOn: 2014-05-18
 ---
 
-## DOM的概念
+## 基本概念
 
-DOM是文档对象模型（Document Object Model）的简称，它的基本思想是把结构化文档（比如HTML和XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口，以达到使用编程语言操作文档的目的（比如增删内容）。所以，DOM可以理解成文档（HTML文档、XML文档和SVG文档）的编程接口。
+### DOM
 
-DOM有自己的国际标准，目前的通用版本是[DOM 3](http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html)，下一代版本[DOM 4](http://www.w3.org/TR/dom/)正在拟定中。本章介绍的就是JavaScript对DOM标准的实现和用法。
+DOM是JavaScript操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个JavaScript对象，从而可以用脚本进行各种操作（比如增删内容）。
 
-严格地说，DOM不属于JavaScript，但是操作DOM是JavaScript最常见的任务，而JavaScript也是最常用于DOM操作的语言。所以，DOM往往放在JavaScript里面介绍。
+浏览器会根据DOM模型，将结构化文档（比如HTML和XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。所以，DOM可以理解成网页的编程接口。DOM有自己的国际标准，目前的通用版本是[DOM 3](http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html)，下一代版本[DOM 4](http://www.w3.org/TR/dom/)正在拟定中。
 
-## 节点的概念
+严格地说，DOM不属于JavaScript，但是操作DOM是JavaScript最常见的任务，而JavaScript也是最常用于DOM操作的语言。本章介绍的就是JavaScript对DOM标准的实现和用法。
 
-DOM的最小组成单位叫做节点（node），一个文档的树形结构（DOM树），就是由各种不同类型的节点组成。
+### 节点
 
-对于HTML文档，节点主要有以下六种类型：Document节点、DocumentType节点、Element节点、Attribute节点、Text节点和DocumentFragment节点。
+DOM的最小组成单位叫做节点（node）。文档的树形结构（DOM树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。
 
-节点|名称|含义
-----|----|----
-Document | 文档节点 | 整个文档（window.document）
-DocumentType | 文档类型节点 | 文档的类型（比如&lt;!DOCTYPE html&gt;）
-Element | 元素节点 | HTML元素（比如&lt;body&gt;、&lt;a&gt;等）
-Attribute | 属性节点| HTML元素的属性（比如class="right"）
-Text | 文本节点 | HTML文档中出现的文本
-DocumentFragment | 文档碎片节点 | 文档的片段
+节点的类型有七种。
 
-浏览器原生提供一个Node对象，上表所有类型的节点都是Node对象派生出来的。也就是说，它们都继承了Node的属性和方法。
+- `Document`：整个文档树的顶层节点
+- `DocumentType`：`doctype`标签（比如`<!DOCTYPE html>`）
+- `Element`：网页的各种HTML标签（比如`<body>`、`<a>`等）
+- `Attribute`：网页元素的属性（比如`class="right"`）
+- `Text`：标签之间或标签包含的文本
+- `Comment`：注释
+- `DocumentFragment`：文档的片段
 
-## Node节点的属性
+这七种节点都属于浏览器原生提供的节点对象的派生对象，具有一些共同的属性和方法。
+
+## 节点对象的属性
 
 ### nodeName，nodeType
 
@@ -246,7 +247,7 @@ baseURI属性返回一个字符串，由当前网页的协议、域名和所在
 
 该属性不仅document对象有（`document.baseURI`），元素节点也有（`element.baseURI`）。通常情况下，它们的值是相同的。
 
-## Node节点的方法
+## 节点对象的方法
 
 ### appendChild()，hasChildNodes()
 
diff --git a/htmlapi/elements.md b/htmlapi/elements.md
@@ -45,7 +45,6 @@ console.log(example) // 1
 
 由于历史原因，以下HTML元素的`name`属性，也会成为全局变量。
 
-- `<a>`
 - `<applet>`
 - `<area>`
 - `<embed>`
@@ -78,6 +77,17 @@ myForm[1] // [object HTMLFormElement]
 
 上面代码中，全局变量`myForm`的第一个成员指向`div`元素，第二个成员指向`form`元素。
 
+这些元素的`name`属性名，也会成为`document`对象的属性。
+
+```javascript
+// HTML代码为<img name="xx" />
+document.xx === xx // true
+```
+
+上面代码中，`name`属性为`xx`的`img`元素，自动生成了全局变量`xx`和`document`对象的属性`xx`。
+
+如果有多个`name`属性相同的元素，那么`document`对象的该属性指向一个类似数组的对象（NodeList对象的实例）。
+
 另外，如果`iframe`元素有`name`属性或`id`属性，那么生成的全局变量，不是指向`iframe`元素节点，而是指向这个`iframe`代表的子页面`window`对象。
 
 ## image元素
diff --git a/index.md b/index.md
@@ -53,9 +53,9 @@ modifiedOn: 2014-05-18
 - [Promise](advanced/promise.html)
 - [严格模式](advanced/strict.html)
 
-<h2 id="dom">DOM</h2>
+<h2 id="dom">DOM模型</h2>
 
-- [Node节点](dom/node.html)
+- [概述](dom/node.html)
 - [Document节点](dom/document.html)
 - [Element节点](dom/element.html)
 - [Text节点和DocumentFragment节点](dom/text.html)
