diff --git a/2-ui/1-document/04-searching-elements-dom/1-find-elements/solution.md b/2-ui/1-document/04-searching-elements-dom/1-find-elements/solution.md
index 1ec4ebf131..cefc4a2443 100644
--- a/2-ui/1-document/04-searching-elements-dom/1-find-elements/solution.md
+++ b/2-ui/1-document/04-searching-elements-dom/1-find-elements/solution.md
@@ -1,36 +1,35 @@
 实现的方式有很多种。
 
-以下是列举的一些方法：
+以下列举的是其中一些方法：
 
 ```js
-// 1. The table with `id="age-table"`.
+// 1. 带有 id="age-table" 的表格。
 let table = document.getElementById('age-table')
 
-// 2. All label elements inside that table
+// 2. 表格内的所有 label 元素
 table.getElementsByTagName('label')
-// or
+// 或
 document.querySelectorAll('#age-table label')
 
-// 3. The first td in that table (with the word "Age").
+// 3. 表格中的第一个 td（带有 "Age" 字段）
 table.rows[0].cells[0]
-// or
+// 或
 table.getElementsByTagName('td')[0]
-// or
+// 或
 table.querySelector('td')
 
-// 4. The form with the name "search".
-// assuming there's only one element with name="search"
+// 4. 带有 name="search" 的 form。
+// 假设文档中只有一个 name="search" 的元素
 let form = document.getElementsByName('search')[0]
-// or, form specifically
+// 或者，专门对于 form
 document.querySelector('form[name="search"]')
 
-// 5. The first input in that form.
-form.getElementsByTagName('input')
-// or
+// 5. 表单中的第一个 input
+form.getElementsByTagName('input')[0]
+// 或
 form.querySelector('input')
 
-// 6. The last input in that form.
-// there's no direct query for that
-let inputs = form.querySelectorAll('input') // search all
-inputs[inputs.length-1] // take last
+// 6. 表单中的最后一个 input
+let inputs = form.querySelectorAll('input') // 查找所有 input
+inputs[inputs.length-1] // 取出最后一个
 ```
diff --git a/2-ui/1-document/04-searching-elements-dom/1-find-elements/task.md b/2-ui/1-document/04-searching-elements-dom/1-find-elements/task.md
index ef01ae7f4a..71024c7b4f 100644
--- a/2-ui/1-document/04-searching-elements-dom/1-find-elements/task.md
+++ b/2-ui/1-document/04-searching-elements-dom/1-find-elements/task.md
@@ -4,15 +4,15 @@ importance: 4
 
 # 搜索元素
 
-这是带有表格和表单的文档。
+这是带有表格（table）和表单（form）的文档。
 
-如何查找？
+如何查找？……
 
-1. `id="age-table"` 的表格。
-2. 所有的 `label` 元素都内嵌于表格（应该有三个）。
-3. 表格中的第一个 `td`（字段是 "Age"）。
-4. `form` 的一个字段是 `search`。
-5. 第一个 `input` 在表单中。
-6. 最后一个 `input` 在表单中。
+1. 带有 `id="age-table"` 的表格。
+2. 表格内的所有 `label` 元素（应该有三个）。
+3. 表格中的第一个 `td`（带有 "Age" 字段）。
+4. 带有 `name="search"` 的 `form`。
+5. 表单中的第一个 `input`。
+6. 表单中的最后一个 `input`。
 
-新开一个独立的窗口，打开页面 [table.html](table.html)，然后再此页面上使用开发者工具。
+在一个单独的窗口中打开 [table.html](table.html) 页面，并对此页面使用浏览器开发者工具。
diff --git a/2-ui/1-document/04-searching-elements-dom/article.md b/2-ui/1-document/04-searching-elements-dom/article.md
index c5e52bbe2e..f0729aa565 100644
--- a/2-ui/1-document/04-searching-elements-dom/article.md
+++ b/2-ui/1-document/04-searching-elements-dom/article.md
@@ -1,44 +1,12 @@
-# 搜索： getElement* 和 querySelector*
+# 搜索：getElement*，querySelector*
 
