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
@@ -2,9 +2,9 @@ importance: 5

---

-# DOM children

-Look at this page:

```html
<html>
@@ -18,7 +18,7 @@ Look at this page:
</html>
```

-For each of the following, give at least one way of how to access them:
-- The `<div>` DOM node?
-- The `<ul>` DOM node?
-- The second `<li>` (with Pete)?
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
@@ -1,6 +1,6 @@
-1. Yes, true. The element `elem.lastChild` is always the last one, it has no `nextSibling`.
-2. No, wrong, because `elem.children[0]` is the first child *among elements*. But there may exist non-element nodes before it. So `previousSibling` may be a text node.

-Please note: for both cases if there are no children, then there will be an error.

-If there are no children, `elem.lastChild` is `null`, so we can't access `elem.lastChild.nextSibling`. And the collection `elem.children` is empty (like an empty array `[]`).
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
@@ -2,9 +2,9 @@ importance: 5

---

-# The sibling question

-If `elem` -- is an arbitrary DOM element node...

-- Is it true that `elem.lastChild.nextSibling` is always `null`?
-- Is it true that `elem.children[0].previousSibling` is always `null` ?
diff --git a/2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/solution.md b/2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/solution.md
@@ -1 +1 @@
-We'll be using `rows` and `cells` properties to access diagonal table cells.
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
@@ -2,17 +2,17 @@ importance: 5

---

-# Select all diagonal cells

-Write the code to paint all diagonal table cells in red.

-You'll need to get all diagonal `<td>` from the `<table>` and paint them using the code:

```js
-// td should be the reference to the table cell
td.style.backgroundColor = 'red';
```

-The result should be:

[iframe src="solution" height=180]
diff --git a/2-ui/1-document/03-dom-navigation/article.md b/2-ui/1-document/03-dom-navigation/article.md
@@ -129,127 +129,128 @@ Il y a aussi une fonction spéciale `elem.hasChildNodes()` pour vérifier s'il y

### Collections DOM

-As we can see, `childNodes` looks like an array. But actually it's not an array, but rather a *collection* -- a special array-like iterable object.

-There are two important consequences:

-1. We can use `for..of` to iterate over it:
  ```js
  for (let node of document.body.childNodes) {
    alert(node); // shows all nodes from the collection
  }
  ```
-  That's because it's iterable (provides the `Symbol.iterator` property, as required).

-2. Array methods won't work, because it's not an array:
  ```js run
  alert(document.body.childNodes.filter); // undefined (there's no filter method!)
  ```

-The first thing is nice. The second is tolerable, because we can use `Array.from` to create a "real" array from the collection, if we want array methods:

  ```js run
  alert( Array.from(document.body.childNodes).filter ); // function
  ```

-```warn header="DOM collections are read-only"
-DOM collections, and even more -- *all* navigation properties listed in this chapter are read-only.

-We can't replace a child by something else by assigning `childNodes[i] = ...`.

-Changing DOM needs other methods. We will see them in the next chapter.
```

-```warn header="DOM collections are live"
-Almost all DOM collections with minor exceptions are *live*. In other words, they reflect the current state of DOM.

-If we keep a reference to `elem.childNodes`, and add/remove nodes into DOM, then they appear in the collection automatically.
```

-````warn header="Don't use `for..in` to loop over collections"
-Collections are iterable using `for..of`. Sometimes people try to use `for..in` for that.

-Please, don't. The `for..in` loop iterates over all enumerable properties. And collections have some "extra" rarely used properties that we usually do not want to get:

```html run
<body>
<script>
-  // shows 0, 1, length, item, values and more.
  for (let prop in document.body.childNodes) alert(prop);
</script>
</body>
````

-## Siblings and the parent

-*Siblings* are nodes that are children of the same parent.

-For instance, here `<head>` and `<body>` are siblings:

```html
<html>
  <head>...</head><body>...</body>
</html>
```

-- `<body>` is said to be the "next" or "right" sibling of `<head>`,
-- `<head>` is said to be the "previous" or "left" sibling of `<body>`.

-The next sibling is in `nextSibling` property, and the previous one - in `previousSibling`.

-The parent is available as `parentNode`.

-For example:

```js
-// parent of <body> is <html>
alert( document.body.parentNode === document.documentElement ); // true

