New chapter: Working with Element Text

src/SUMMARY.md

@@ -45,3 +45,4 @@
 - [Web APIs](web_apis/index.md)
     - [Document Object Model (DOM)](web_apis/dom.md)
     - [Поиск элементов в DOM](web_apis/querying_dom_elements.md)
+    - [Работа с текстом элемента](web_apis/working_with_element_text.md)

src/web_apis/working_with_element_text.md

@@ -0,0 +1,105 @@
+# Работа с текстом элемента
+
+### Получение текста
+
+Имея объект HTML-элемента, его текстовое содержимое в виде строки можно получить через свойство `innerText`.
+
+```html
+<p>Hello</p>
+```
+```js
+const paragraph = document.querySelector("p");
+paragraph.innerText;  // Возвращает: "Hello"
+```
+
+При этом `innerText` содержит текст не только самого элемента, но и всех вложенных элементов. Содержимое `innerText` примерно соответствует тому, что пользователь получит в буфере обмена, если выделит элемент и скопирует выделенное. Например, тег `<br>` превращается в перенос строки `\n`, между абзацев вставляются по два переноса строки, а содержимое невидимых элементов не учитывается. 
+
+```html
+<div>
+    <p>One<br>Two</p>
+    <p>Three</p>
+    <p style="display: none">Four</p>
+</div>
+```
+```js
+const div = document.querySelector("div");
+div.innerText;  // Возвращает: "One\nTwo\n\nThree"
+```
+
+### Установка текста
+
+Заменить текст элемента можно установкой нового значения свойству `innerText`. При этом переносы строки конвертируются в тег `<br>`.
+
+```html
+<!-- До выполнения JavaScript -->
+<p>Foo</p>
+```
+```js
+document.querySelector("p").innerText = "Bar\nBaz";
+```
+```html
+<!-- После выполнения JavaScript -->
+<p>Bar<br>Baz</p>
+```
+
+При установке значения свойству `innerText` всё существовавшее содержимое элемента теряется, в том числе вложенные элементы.
+
+```html
+<!-- До выполнения JavaScript -->
+<div>
+    <p>One</p>
+    <p>Two</p>
+</div>
+```
+```js
+document.querySelector("div").innerText = "Three";
+```
+```html
+<!-- После выполнения JavaScript -->
+<div>Three</div>
+```
+
+## Упражнения
+
+1. На странице расположен неупорядоченный список. Напиши скрипт, который показывает диалоговое окно со всеми элементами списка, но перечисленными через запятую.
+
+1. Дана страница системы мониторинга серверов. На странице показан список серверов и их статусов: up, down или disabled. Напиши скрипт, который подсчитывает, сколько серверов находится в каждом статусе, и заполняет абзац со статистикой по статусам.
+
+    ```html
+    <ul class="server-statuses">
+        <li>srv01: up</li>
+        <li>srv02: up</li>
+        <li>srv03: up</li>
+        <li>srv04: down</li>
+        <li>srv05: up</li>
+        <li>srv06: disabled</li>
+    </ul>
+    <p>
+        Stats:
+        <span class="stats-up"></span> up,
+        <span class="stats-down"></span> down,
+        <span class="stats-disabled"></span> disabled.
+    </p>
+    ```
+
+1. Напиши скрипт, который запрашивает у пользователя абзац произвольного текста и отображает на странице таблицу, содержащую сам текст, а также число слов и символов в нём. Например:
+
+    <table>
+        <tr>
+            <th>Текст</th>
+            <td>
+                Однажды, в студеную зимнюю пору,
+                я из лесу вышел; был сильный мороз.
+                Гляжу, поднимается медленно в гору
+                лошадка, везущая хворосту воз.
+            </td>
+        </tr>
+        <tr>
+            <th>Слов</th>
+            <td>21</td>
+        </tr>
+        <tr>
+            <th>Символов</th>
+            <td>134</td>
+        </tr>
+    </table>