` 和 `

Date: Thu, 19 Mar 2020 11:25:47 +0800 Subject: [PATCH 02/11] Update article.md --- 2-ui/1-document/03-dom-navigation/article.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/2-ui/1-document/03-dom-navigation/article.md b/2-ui/1-document/03-dom-navigation/article.md index 17c0e348ab..29ca076b22 100644 --- a/2-ui/1-document/03-dom-navigation/article.md +++ b/2-ui/1-document/03-dom-navigation/article.md @@ -33,7 +33,7 @@ DOM 让我们可以对元素和它们中的内容做任何事，但是首先我 ````warn header="这里有个问题：`document.body` 的值可能是 `null`" 脚本无法访问在运行时不存在的元素。 -尤其是，如果一个脚本是在 `` 中，那么脚本是访问不到 `document.body` 的，因为浏览器还没有读到它。 +尤其是，如果一个脚本是在 `` 中，那么脚本是访问不到 `document.body` 元素的，因为浏览器还没有读到它。所以，下面例子中的第一个 `alert` 显示 `null`： @@ -67,10 +67,10 @@ DOM 让我们可以对元素和它们中的内容做任何事，但是首先我从现在开始，我们将使用下面这两个术语： -- **子节点（或者叫作子）** — 对应的是直系的子节点。换句话说，它们会完全嵌套在指定的一个元素中。举个例子，`` 和 `` 就是 `` 元素的子元素。 -- **子系元素** —— 对应的是所有嵌套在一个指定元素中的元素，包括这些元素的子元素，以此类推得到的所有元素。 +- **子节点（或者叫作子）** — 对应的是直系的子元素。换句话说，它们被完全嵌套在给定的元素中。例如，`` 和 `` 就是 `` 元素的子元素。 +- **子孙元素** — 嵌套在给定元素中的所有元素，包括子元素，以及子元素的子元素等。 -比如说，在这里 `` 有子元素 `

` 和 `

`，`

`（`

`（`
` 的子元素）这样嵌套更深的元素 — 这就是 `` 元素包含的整个子树。 +……`` 元素的子孙元素不仅包含直接的子元素 `
` 和 `
`，还包含像 `
`（`
` 的子元素）和 ``（`
` 的子元素）这样的元素 — 整个子树。 -**`childNodes` 集合提供了对所有子节点包括其中文本节点的访问。** +**`childNodes` 集合列出了所有子节点，包括文本节点。** -下面的例子显示了 `document.body` 的子元素： +下面这个例子显示了 `document.body` 的子元素： ```html run @@ -115,11 +115,11 @@ DOM 让我们可以对元素和它们中的内容做任何事，但是首先我 ``` -请注意在这边有一个有趣的细节。如果我们运行上面的例子，所展示代码中最后的元素是 ` @@ -182,54 +182,57 @@ DOM 集合甚至可以说本章中列出的**所有**导航属性都是只读的 ## 兄弟节点和父节点 -**兄弟节点**是指有同一个父节点的节点。比如说 `` 和 `` 就是兄弟节点： +**兄弟节点（Sibling）** 是指有同一个父节点的节点。 + +例如，`` 和 `` 就是兄弟节点： + +```html + + ...... + +``` - `` 可以说是 `` 的“下一个”或者“右边”兄弟节点。 - `` 可以说是 `` 的“前一个”或者“左边”兄弟节点。 -父节点可以通过 `parentNode` 访问。 - -在同一个父节点中一个节点的下一个节点（下一个兄弟节点）可以通过 `nextSibling` 访问，上一个节点可以通过 `previousSibling` 访问。 +下一个兄弟节点在 `nextSibling` 属性中，上一个是在 `previousSibling` 属性中。 -比如说： +可以通过 `parentNode` 来访问父节点。 -```html run - +// 的前一个是 +alert( document.body.previousSibling ); // HTMLHeadElement ``` -## 只在元素中导航 +## 纯元素导航 -上面列出的导航属性涉及到**所有**节点。比如说，在 `childNodes` 中我们可以看到文本节点，元素节点，甚至如果存在注释节点的话，也能访问到。 +上面列出的导航（navigation）属性引用 **所有** 节点。例如，在 `childNodes` 中我们可以看到文本节点，元素节点，甚至如果注释节点存在的话，也能访问到。 -但是对于很多任务来说，我们并不想要文本或者注释节点。我们希望可以操纵代表标签的元素节点以及构建整个页面的结构。 +但是对于很多任务来说，我们并不想要文本节点或注释节点。我们希望操纵的是代表标签的和形成页面结构的元素节点。 -所以让我们看看当只考虑**元素节点**时更多的导航链接： +所以，让我们看看更多只考虑 **元素节点** 的导航链接（navigation link）： ![](dom-links-elements.svg) -这些链接和之前上面的相似，只是在词中间加了 `Element`： +这些链接和我们在上面提到过的类似，只是在词中间加了 `Element`： -- `children` —— 只获取类型为元素节点的子节点。 -- `firstElementChild`，`lastElementChild` —— 第一个和最后一个子元素。 -- `previousElementSibling`，`nextElementSibling` —— 兄弟元素。 -- `parentElement` —— 父元素。 +- `children` — 仅那些作为元素节点的子代的节点。 +- `firstElementChild`，`lastElementChild` — 第一个和最后一个子元素。 +- `previousElementSibling`，`nextElementSibling` — 兄弟元素。 +- `parentElement` — 父元素。 ````smart header="为什么是 `parentElement`? 父节点可以不是一个元素吗？" -`parentElement` 属性返回的是“元素”父节点，而 `parentNode` 返回的是“任何类型”的父节点。这些属性通常来说是一样的：它们都获取父节点。 +`parentElement` 属性返回的是“元素类型”的父节点，而 `parentNode` 返回的是“任何类型”的父节点。这些属性通常来说是一样的：它们都是用于获取父节点。 -除了有一个例外就是 `document.documentElement`： +唯一的例外就是 `document.documentElement`： ```js run alert( document.documentElement.parentNode ); // document From 2781ef527cd79eb0478463ce769a8e2f7c2f867b Mon Sep 17 00:00:00 2001 From: LeviDing Date: Thu, 19 Mar 2020 13:20:11 +0800 Subject: [PATCH 04/11] Update article.md --- 2-ui/1-document/03-dom-navigation/article.md | 54 +++++++++++--------- 1 file changed, 30 insertions(+), 24 deletions(-) diff --git a/2-ui/1-document/03-dom-navigation/article.md b/2-ui/1-document/03-dom-navigation/article.md index c0d226eeea..0eefd3db33 100644 --- a/2-ui/1-document/03-dom-navigation/article.md +++ b/2-ui/1-document/03-dom-navigation/article.md @@ -239,12 +239,17 @@ alert( document.documentElement.parentNode ); // document alert( document.documentElement.parentElement ); // null ``` -换句话说，`documentElement`（对应 `` 标签）是根节点。形式上来讲，它有 `document` 作为它的父节点。但是 `document` 并不是一个元素节点，所以 `parentNode` 返回了 `document` 而 `parentElement` 却没有。 +因为根节点 `document.documentElement`（``）的父节点是 `document`。但 `document` 不是一个元素节点，所以 `parentNode` 返回了 `document`，但 `parentElement` 返回的是 `null`。 -有时候，当我们要遍历父节点并且在每个遍历的节点调用方法时这很重要，但是 `document` 并没有父元素节点，所以我们要将它排除在外。 +当我们想从任意节点 `elem` 到 `` 而不是到 `document` 时，这个细节可能很有用： +```js +while(elem = elem.parentElement) { // 向上，直到 + alert( elem ); +} +``` ```` -让我们修改上面的其中一个例子：用 `children` 来替换 `childNodes`。现在它就只显示元素： +让我们修改上面的一个示例：用 `children` 来替换 `childNodes`。现在它只显示元素： ```html run @@ -271,29 +276,29 @@ alert( document.documentElement.parentElement ); // null ## 更多链接：表 [#dom-navigation-tables] -到现在为止我们描述了基本的导航属性。 +到现在，我们已经描述了基本的导航（nabigation）属性。 -为了方便起见，某些类型的 DOM 元素会提供特定于其类型的额外属性。 +方便起见，某些类型的 DOM 元素可能会提供特定于其类型的其他属性。 -Tables 是其中一个很好也是很重要的例子。 +表（Table）是一个很好的例子，它代表了一个特别重要的情况： -**``** 元素支持 (除了上面给出的之外) 以下这些属性: -- `table.rows` — 用于表示表中 `` 元素的集合。 -- `table.caption/tHead/tFoot` — 用于访问元素 ``、``。 -- `table.tBodies` — `` 元素的集合（根据标准该元素数量可以很多）。 +**`
`、`
`** 元素支持 (除了上面给出的，之外) 以下这些属性: +- `table.rows` — `` 元素的集合。 +- `table.caption/tHead/tFoot` — 引用元素 ``，``。 +- `table.tBodies` — `` 元素的集合（根据标准还有很多元素，但是这里至少会有一个 — 即使没有被写在 HTML 源文件中，浏览器也会将其放入 DOM 中）。 -**``、``、``** 元素提供了 `rows` 属性： +**``，``，``** 元素提供了 `rows` 属性： - `tbody.rows` — 表内部 `` 元素的集合。 **``：** -- `tr.cells` — 在给定 `` 元素下 `/` 中 `` 的编号。 -- `tr.rowIndex` — 在表中 `` 元素的编号。 +- `tr.cells` — 在给定 `` 中的 `` 在封闭的 `//` 中的位置（索引）。 +- `tr.rowIndex` — 在整个表中 `` 的编号（包括表的所有行）。 **`` 中单元格的编号。 -下面是使用这些属性的例子： +用法示例： ```html run height=100
`，`
` 和 ` ` 单元格的集合。 -- `tr.sectionRowIndex` — 在封闭的 `
` 和 ` ` 单元格的集合。 +- `tr.sectionRowIndex` — 给定的 `
` 和 ` `：** - `td.cellIndex` — 在封闭的 `
@@ -306,22 +311,23 @@ Tables 是其中一个很好也是很重要的例子。
``` 规范：[tabular data](https://html.spec.whatwg.org/multipage/tables.html)。 -HTML 表单还有其它额外的导航属性。我们稍后会在开始使用表单时看到它们。 +HTML 表单还有其它导航（navigation）属性。稍后当我们开始使用表单时，我们将对其进行研究。 -# 总结 +## 总结 -给一个 DOM 节点，我们可以使用导航属性来立即访问和它直接相邻的节点。 +给定一个 DOM 节点，我们可以使用导航（navigation）属性访问其直接的邻居。 -这些属性主要分两组： +这些属性主要分为两组： -- 对于所有的节点：`parentNode`、`childNodes`、`firstChild`、`lastChild`、`previousSibling` 和 `nextSibling`。 -- 仅用于元素节点：`parentElement`、`children`、`firstElementChild`、`lastElementChild`、`previousElementSibling` 和 `nextElementSibling`。 +- 对于所有节点：`parentNode`，`childNodes`，`firstChild`，`lastChild`，`previousSibling`，`nextSibling`。 +- 仅对于元素节点：`parentElement`，`children`，`firstElementChild`，`lastElementChild`，`previousElementSibling`，`nextElementSibling`。 -某些类型的 DOM 元素，比如说像 tables，提供了额外的属性和集合用于访问其内容。 +某些类型的 DOM 元素，例如 table，提供了用于访问其内容的其他属性和集合。 From 77863d2d0c10b19f34e41b4faf315d99dc8cc68f Mon Sep 17 00:00:00 2001 From: LeviDing Date: Thu, 19 Mar 2020 13:22:52 +0800 Subject: [PATCH 05/11] Update task.md --- 2-ui/1-document/03-dom-navigation/1-dom-children/task.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/2-ui/1-document/03-dom-navigation/1-dom-children/task.md b/2-ui/1-document/03-dom-navigation/1-dom-children/task.md index b66bce81e3..6ff27aa707 100644 --- a/2-ui/1-document/03-dom-navigation/1-dom-children/task.md +++ b/2-ui/1-document/03-dom-navigation/1-dom-children/task.md @@ -18,7 +18,7 @@ importance: 5 ``` -如何能访问到以下内容： +对于以下各项，给出至少一种访问方式： - `
` DOM 节点？ -- `
` DOM 节点？ +- `
` DOM 节点？ - 第二个 `
` 节点（即包含 Pete 的节点）？ From 96e96b36d7241e0d5cabea9daa956c0c5e6ec6bd Mon Sep 17 00:00:00 2001 From: LeviDing Date: Thu, 19 Mar 2020 13:50:17 +0800 Subject: [PATCH 06/11] Update solution.md --- .../03-dom-navigation/1-dom-children/solution.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/2-ui/1-document/03-dom-navigation/1-dom-children/solution.md b/2-ui/1-document/03-dom-navigation/1-dom-children/solution.md index 3e3922c3cd..3070553be8 100644 --- a/2-ui/1-document/03-dom-navigation/1-dom-children/solution.md +++ b/2-ui/1-document/03-dom-navigation/1-dom-children/solution.md @@ -1,13 +1,13 @@ -这里有很多方法，比方说： +这里有很多种方法，例如：获取 `
` DOM 节点： ```js document.body.firstElementChild -// 或者 +// 或 document.body.children[0] -// 或者（第一个节点是空格，所有我们拿第二个） +// 或（第一个节点是空格，所以我们应该获取的是第二个） document.body.childNodes[1] ``` @@ -15,13 +15,13 @@ document.body.childNodes[1] ```js document.body.lastElementChild -// 或者 +// 或 document.body.children[1] ``` -获取第二个 `
`（即包含 Pete 的节点） +获取第二个 `
`（即包含 Pete 的节点）： ```js -// 获取
, 然后拿它的最后一个子元素 +// 获取
，然后获取它的最后一个子元素 document.body.lastElementChild.lastElementChild ``` From 4052be1bd76304d7f3f747206063946402bace4d Mon Sep 17 00:00:00 2001 From: LeviDing Date: Thu, 19 Mar 2020 13:51:52 +0800 Subject: [PATCH 07/11] Update task.md --- .../03-dom-navigation/3-navigation-links-which-null/task.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/2-ui/1-document/03-dom-navigation/3-navigation-links-which-null/task.md b/2-ui/1-document/03-dom-navigation/3-navigation-links-which-null/task.md index 0ecbb4f7ae..6d166d2314 100644 --- a/2-ui/1-document/03-dom-navigation/3-navigation-links-which-null/task.md +++ b/2-ui/1-document/03-dom-navigation/3-navigation-links-which-null/task.md @@ -6,5 +6,5 @@ importance: 5 如果 `elem` 是任意一个 DOM 元素节点…… -- `elem.lastChild.nextSibling` 值一直都是 `null` 这个判定是不是真的？ -- `elem.children[0].previousSibling` 值一直都是 `null` 这个判定是不是真的？ +- `elem.lastChild.nextSibling` 值一直都是 `null`，这个判定是不是真的？ +- `elem.children[0].previousSibling` 值一直都是 `null`，这个判定是不是真的？ From 9a6c272db2c57cc246f242838cc52a043fed40e6 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Thu, 19 Mar 2020 14:01:02 +0800 Subject: [PATCH 08/11] Update solution.md --- .../3-navigation-links-which-null/solution.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/2-ui/1-document/03-dom-navigation/3-navigation-links-which-null/solution.md b/2-ui/1-document/03-dom-navigation/3-navigation-links-which-null/solution.md index d85ef0d8af..5f5825fc62 100644 --- a/2-ui/1-document/03-dom-navigation/3-navigation-links-which-null/solution.md +++ b/2-ui/1-document/03-dom-navigation/3-navigation-links-which-null/solution.md @@ -1,4 +1,6 @@ -1. 是的，这是真的。`elem.lastChild` 一直是最后一个元素，它就没有 `nextSibling` ，所有如果存在子节点，这个问题的答案就是正确。 -2. 不，这是错的，因为 `elem.children[0]` 是元素中的第一个子元素。但是或许有非元素的节点在它之前。所以 `previousSibling` 或许是一个文本节点。 +1. 是的，这是真的。`elem.lastChild` 就是最后一个元素，它没有 `nextSibling`。 +2. 不，这是错的，因为 `elem.children[0]` 是元素中的第一个子元素。但是在它前面可能存在非元素的节点。所以 `previousSibling` 可能是一个文本节点。 -请注意，对于这两种情况，如果没有子节点就会出现错误。比如说如果 `elem.lastChild` 是 `null`，我们就访问不到 `elem.lastChild.nextSibling`。 +请注意，对于这两种情况，如果没有子节点，那么就会报错。 + +如果这里没有子节点，那么 `elem.lastChild` 是 `null`，所以我们就访问不到 `elem.lastChild.nextSibling`。并且 `elem.children` 是空的（像一个空数组一样 `[]`）。 From d049294cbe05b9b477337410b0cbb8b9b86b5001 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Thu, 19 Mar 2020 14:02:01 +0800 Subject: [PATCH 09/11] Update task.md --- 2-ui/1-document/03-dom-navigation/1-dom-children/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/03-dom-navigation/1-dom-children/task.md b/2-ui/1-document/03-dom-navigation/1-dom-children/task.md index 6ff27aa707..d2a79470d1 100644 --- a/2-ui/1-document/03-dom-navigation/1-dom-children/task.md +++ b/2-ui/1-document/03-dom-navigation/1-dom-children/task.md @@ -18,7 +18,7 @@ importance: 5 ``` -对于以下各项，给出至少一种访问方式： +对于以下各项，请给出至少一种访问方式： - `
` DOM 节点？ - `
` DOM 节点？ - 第二个 `
` 节点（即包含 Pete 的节点）？ From 9829d46ee64520c36857b7dd2359c3a2ca5bd68f Mon Sep 17 00:00:00 2001 From: LeviDing Date: Thu, 19 Mar 2020 14:26:35 +0800 Subject: [PATCH 10/11] Update task.md --- .../03-dom-navigation/4-select-diagonal-cells/task.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/task.md b/2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/task.md index 87369cc035..8f758c796c 100644 --- a/2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/task.md +++ b/2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/task.md @@ -4,9 +4,9 @@ importance: 5 # 选择所有对角线单元格 -编写代码来把表中的对角单元格都绘制成红色。 +编写代码来把表中的对角线单元格都绘制成红色。 -你需要用代码从 `` 中获取到所有的对角线 `
`，然后绘制它们： +你需要用代码从 `` 中获取所有的对角线单元格 `
`，然后绘制它们： ```js // td 表示的是对单元格的引用 From d7a919700e133d07c344d5ec68b992668b078664 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Thu, 19 Mar 2020 14:48:26 +0800 Subject: [PATCH 11/11] Update task.md --- .../03-dom-navigation/4-select-diagonal-cells/task.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/task.md b/2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/task.md index 8f758c796c..875b2b2ec4 100644 --- a/2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/task.md +++ b/2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/task.md @@ -2,11 +2,11 @@ importance: 5 --- -# 选择所有对角线单元格 +# 选择所有对角单元格 -编写代码来把表中的对角线单元格都绘制成红色。 +编写代码来把表中的对角单元格都绘制成红色。 -你需要用代码从 `` 中获取所有的对角线单元格 `
`，然后绘制它们： +你需要用代码从 `` 中获取所有的对角单元格 `
`，然后绘制它们： ```js // td 表示的是对单元格的引用

` 和 `	` 单元格的集合。 -- `tr.sectionRowIndex` — 在封闭的 `
` 和 `	` 单元格的集合。 +- `tr.sectionRowIndex` — 给定的 `
` 和 `	`：** - `td.cellIndex` — 在封闭的 `