-// after <head> goes <body>
alert( document.head.nextSibling ); // HTMLBodyElement

-// before <body> goes <head>
alert( document.body.previousSibling ); // HTMLHeadElement
```

-## Element-only navigation

-Navigation properties listed above refer to *all* nodes. For instance, in `childNodes` we can see both text nodes, element nodes, and even comment nodes if there exist.

-But for many tasks we don't want text or comment nodes. We want to manipulate element nodes that represent tags and form the structure of the page.

-So let's see more navigation links that only take *element nodes* into account:

![](dom-links-elements.svg)

-The links are similar to those given above, just with `Element` word inside:

-- `children` -- only those children that are element nodes.
-- `firstElementChild`, `lastElementChild` -- first and last element children.
-- `previousElementSibling`, `nextElementSibling` -- neighbor elements.
-- `parentElement` -- parent element.

-````smart header="Why `parentElement`? Can the parent be *not* an element?"
-The `parentElement` property returns the "element" parent, while `parentNode` returns "any node" parent. These properties are usually the same: they both get the parent.

-With the one exception of `document.documentElement`:

```js run
alert( document.documentElement.parentNode ); // document
alert( document.documentElement.parentElement ); // null
```

-The reason is that the root node `document.documentElement` (`<html>`) has `document` as its parent. But `document` is not an element node, so `parentNode` returns it and `parentElement` does not.

-This detail may be useful when we want to travel up from an arbitrary element `elem` to `<html>`, but not to the `document`:
```js
-while(elem = elem.parentElement) { // go up till <html>
  alert( elem );
}
```
````

-Let's modify one of the examples above: replace `childNodes` with `children`. Now it shows only elements:

```html run
<html>
@@ -274,31 +275,31 @@ Let's modify one of the examples above: replace `childNodes` with `children`. No
</html>
```

-## More links: tables [#dom-navigation-tables]

-Till now we described the basic navigation properties.

-Certain types of DOM elements may provide additional properties, specific to their type, for convenience.

-Tables are a great example of that, and represent a particularly important case:

-**The `<table>`** element supports (in addition to the given above) these properties:
-- `table.rows` -- the collection of `<tr>` elements of the table.
-- `table.caption/tHead/tFoot` -- references to elements `<caption>`, `<thead>`, `<tfoot>`.
-- `table.tBodies` -- the collection of `<tbody>` elements (can be many according to the standard, but there will always be at least one -- even if it is not in the source HTML, the browser will put it in the DOM).

-**`<thead>`, `<tfoot>`, `<tbody>`** elements provide the `rows` property:
-- `tbody.rows` -- the collection of `<tr>` inside.

**`<tr>`:**
-- `tr.cells` -- the collection of `<td>` and `<th>` cells inside the given `<tr>`.
-- `tr.sectionRowIndex` -- the position (index) of the given `<tr>` inside the enclosing `<thead>/<tbody>/<tfoot>`.
-- `tr.rowIndex` -- the number of the `<tr>` in the table as a whole (including all table rows).

-**`<td>` and `<th>`:**
-- `td.cellIndex` -- the number of the cell inside the enclosing `<tr>`.

-An example of usage:

```html run height=100
<table id="table">
@@ -311,23 +312,23 @@ An example of usage:
</table>

<script>
-  // get td with "two" (first row, second column)
  let td = table.*!*rows[0].cells[1]*/!*;
-  td.style.backgroundColor = "red"; // highlight it
</script>
```

-The specification: [tabular data](https://html.spec.whatwg.org/multipage/tables.html).

-There are also additional navigation properties for HTML forms. We'll look at them later when we start working with forms.

-## Summary

-Given a DOM node, we can go to its immediate neighbors using navigation properties.

-There are two main sets of them:

-- For all nodes: `parentNode`, `childNodes`, `firstChild`, `lastChild`, `previousSibling`, `nextSibling`.
-- For element nodes only: `parentElement`, `children`, `firstElementChild`, `lastElementChild`, `previousElementSibling`, `nextElementSibling`.

-Some types of DOM elements, e.g. tables, provide additional properties and collections to access their content.
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		We'll be using `rows` and `cells` properties to access diagonal table cells.