diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index 61a785e28..8296edca6 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -6,11 +6,11 @@ libs: # DOM дерево -Теги -- основа HTML-документа це . +Основою HTML-документа є теги. -Відповідно до об’єктної моделі документа (DOM), кожен HTML-тег є об’єктом. Вкладені теги -- це "діти" всередині батьківського елементу. Текст всередині тегу також є об’єктом. +Відповідно до об’єктної моделі документа ("Document Object Model", DOM), кожен HTML-тег є об’єктом. Вкладені теги є "дітьми" батьківського елементу. Текст, який знаходиться всередині тегу, також є об’єктом. -Всі ці об’єкти доступні за допомогою JavaScript, і ми можемо використовувати їх, щоб змінити сторінку. +Всі ці об’єкти доступні за допомогою JavaScript, і ми можемо використовувати їх для зміни сторінки. Наприклад, `document.body` це об’єкт, що представляє тег ``. @@ -25,10 +25,10 @@ setTimeout(() => document.body.style.background = '', 3000); // повернут Тут ми використовували `style.background`, щоб змінити фоновий колір `document.body`, але тут є багато інших властивостей, таких як. - `innerHTML` -- вміст HTML вузла. -- `offsetWidth` -- ширина вузла (у пікселях) +- `offsetWidth` -- ширина вузла (у пікселях). - ...і так далі. -Незабаром ми дізнаємося більше способів маніпулювати домом, але спочатку потрібно знати його структуру. +Незабаром ми дізнаємося більше способів маніпулювати DOM, але спочатку потрібно познайомитись з його структурою. ## Приклад DOM @@ -46,7 +46,7 @@ setTimeout(() => document.body.style.background = '', 3000); // повернут ``` -DOM представляє HTML як структуру дерева тегів. Ось як це виглядає: +DOM -- це представлення HTML-документа в вигляді дерева тегів. Ось як це виглядає:
@@ -62,24 +62,24 @@ drawHtmlTree(node1, 'div.domtree', 690, 320); Кожен вузол дерева є об’єктом. -Теги є *вузлами-елементами* (або просто елементами), вони утворюють структуру дерева: `` знаходиться в корені, `` `` - це його дочірні вузли тощо. +Теги є *вузлами-елементами* (або просто елементами), вони утворюють структуру дерева: `` -- кореневий, `` та `` -- його дочірні вузли тощо. -Текст всередині елементів утворює *текстові вузли*, позначені як `#text`. Текстовий вузол містить лише рядок. У нього може не буди нащадків і він завжди є листом дерева. +Текст всередині елементів утворює *текстові вузли*, позначені як `#text`. Текстовий вузол містить лише рядок. У нього не може буди нащадків, тобто він завжди знаходиться на найнижчому рівні. Наприклад, тег `` має текст `"Про лосів"`. Зверніть увагу на спеціальні символи в текстових вузлах: -- новий рядок: `↵` (в JavaScript відомий як `\n`) +- перехід на новий рядок: `↵` (в JavaScript відомий як `\n`) - пробіл: `␣` -Пробіли та нові рядки є абсолютно діючими символами, як букви та цифри. Вони утворюють текстові вузли і стають частиною DOM. Отже, наприклад, наведений вище тег `<head>` містить деякі пробіли перед `<title>`, і цей текст стає `#text` вузлом (він містить лише символ нового рядку та деякілька пробілів). +Пробіли та переходи на нові рядки є абсолютно діючими символами, як букви та цифри. Вони утворюють текстові вузли і стають частиною DOM. Отже, наприклад, наведений вище тег `<head>` містить деякі пробіли перед `<title>`, і цей текст стає `#text` вузлом (він містить лише символ нового рядку та деякілька пробілів). Є лише два винятки з цього правила: -1. Пробіли та нові лінії до `<head>` ігноруються з історичних причин. -2. Якщо ми щось помістимо після `<body>`, то це цось автоматично переміщується всередині `body`, в кінці, оскільки специфікація HTML вимагає, що весь вміст повинен бути всередині `<body>`. Отже, після `<body>` не може бути пробілів. +1. Пробіли та переходи на нові рядки до `<head>` ігноруються з історичних причин. +2. Якщо ми запишемо щось після закриваючого тегу `</body>`, браузер автоматично перемістить цей запис в кінець `body`, оскільки специфікація HTML вимагає, щоб весь вміст був всередині `<body>`. Отже, після `<body>` не може бути ніяких пробілів. -В інших випадках все просто -- якщо є пробіли (так само, як будь-який символ) у документі, то вони стають текстовими вузлами в DOM, і якщо ми видалимо ці пробіли, то текстових вузлів там не буде. +В інших випадках все просто -- якщо в документі є пробіли (так само, як будь-який символ), то вони стають текстовими вузлами дерева в DOM, і якщо ми видалимо ці пробіли, то текстових вузлів в DOM також не буде. Тут немає текстових вузлів з пробілами: @@ -96,21 +96,21 @@ let node2 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1, drawHtmlTree(node2, 'div.domtree', 690, 210); </script> -```smart header="Пробіли у рядку на початку/в кінці і ті вузли, що містять тільки пробіли, як правило, приховані в інструментах розробки" -Інструменти браузера (будуть розглянуті скоро), що працюють з DOM, як правило, не показують пробіли на початку/кінці тексту та порожні тексти (переноси рядків) між тегами. +```smart header="Пробіли на початку/в кінці рядку та ті вузли, що містять тільки пробіли, як правило, приховані в інструментах розробки" +Інструменти браузера (будуть розглянуті скоро), що працюють з DOM, як правило, не показують пробіли на початку/кінці тексту та порожні текстові вузли (переходи на нові рядки) між тегами. -Інструменти розробника таким чином зберігають екранний простір. +Таким чином інструменти розробника зберігають екранний простір. -На подальших рисунках DOM ми іноді опускаємо їх, коли вони не мають значення. Такі пробіли зазвичай не впливають на те, як відображається документ. +На подальших рисунках DOM ми іноді будемо опускати текстові вузли з пробілів та переходів, якщо вони не мають значення. Такі пробіли зазвичай не впливають на те, як відображається документ. ``` ## Автокорекція -Якщо браузер зтикається з невалідним HTML, він автоматично виправляє його при створенні DOM. +Якщо браузер зтикається з невалідним HTML-кодом, він автоматично виправляє його при створенні DOM. -Наприклад, верхній тег завжди `<html>`. Навіть якщо він не існує в документі, він буде існувати в DOM, тому що браузер створить його. Те ж саме стосується `<body>`. +Наприклад, напочатку документу завжди повинен бути тег `<html>`. Навіть якщо він не існує в документі, він буде існувати в дереві DOM, тому що браузер створить його. Те ж саме стосується `<body>`. -Як приклад, якщо файл HTML містить єдине слово `"Привіт"`, браузер оберне його в `<html>` і `<body>`, та додасть необхідний `<head>`, а DOM буде виглядати наступним чином: +Як приклад, якщо файл HTML містить єдине слово `"Привіт"`, браузер оберне його в `<html>` і `<body>`, та додасть необхідний тег `<head>`, а DOM буде виглядати наступним чином: <div class="domtree"></div> @@ -143,7 +143,7 @@ drawHtmlTree(node4, 'div.domtree', 690, 360); </script> ````warn header="Таблиці завжди мають `<tbody>`" -Цікавий "особливий випадок" -- це таблиці. Згідно DOM специфікації вони повинні мати тег `<tbody>`, але текст HTML може це пропустити. Тоді браузер створює `<tbody>` у DOM автоматично. +Цікавий "особливий випадок" -- це таблиці. Згідно DOM специфікації вони повинні мати тег `<tbody>`, але в HTML офіційно можна писати без нього. Тоді браузер створює `<tbody>` у DOM автоматично. Наприклад, HTML: @@ -160,14 +160,14 @@ let node5 = {"name":"TABLE","nodeType":1,"children":[{"name":"TBODY","nodeType": drawHtmlTree(node5, 'div.domtree', 600, 200); </script> -Розумієте? Тег `<tbody>` з’явився з нізвідки. Ми повинні мати це на увазі під час роботи з таблицями, щоб уникати сюрпризів. +Бачите? Тег `<tbody>` з’явився з нізвідки. Ми повинні мати це на увазі під час роботи з таблицями, щоб уникати сюрпризів. ```` ## Інші типи вузлів Окрім елементів та текстових вузлів є деякі інші типи вузлів. -Наприклад, коментарі: +Наприклад, вузли-коментарі: ```html <!DOCTYPE HTML> @@ -195,13 +195,13 @@ drawHtmlTree(node6, 'div.domtree', 690, 500); Тут ми бачимо новий тип вузла дерева -- *вузол-коментар*, позначений як `#comment`, між двома текстовими вузлами. -Ми могли подумати -- чому коментар додається до DOM? Це не впливає на візуальне уявлення. Але є правило - якщо щось є в HTML, то воно також повинно бути в DOM дереві. +Ми могли подумати -- чому коментар додається до DOM? Це не впливає на візуальне уявлення. Але є важливе правило -- якщо щось є в HTML, то воно також повинно бути в DOM дереві. **Все в HTML, навіть коментарі, стає частиною DOM.** Навіть директива `<!DOCTYPE...>` на самому початку HTML також є вузлом DOM. Вона є DOM дереві прямо перед `<html>`. Мало хто знає про це. Ми не збираємося звертатися до цього вузла, ми навіть не малюємо його на діаграмах, але він там є. -Об’єкт `document`, який представляє весь документ, формально, також є вузлом DOM. +Об’єкт `document`, який представляє весь документ, формально також є вузлом DOM. Існує [12 типів вузлів](https://dom.spec.whatwg.org/#node). На практиці ми зазвичай працюємо з 4-ма з них: @@ -212,9 +212,9 @@ drawHtmlTree(node6, 'div.domtree', 690, 500); ## Поекспериментуйте самі -Щоб побачити структуру DOM у режимі реального часу, спробуйте [Live Dom Viewer](http://software.hixie.ch/utilities/js/live-dom-viewer/). Просто введіть документ, і внизу відразу з’явиться його DOM. +Щоб побачити структуру DOM у режимі реального часу, спробуйте [Live Dom Viewer](http://software.hixie.ch/utilities/js/live-dom-viewer/). Просто введіть щось, і внизу ви відразу побачите, як змінюється DOM. -Іншим способом вивчення DOM є використання інструментів розробника браузера. Взагалі, це те, що ми використовуємо при розробці. +Іншим способом вивчення DOM є використання інструментів розробника браузера. Взагалі, це те, що ми використовуємо при розробці кожен день. Для цього відкрийте веб-сторінку [elk.html](elk.html), увімкніть інструменти розробника в браузері та перейдіть на вкладку "Elements". @@ -224,7 +224,7 @@ drawHtmlTree(node6, 'div.domtree', 690, 500); Ви можете побачити DOM, натиснути на елементи, переглянути їхні деталі і так далі. -Зверніть увагу, що структура DOM в інструментах розробника спрощується. Текстові вузли показані так само, як текст. І взагалі немає "порожніх" (тільки пробіли) текстових вузлів. Це добре, тому що більшу частину часу ми зацікавлені в вузлах-елементах. +Зверніть увагу, що структура DOM в інструментах розробника відображається в спрощеному вигляді. Текстові вузли показані так само, як текст. І взагалі немає "порожніх" (тільки пробіли) текстових вузлів. Це добре, тому що більшу частину часу ми зацікавлені в вузлах-елементах. Якщо натиснути кнопку <span class="devtools" style="background-position:-328px -124px"></span> у лівому верхньому куті, то можна буде вибрати вузол з веб-сторінки за допомогою миші (або інших пристроїв покажчика) і "проінспектувати" його (прокрутити до нього на вкладці "Elements"). Це чудово працює, коли у нас є величезна HTML-сторінка (і відповідний величезний дом) і хотілося б побачити місце конкретного елемента в ньому. @@ -233,12 +233,12 @@ drawHtmlTree(node6, 'div.domtree', 690, 500); ![](inspect.svg) У правій частині інструментів є наступні підвкладки: -- **Styles** -- ми можемо бачити CSS правила, які застосовано до поточного елемента, включаючи вбудовані правила (показані сірим). Майже все можна відредагувати на місці, включаючи розміри/марджини/паддінги внизу вікна. +- **Styles** -- ми можемо бачити CSS правила, які застосовано до поточного елемента, включаючи вбудовані правила (показані сірим). Майже все можна відредагувати на місці, включаючи розміри, внутрішні та зовнішні відступи тощо. - **Computed** -- для перегляду CSS, що застосовується до елемента за властивістю: для кожної властивості ми можемо побачити правило, яке це дає (включаючи наслідування CSS та ін.). - **Event Listeners** -- щоб побачити слухачів подій, що прикріплені до елементів DOM (ми розглянемо їх у наступній частині підручника). - ...і так далі. -Найкращий спосіб вивчити все це -- поекспериментувати. Більшість значень можна редагувати на місці. +Найкращий спосіб вивчити все це поекспериментувати. Більшість значень можна редагувати на місці та дивитись на результат. ## Взаємодія з консоллю @@ -271,12 +271,12 @@ drawHtmlTree(node6, 'div.domtree', 690, 500); HTML/XML документ представляється всередині браузера, як дерево DOM. -- Теги стають вузлами-елементами і утворюють структуру. +- Теги стають вузлами-елементами та утворюють структуру. - Текст стає текстовими вузлами. - ...і т.д., все, що є в HTML, представлено в DOM, навіть коментарі. -Ми можемо використовувати інструменти розробника, щоб перевіряти DOM та змінювати його вручну. +Ми можемо використовувати інструменти розробника в браузері, щоб перевіряти DOM та змінювати його вручну. -Тут для початку ми охопили основи та дії, які найбільш часто використовуються. Існує велика документація про інструменти розробника Chrome на <https://developers.google.com/web/tools/chrome-devtools>. Найкращий спосіб дізнатися більше про інструменти розробника -- це відкрити їх та ознайомитися з ними: більшість можливостей очевидні. Пізніше, коли ви загалом розберетеся з ними, читайте документацію, щоб дослідити решту функціоналу. +Тут ми розглянули основи, що найчастіше використовуються і важливі прийоми необхідні для початку розробки. Існує велика документація про інструменти розробника Chrome на <https://developers.google.com/web/tools/chrome-devtools>. Найкращий спосіб дізнатися більше про інструменти розробника -- це відкрити їх та ознайомитися з ними: більшість можливостей очевидні. Пізніше, коли ви загалом розберетеся з ними, читайте документацію, щоб дослідити решту функціоналу. Вузли DOM мають властивості та методи, які дозволяють нам переміщуватися між ними, змінювати їх, переміщуватися по сторінці та багато іншого. Ми розберемо їх у наступних розділах.