fix: typo

leviding · web-flow · commit 7e60017266d2 · 2022-07-25T21:46:19.000+08:00
diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md
@@ -24,8 +24,8 @@ setTimeout(() => document.body.style.background = '', 3000); // 恢复回去
 
 在这，我们使用了 `style.background` 来修改 `document.body` 的背景颜色，但是还有很多其他的属性，例如：
 
-- `innerHTML` — 节点的 HTML 内容。
-- `offsetWidth` — 节点宽度（以像素度量）
+- `innerHTML` —— 节点的 HTML 内容。
+- `offsetWidth` —— 节点宽度（以像素度量）
 - ……等。
 
 很快，我们将学习更多操作 DOM 的方法，但首先我们需要了解 DOM 的结构。
@@ -79,7 +79,7 @@ drawHtmlTree(node1, 'div.domtree', 690, 320);
 1. 由于历史原因，`<head>` 之前的空格和换行符均被忽略。
 2. 如果我们在 `</body>` 之后放置一些东西，那么它会被自动移动到 `body` 内，并处于 `body` 中的最下方，因为 HTML 规范要求所有内容必须位于 `<body>` 内。所以 `</body>` 之后不能有空格。
 
-在其他情况下，一切都很简单 — 如果文档中有空格（就像任何字符一样），那么它们将成为 DOM 中的文本节点，而如果我们删除它们，则不会有任何空格。
+在其他情况下，一切都很简单 —— 如果文档中有空格（就像任何字符一样），那么它们将成为 DOM 中的文本节点，而如果我们删除它们，则不会有任何空格。
 
 这是没有空格的文本节点：
 
@@ -193,9 +193,9 @@ let node6 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,
 drawHtmlTree(node6, 'div.domtree', 690, 500);
 </script>
 
-在这里我们可以看到一个新的树节点类型 — *comment node*，被标记为 `#comment`，它在两个文本节点之间。
+在这里我们可以看到一个新的树节点类型 —— **comment 节点**，被标记为 `#comment`，它在两个文本节点之间。
 
-我们可能会想 — 为什么要将注释添加到 DOM 中？它不会对视觉展现产生任何影响吗。但是有一条规则 — 如果一些内容存在于 HTML 中，那么它也必须在 DOM 树中。
+我们可能会想 —— 为什么要将注释添加到 DOM 中？它不会对视觉展现产生任何影响吗。但是有一条规则 —— 如果一些内容存在于 HTML 中，那么它也必须在 DOM 树中。
 
 **HTML 中的所有内容，甚至注释，都会成为 DOM 的一部分。**
 
@@ -205,10 +205,10 @@ drawHtmlTree(node6, 'div.domtree', 690, 500);
 
 一共有 [12 种节点类型](https://dom.spec.whatwg.org/#node)。实际上，我们通常用到的是其中的 4 种：
 
-1. `document` — DOM 的“入口点”。
-2. 元素节点 — HTML 标签，树构建块。
-3. 文本节点 — 包含文本。
-4. 注释 — 有时我们可以将一些信息放入其中，它不会显示，但 JS 可以从 DOM 中读取它。
+1. `document` —— DOM 的“入口点”。
+2. 元素节点 —— HTML 标签，树构建块。
+3. 文本节点 —— 包含文本。
+4. 注释 —— 有时我们可以将一些信息放入其中，它不会显示，但 JS 可以从 DOM 中读取它。
 
 ## 自己看看
 
@@ -233,9 +233,9 @@ drawHtmlTree(node6, 'div.domtree', 690, 500);
 ![](inspect.svg)
 
 在工具的右侧部分有以下子选项卡：
-- **Styles** — 我们可以看到按规则应用于当前元素的 CSS 规则，包括内建规则（灰色）。几乎所有内容都可以就地编辑，包括下面的方框的 dimension/margin/padding。
-- **Computed** — 按属性查看应用于元素的 CSS：对于每个属性，我们可以都可以看到赋予它的规则（包括 CSS 继承等）。
-- **Event Listeners** — 查看附加到 DOM 元素的事件侦听器（我们将在本教程的下一部分介绍它们）。
+- **Styles** —— 我们可以看到按规则应用于当前元素的 CSS 规则，包括内建规则（灰色）。几乎所有内容都可以就地编辑，包括下面的方框的 dimension/margin/padding。
+- **Computed** —— 按属性查看应用于元素的 CSS：对于每个属性，我们可以都可以看到赋予它的规则（包括 CSS 继承等）。
+- **Event Listeners** —— 查看附加到 DOM 元素的事件侦听器（我们将在本教程的下一部分介绍它们）。
 - ……等。
 
 学习它们的最佳方式就是多点一点看一下。大多数值都是可以就地编辑的。
@@ -247,9 +247,9 @@ drawHtmlTree(node6, 'div.domtree', 690, 500);
 首先：
 
 - 在元素（Elements）选项卡中选择第一个 `<li>`。
-- 按下 `key:Esc` — 它将在元素（Elements）选项卡下方打开控制台（Console）。
+- 按下 `key:Esc` —— 它将在元素（Elements）选项卡下方打开控制台（Console）。
 
-现在最后选中的元素可以通过 `$0` 来进行操作，先前选择的是 `$1`，等。
+现在最后选中的元素可以通过 `$0` 来进行操作，在之前的选择中则是 `$1`。
 
 我们可以对它们执行一些命令。例如，`$0.style.background = 'red'` 使选定的列表项（list item）变成红色，像这样：
 
