Apply suggestions from code review

MrShtein · lex111 · web-flow · commit 632ddd29b758 · 2019-05-14T15:24:59.000+03:00
Co-Authored-By: Alexey Pyltsyn &lt;lex61rus@gmail.com&gt;
diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md
@@ -6,9 +6,9 @@ libs:
 
 # DOM дерево
 
-Основой HTML документа являются теги.
+Основой HTML-документа являются теги.
 
-В соответствии с Объектной Моделью Документа ("Document Object Mode", коротко DOM), каждый HTML-тег является объектом. Вложенные теги называют "дочерними" узлами родительского элемента.
+В соответствии с объектной моделью документа ("Document Object Mode", коротко DOM), каждый HTML-тег является объектом. Вложенные теги называют "дочерними" узлами родительского элемента.
 
 Текст, который находится внутри тега, также является объектом.
 
@@ -30,7 +30,7 @@ libs:
 </html>
 ```
 
-DOM -- это представление HTML документа в виде дерева тегов. Вот как это выглядит:
+DOM -- это представление HTML-документа в виде дерева тегов. Вот как это выглядит:
 
 <div class="domtree"></div>
 
@@ -89,9 +89,9 @@ drawHtmlTree(node2, 'div.domtree', 690, 210);
 
 ## Автоисправление
 
-Если браузер сталкивается с некорректно написанным HTML кодом, он автоматически корректирует его при построении DOM.
+Если браузер сталкивается с некорректно написанным HTML-кодом, он автоматически корректирует его при построении DOM.
 
-Например, в начале документа всегда должен быть тег `<html>`. Даже если его нет в документе -- он будет в дереве DOM, браузер его создаст. Тоже самое касается и тега `<body>`.
+Например, в начале документа всегда должен быть тег `<html>`. Даже если его нет в документе -- он будет в дереве DOM, браузер его создаст. То же самое касается и тега `<body>`.
 
 Например, если HTML-файл состоит из единственного слова `"Привет"`, браузер обернет его в теги `<html>` и `<body>`, добавит необходимый тег `<head>`, и DOM будет выглядеть так:
 
@@ -180,7 +180,7 @@ drawHtmlTree(node6, 'div.domtree', 690, 500);
 
 **Все, что есть в HTML, даже комментарии, является частью DOM.**
 
-Даже директива `<!DOCTYPE...>`, которую мы ставим в начале HTML, тоже является DOM узлом. Она находится в дереве DOM прямо перед `<html>`. Мы не будем рассматривать этот узел, мы даже не рисуем его на наших диаграммах, но он существует.
+Даже директива `<!DOCTYPE...>`, которую мы ставим в начале HTML, тоже является DOM-узлом. Она находится в дереве DOM прямо перед `<html>`. Мы не будем рассматривать этот узел, мы даже не рисуем его на наших диаграммах, но он существует.
 
 Даже объект `document`, представляющий весь документ, формально, является DOM узлом.
 
@@ -207,7 +207,7 @@ drawHtmlTree(node6, 'div.domtree', 690, 500);
 
 Вы можете увидеть DOM, понажимать на элементы, детально рассмотреть их и так далее.
 
-Обратите внимание, что структура DOM в инструментах разработчика отображается в упрощенном виде. Текстовые узлы показаны как простой текст. И, кроме пробелов, нет никаких "пустых" текстовых узлов. Ну и отлично, потому что большую часть времени нас будут интересовать узлы-элементы.
+Обратите внимание, что структура DOM в инструментах разработчика отображается в упрощенном виде. Текстовые узлы показаны как простой текст. И кроме пробелов нет никаких "пустых" текстовых узлов. Ну и отлично, потому что большую часть времени нас будут интересовать узлы-элементы.
 
 Клик по этой <span class="devtools" style="background-position:-328px -124px"></span> кнопке в левом верхнем углу инспектора позволяет при помощи мыши (или другого устройства ввода) выбрать элемент на веб-странице и "проинспектировать" его (браузер сам найдет и отметит его во вкладке Elements). Этот способ отлично подходит, когда у нас огромная HTML-страница (и соответствующий ей огромный DOM), и мы хотим увидеть, где находится интересующий нас элемент.
 
@@ -217,8 +217,8 @@ drawHtmlTree(node6, 'div.domtree', 690, 500);
 
 В правой части инструментов разработчика находятся следующие подразделы:
 - **Styles** -- здесь мы видим CSS, примененный к текущему элементу: правило за правилом, включая встроенные стили (выделены серым). Почти все можно отредактировать на месте, включая размеры/внешние и внутренние отступы.
-- **Computed** -- здесь мы видим итоговые свойства CSS элемента, которые он приобрёл в результате применения всего каскада стилей (в том числе унаследованные свойства и т.д.).
-- **Event Listeners** -- в этом разделе мы видим обработчики событий, привязанные к DOM элементам (мы поговорим о них в следующей части учебника).
+- **Computed** -- здесь мы видим итоговые CSS-свойства элемента, которые он приобрёл в результате применения всего каскада стилей (в том числе унаследованные свойства и т.д.).
+- **Event Listeners** -- в этом разделе мы видим обработчики событий, привязанные к DOM-элементам (мы поговорим о них в следующей части учебника).
 - ... и т.д.
 
 Лучший способ изучить инструменты разработчика -- это прокликать их. Большинство значений можно менять и тут же смотреть результат.
@@ -228,15 +228,15 @@ drawHtmlTree(node6, 'div.domtree', 690, 500);
 Изучая DOM, мы также хотим применять к нему JavaScript. Например: получить узел и запустить какой-нибудь код для его изменения, чтобы посмотреть результат. Ниже приведено несколько способов перемещения между вкладками Elements и Console.
 
 - На вкладке Elements выберите первый элемент `<li>`.
-- Нажмите `клавишу:Esc` -- прямо под вкладкой Elements откроется Console.
+- Нажмите `key:Esc` -- прямо под вкладкой Elements откроется Console.
 
 Последний элемент, выбранный во вкладке Elements, доступен в консоли как `$0`, предыдущий, выбранный до него, как `$1` и т.д.
 
 Теперь мы можем запускать на них команды. Например `$0.style.background = 'red'` сделает выбранный элемент красным, как здесь:
 
 ![](domconsole0.png)
 
-С другой стороны, если мы находимся в консоли и есть переменная `node`, ссылающаяся на DOM узел, можно использовать команду `inspect(node)`, чтобы увидеть этот элемент во вкладке Elements.
+С другой стороны, если мы находимся в консоли и есть переменная `node`, ссылающаяся на DOM-узел, можно использовать команду `inspect(node)`, чтобы увидеть этот элемент во вкладке Elements.
 
 Или мы можем просто вывести его в консоль и  исследовать "на месте", как `document.body` ниже:
 
@@ -258,4 +258,4 @@ HTML/XML документы представлены в браузере в ви
 
 Здесь мы рассмотрели основы, наиболее часто используемые и важные действия для начала разработки. Подробную документацию по инструментам разработки Chrome Developer Tools можно найти на странице <https://developers.google.com/web/tools/chrome-devtools>. Лучший способ изучить инструменты походить по разным вкладкам, почитать меню: большинство действий очевидны для пользователя. Позже, когда вы немного их изучите, прочитайте документацию и узнаете то, что осталось.
 
-У DOM узлов есть свойства и методы, которые позволяют выбирать любой из элементов, изменять, перемещать их на странице и многое другое. Мы вернемся к ним в в последующих разделах.
+У DOM-узлов есть свойства и методы, которые позволяют выбирать любой из элементов, изменять, перемещать их на странице и многое другое. Мы вернемся к ним в в последующих разделах.