-当元素关联较密切时，DOM 导航属性是最好的。万一不是这样该怎么办？如何去获取页面上的任意一个元素？ 
+当元素彼此靠得近时，DOM 导航（navigation）属性是最好的。如果不是，那该怎么办？如何去获取页面上的任意一个元素？ 
 
-还有其他的搜索方法。
-## document.getElementById 或者只使用 id
-
-如果元素有 `id` 属性，那么该 `id` 也会有一个同名全局变量。
-
-我们可以用以下方式来访问元素：
-
-```html run
-<div id="*!*elem*/!*">
-  <div id="*!*elem-content*/!*">Element</div>
-</div>
-
-<script>
-  alert(elem); // DOM-element with id="elem"
-  alert(window.elem); // accessing global variable like this also works
-
-  // 对于 elem-content 会稍微有些复杂
-  // 因为里面有破折号，所以不是一个变量名
-  alert(window['elem-content']); // ...但可以使用方括号 [...]
-</script>
-```
-
-除非我们自己声明同名变量：
-
-```html run untrusted height=0
-<div id="elem"></div>
-
-<script>
-  let elem = 5;
-
-  alert(elem); // the variable overrides the element
-</script>
-```
+还有其他搜索方法。
 
-[在规范中](http://www.whatwg.org/specs/web-apps/current-work/#dom-window-nameditem)描述了这种行为，主要是考虑到兼容性才对它进行了支持。为了帮助我们，浏览器尝试了混合 JS 和 DOM 的命名空间。但这仅仅对简单脚本有效，因为它们可能会产生命名冲突。同时，当我们在 JS 中查看时，因为无法在视图中查看 HTML，所以变量的来源可能会很模糊。
+## document.getElementById 或者只使用 id
 
-选择特殊的方法，才是最好的选择：`document.getElementById(id)`。
+如果一个元素有 `id` 属性，那我们就可以使用 `document.getElementById(id)` 方法获取该元素，无论它在哪里。
 
 例如：
 
@@ -48,126 +16,69 @@
 </div>
 
 <script>
+  // 获取该元素
 *!*
   let elem = document.getElementById('elem');
 */!*
 
+  // 将该元素背景改为红色
   elem.style.background = 'red';
 </script>
 ```
 
-本教程中，我们经常使用 `id` 来直接引用属性，但这仅仅是为了简化。实际开发中，使用 `document.getElementById` 才是最佳选择。
-
-```smart header="There can be only one"
-`id` 必须唯一，文档中给定的 `id` 只能有唯一一个元素。
-
-如果有多个元素具有同名 `id`，那么对应方法的行为将不可预测。浏览器将随机返回其他的一个。因此未来保证 `id` 的唯一性，请严格遵守规则。
-```
-
-```warn header="Only `document.getElementById`, not `anyNode.getElementById`"
-`getElementById` 只能在 `document` 对象上调用。它会在整个文档中查找给定的 `id`。
-```
-
-## getElementsBy*
+此外，还有一个通过 `id` 命名的全局变量，它引用了元素：
 
-也有其他的方法来搜索节点：
+```html run
+<div id="*!*elem*/!*">
+  <div id="*!*elem-content*/!*">Element</div>
+</div>
 
-- `elem.getElementsByTagName(tag)` 用给定的标签来查找元素，并返回它们的集合。`tag` 参数也可以是“任何标签”的 `"*"`。
+<script>
+  // elem 是对带有 id="elem" 的 DOM 元素的引用 
+  elem.style.background = 'red';
 
-例如：
-```js
-// 获取所有在文档中的 div
-let divs = document.getElementsByTagName('div');
+  // id="elem-content" 内有连字符，所以它不能成为一个变量
+  // ...但是我们可以通过使用方括号 window['elem-content'] 来访问它
+</script>
 ```
 
-此方法可以在任意 DOM 元素的上下文中调用。
-
-让我们找出在表格中的所有 `input` 标签：
-
-```html run height=50
-<table id="table">
-  <tr>
-    <td>Your age:</td>
+……除非我们声明一个具有相同名称的 JavaScript 变量，否则它具有优先权：
 
-    <td>
-      <label>
-        <input type="radio" name="age" value="young" checked> less than 18
-      </label>
-      <label>
-        <input type="radio" name="age" value="mature"> from 18 to 50
-      </label>
-      <label>
-        <input type="radio" name="age" value="senior"> more than 60
-      </label>
-    </td>
-  </tr>
-</table>
+```html run untrusted height=0
+<div id="elem"></div>
 
 <script>
-*!*
-  let inputs = table.getElementsByTagName('input');
-*/!*
+  let elem = 5; // 现在 elem 是 5，而不是对 <div id="elem"> 的引用
 
-  for (let input of inputs) {
-    alert( input.value + ': ' + input.checked );
-  }
+  alert(elem); // 5
 </script>
 ```
 
-```warn header="Don't forget the `\"s\"` letter!"
-初级开发者会忽略字符 `"s"`。也就是说，它们会调用 `getElementByTagName` 而不是 <code>getElement<b>s</b>ByTagName</code>。
+```warn header="请不要使用以 id 命名的全局变量来访问元素"
+[在规范中](http://www.whatwg.org/specs/web-apps/current-work/#dom-window-nameditem) 对此行为进行了描述，所以它是一种标准。但这是注意考虑到兼容性才支持的。
 
-`"s"` 字符并不存在于 `getElementById`，因为它只返回单个元素。但是 `getElementsByTagName` 返回的是一个元素集合，所以 `"s"` 包含在内。
-```
+浏览器尝试通过混合 JavaScript 和 DOM 的命名空间来帮助我们。对于内联到 HTML 中的简单脚本来说，这还行，但是通常来说，这不是一件好事。因为这可能会造成命名冲突。另外，当人们阅读 JavaScript 代码且看不到对应的 HTML 时，变量的来源就会不明显。
 
-````warn header="It returns a collection, not an element!"
-另一个普遍存在的错误写法是：
+在本教程中，我们只会在元素来源非常明显时，为了简洁起见，才会使用 `id` 直接引用对应的元素。
 
-```js
-// 无法运行
-document.getElementsByTagName('input').value = 5;
+在实际开发中，`document.getElementById` 是首选方法。
 ```
 
-这无法运行，因为它接受输入的**集合**然后将值赋给它，而不是它里面的元素。
-
-我们应该迭代集合或者按给定索引来获取元素，然后赋值，就像下述所示：
+```smart header="`id` 必须是唯一的"
+`id` 必须是唯一的。在文档中，只能有一个元素带有给定的 `id`。
 
-```js
-// 应该可以运行（如果有输入）
-document.getElementsByTagName('input')[0].value = 5;
+如果有多个元素都带有同一个 `id`，那么使用它的方法的行为是不可预测的，例如 `document.getElementById` 可能会随机返回其中一个元素。因此，请遵守规则，保持 `id` 的唯一性。
 ```
-````
-
-还有其他很少使用的方法：
-
-- `elem.getElementsByClassName(className)` 返回具有给定 CSS 类的元素。元素也可能含有其他的类。
-- `document.getElementsByName(name)` 返回具有给定 `name` 属性的元素，文档范围。因为历史原因而很少使用。在这里提出，只是考虑到了完整性。
-
-例如：
-
-```html run height=50
-<form name="my-form">
-  <div class="article">Article</div>
-  <div class="long article">Long article</div>
-</form>
 
-<script>
-  // 按 name 查找属性
-  let form = document.getElementsByName('my-form')[0];
-
-  // 按在表单中的类查找
-  let articles = form.getElementsByClassName('article');
-  alert(articles.length); // 2, found two elements with class "article"
-</script>
+```warn header="只有 `document.getElementById`，没有 `anyElem.getElementById`"
+`getElementById` 方法只能被在 `document` 对象上调用。它会在整个文档中查找给定的 `id`。
 ```
 
 ## querySelectorAll [#querySelectorAll]
 
-现在将进行重要的内容
+到目前为止，最通用的方法是 `elem.querySelectorAll(css)`，它返回 `elem` 中与给定 CSS 选择器匹配的所有元素。
 
-`elem.querySelectorAll(css)` 的调用将返回与给定 CSS 选择器匹配 `elem` 中的所有元素。这是最常用和最有力的方法。
-
-我们将查找所有为最后一个子元素的  `<li>` 元素：
+在这里，我们查找所有为最后一个子元素的 `<li>` 元素：
 
 ```html run
 <ul>
@@ -189,26 +100,25 @@ document.getElementsByTagName('input')[0].value = 5;
 </script>
 ```
 
-因为可以使用任何 CSS 选择器，所以这种方法很有用。
+这个方法确实功能强大，因为可以使用任何 CSS 选择器。
 
-```smart header="Can use pseudo-classes as well"
-CSS 选择器的伪类，如 `:hover` 和 `:active` 都是被支持的。例如，`document.querySelectorAll(':hover')` 将会返回指针现在已经结束的集合（按嵌套顺序：从最外层 `<html>` 到嵌套最多的元素）。
+```smart header="也可以使用伪类"
+CSS 选择器的伪类，例如 `:hover` 和 `:active` 也都是被支持的。例如，`document.querySelectorAll(':hover')` 将会返回指针现在已经结束的元素的集合（按嵌套顺序：从最外层 `<html>` 到嵌套最多的元素）。
 ```
 
-
 ## querySelector [#querySelector]
 
-调用 `elem.querySelector(css)` 后，它会返回给定 CSS 选择器的第一个元素。
+`elem.querySelector(css)` 调用会返回给定 CSS 选择器的第一个元素。
 
-换句话说，结果与 `elem.querySelectorAll(css)[0]` 相同，但是后者会从**所有**找到的元素中选取一个，而 `elem.querySelector` 只会查找一个。因此编写会更快更简洁。
+换句话说，结果与 `elem.querySelectorAll(css)[0]` 相同，但是后者会查找 **所有** 元素，并从中选取一个，而 `elem.querySelector` 只会查找一个。因此它在速度上更快，并且写起来更短。
 
 ## matches
 
-之前的方法是搜索 DOM 的。
+之前的方法是搜索 DOM。
 
-[elem.matches(css)](http://dom.spec.whatwg.org/#dom-element-matches) 不会查找任何内容，它只会检查 `elem` 是否匹配给定的 CSS 选择器。它返回 `true` 或者 `false`。
+[elem.matches(css)](http://dom.spec.whatwg.org/#dom-element-matches) 不会查找任何内容，它只会检查 `elem` 是否与给定的 CSS 选择器匹配。它返回 `true` 或 `false`。
 
-当我们迭代元素（例如数组或者一些其他内容）并试图过滤那些我们感兴趣的元素时，这个方法会很方便。
+当我们遍历元素（例如数组或其他内容）并试图过滤那些我们感兴趣的元素时，这个方法会很有用。
 
 例如：
 
@@ -217,7 +127,7 @@ CSS 选择器的伪类，如 `:hover` 和 `:active` 都是被支持的。例如
 <a href="http://ya.ru">...</a>
 
 <script>
-  // 不一定是 document.body.children，也可以是任何集合
+  // 不一定是 document.body.children，还可以是任何集合
   for (let elem of document.body.children) {
 *!*
     if (elem.matches('a[href$="zip"]')) {
@@ -230,13 +140,11 @@ CSS 选择器的伪类，如 `:hover` 和 `:active` 都是被支持的。例如
 
 ## closest
 
-所有直接在给定元素之上的元素都被称为它的“祖先”。
-
-换句话说，祖先是：父类，父类的父类，它的父类等。祖先们一起组成了从元素到顶端的父类链。
+元素的祖先（ancestor）是：父级，父级的父级，它的父级等。祖先们一起组成了从元素到顶端的父级链。
 
-`elem.closest(css)` 方法会查找与 CSS 选择器匹配的最接近的祖先。`elem` 自己也会被搜索。
+`elem.closest(css)` 方法会查找与 CSS 选择器匹配的最近的祖先。`elem` 自己也会被搜索。
 
-换句话说，方法 `closest` 在元素中得到了提升，并检查每个父类。如果与选择器匹配，则停止搜索并返回祖先。
+换句话说，方法 `closest` 在元素中得到了提升，并检查每个父级。如果它与选择器匹配，则停止搜索并返回该祖先。
 
 例如：
 
@@ -260,14 +168,106 @@ CSS 选择器的伪类，如 `:hover` 和 `:active` 都是被支持的。例如
 </script>
 ```
 
-## Live 集合
+## getElementsBy*
+
+还有其他通过标签，类等查找节点的方法。
 
-所有的 `"getElementsBy*"` 方法都会返回 **live** 集合。这类集合总是可以反映出文档的当前状态而且在文档变化时，可以自动更新。
+如今，它们大多已经成为了历史，因为 `querySelector` 功能更强大，写起来更短。
 
-下面的实例中，有两个脚本。
+因此，这里我们介绍它们只是为了完整起见，而你仍然可以在就脚本中找到这些方法。
 
-1. 第一个方法创建了对集合 `<div>` 的引用。到目前为止，它的长度是 `1`。
-2. 第二个脚本在浏览器再遇到一个 `<div>` 时，它的长度会变成 `2`。
+- `elem.getElementsByTagName(tag)` 查找具有给定标签的元素，并返回它们的集合。`tag` 参数也可以是对于“任何标签”的星号 `"*"`。
+- `elem.getElementsByClassName(className)` 返回具有给定CSS类的元素。
+- `document.getElementsByName(name)` 返回在文档范围内具有给定 `name` 属性的元素。很少使用。
+
+例如：
+```js
+// 获取文档中的所有 div
+let divs = document.getElementsByTagName('div');
+```
+
+让我们查找 table 中的所有 `input` 标签：
+
+```html run height=50
+<table id="table">
+  <tr>
+    <td>Your age:</td>
+
+    <td>
+      <label>
+        <input type="radio" name="age" value="young" checked> less than 18
+      </label>
+      <label>
+        <input type="radio" name="age" value="mature"> from 18 to 50
+      </label>
+      <label>
+        <input type="radio" name="age" value="senior"> more than 60
+      </label>
+    </td>
+  </tr>
+</table>
+
+<script>
+*!*
+  let inputs = table.getElementsByTagName('input');
+*/!*
+
+  for (let input of inputs) {
+    alert( input.value + ': ' + input.checked );
+  }
+</script>
+```
+
+```warn header="不要忘记字母 `\"s\"`！"
+新手开发者有时会忘记字符 `"s"`。也就是说，他们会调用 `getElementByTagName` 而不是 <code>getElement<b>s</b>ByTagName</code>。
+
+`getElementById` 中没有字母 `"s"`，是因为它只返回单个元素。但是 `getElementsByTagName` 返回的是元素的集合，所以里面有 `"s"`。
+```
+
+````warn header="它返回的是一个集合，不是一个元素！"
+新手的另一个普遍的错误是写：
+
+```js
+// 行不通
+document.getElementsByTagName('input').value = 5;
+```
+
+这是行不通的，因为它需要的是一个 input 的 **集合**，并将值赋（assign）给它，而不是赋值给其中的一个元素。
+
+我们应该遍历集合或通过对应的索引来获取元素，然后赋值，如下所示：
+
+```js
+// 应该可以运行（如果有 input）
+document.getElementsByTagName('input')[0].value = 5;
+```
+````
+
+查找 `.article` 元素：
+
+```html run height=50
+<form name="my-form">
+  <div class="article">Article</div>
+  <div class="long article">Long article</div>
+</form>
+
+<script>
+  // 按 name 属性查找
+  let form = document.getElementsByName('my-form')[0];
+
+  // 在 form 中按 class 查找
+  let articles = form.getElementsByClassName('article');
+  alert(articles.length); // 2, found two elements with class "article"
+</script>
+```
+
+## 实时的集合
+
+所有的 `"getElementsBy*"` 方法都会返回一个 **实时的（live）** 集合。这样的集合始终反映的是文档的当前状态，并且在文档发生更改时会“自动更新”。
+
+在下面的例子中，有两个脚本。
+
+1. 第一个创建了对 `<div>` 的集合的引用。截至目前，它的长度是 `1`。
+2. 第二个脚本在浏览器再遇到一个 `<div>` 时运行，所以它的长度是 `2`。
 
 ```html run
 <div>First div</div>
@@ -286,7 +286,7 @@ CSS 选择器的伪类，如 `:hover` 和 `:active` 都是被支持的。例如
 </script>
 ```
 
-相反，`querySelectorAll` 会返回一个**static**集合。就像一个固定的元素数字。
+相反，`querySelectorAll` 返回的是一个 **静态的** 集合。就像元素的固定数组。
 
 如果我们使用它，那么两个脚本都会输出 `1`：
 
@@ -308,13 +308,11 @@ CSS 选择器的伪类，如 `:hover` 和 `:active` 都是被支持的。例如
 </script>
 ```
 
-现在我们可以很容易地看到不同之处。在文档中出现一个新的 `div` 后，静态集合并没有增加。
-
-我们在这里使用独立的脚本来说明元素添加是如何影响集合的，但是在此之后的任何 DOM 操作都会影响它们。很快我们就可以看到更多的细节。
+现在我们可以很容易地看到不同之处。在文档中出现新的 `div` 后，静态集合并没有增加。
 
 ## 总结
 
-有 6 种主要的方法，可以在 DOM 中进行搜素：
+有 6 种主要的方法，可以在 DOM 中搜素节点：
 
 <table>
 <thead>
@@ -327,6 +325,18 @@ CSS 选择器的伪类，如 `:hover` 和 `:active` 都是被支持的。例如
 </thead>
 <tbody>
 <tr>
+<td><code>querySelector</code></td>
+<td>CSS-selector</td>
+<td>✔</td>
+<td>-</td>
+</tr>
+<tr>
+<td><code>querySelectorAll</code></td>
+<td>CSS-selector</td>
+<td>✔</td>
+<td>-</td>
+</tr>
+<tr>
 <td><code>getElementById</code></td>
 <td><code>id</code></td>
 <td>-</td>
@@ -350,29 +360,15 @@ CSS 选择器的伪类，如 `:hover` 和 `:active` 都是被支持的。例如
 <td>✔</td>
 <td>✔</td>
 </tr>
-<tr>
-<td><code>querySelector</code></td>
-<td>CSS-selector</td>
-<td>✔</td>
-<td>-</td>
-</tr>
-<tr>
-<td><code>querySelectorAll</code></td>
-<td>CSS-selector</td>
-<td>✔</td>
-<td>-</td>
-</tr>
 </tbody>
 </table>
 
-请注意，只有在文档 `document.getElementById(...)` 的上下文中才能调用 `getElementById` 和 `getElementsByName`。但元素中没有  `elem.getElementById(...)` 会报错。
-
-也可以在元素上调用其他方法，例如 `elem.querySelectorAll(...)` 将会在 `elem`（在 DOM 子树中）内部进行搜素。
+目前为止，最常用的是 `querySelector` 和 `querySelectorAll`，但是 `getElementBy*` 可能会偶尔有用，或者可以在就脚本中找到。
 
-除此以外：
+此外：
 
 - `elem.matches(css)` 用于检查 `elem` 与给定的 CSS 选择器是否匹配。
 - `elem.closest(css)` 用于查找与给定 CSS 选择器相匹配的最近的祖先。`elem` 本身也会被检查。
 
-最后我们在提一种检查父子关系的方法：
--  如果 `elemB` 在 `elemA`（`elemA` 的后代）中或者当 `elemA==elemB` 时 `elemA.contains(elemB)` 将返回 true。
+让我们在这里提一下另一种用来检查子级与父级之间关系的方法，因为它有时很有用：
+- 如果 `elemB` 在 `elemA` 内（`elemA` 的后代）或者 `elemA==elemB`，`elemA.contains(elemB)` 将返回 true。