From 415b09bde2c64297ec33d6673c1bddcf5d30316c Mon Sep 17 00:00:00 2001 From: ltlaitoff Date: Wed, 12 Jul 2023 15:32:23 +0300 Subject: [PATCH 1/2] fix(2-1.2): Review `DOM tree` acticle --- 2-ui/1-document/02-dom-nodes/article.md | 66 ++++++++++++------------- 1 file changed, 33 insertions(+), 33 deletions(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index 61a785e28..cc7e9e87a 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 мають властивості та методи, які дозволяють нам переміщуватися між ними, змінювати їх, переміщуватися по сторінці та багато іншого. Ми розберемо їх у наступних розділах. From f9123718bc6a108a02e7f4b8348a3588ffeb17d0 Mon Sep 17 00:00:00 2001 From: Stanislav <s.dolgachov@gmail.com> Date: Sun, 16 Jul 2023 16:55:05 +0300 Subject: [PATCH 2/2] Apply suggestions from code review --- 2-ui/1-document/02-dom-nodes/article.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index cc7e9e87a..8296edca6 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -46,7 +46,7 @@ setTimeout(() => document.body.style.background = '', 3000); // повернут </html> ``` -DOM - це представлення HTML-документа в вигляді дерева тегів. Ось як це виглядає: +DOM -- це представлення HTML-документа в вигляді дерева тегів. Ось як це виглядає: <div class="domtree"></div> @@ -62,9 +62,9 @@ drawHtmlTree(node1, 'div.domtree', 690, 320); Кожен вузол дерева є об’єктом. -Теги є *вузлами-елементами* (або просто елементами), вони утворюють структуру дерева: `<html>` -- кореневий, `<head>` та `<body>` - його дочірні вузли тощо. +Теги є *вузлами-елементами* (або просто елементами), вони утворюють структуру дерева: `<html>` -- кореневий, `<head>` та `<body>` -- його дочірні вузли тощо. -Текст всередині елементів утворює *текстові вузли*, позначені як `#text`. Текстовий вузол містить лише рядок. У нього не може буди нащадків, тобто він завжди знаходиться на самому нижчому рівні. +Текст всередині елементів утворює *текстові вузли*, позначені як `#text`. Текстовий вузол містить лише рядок. У нього не може буди нащадків, тобто він завжди знаходиться на найнижчому рівні. Наприклад, тег `<title>` має текст `"Про лосів"`. @@ -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: @@ -195,7 +195,7 @@ drawHtmlTree(node6, 'div.domtree', 690, 500); Тут ми бачимо новий тип вузла дерева -- *вузол-коментар*, позначений як `#comment`, між двома текстовими вузлами. -Ми могли подумати -- чому коментар додається до DOM? Це не впливає на візуальне уявлення. Але є важливе правило - якщо щось є в HTML, то воно також повинно бути в DOM дереві. +Ми могли подумати -- чому коментар додається до DOM? Це не впливає на візуальне уявлення. Але є важливе правило -- якщо щось є в HTML, то воно також повинно бути в DOM дереві. **Все в HTML, навіть коментарі, стає частиною DOM.** @@ -277,6 +277,6 @@ HTML/XML документ представляється всередині бр Ми можемо використовувати інструменти розробника в браузері, щоб перевіряти DOM та змінювати його вручну. -Тут ми розглянули основи, що найчастіше використовуються і важливі дії для початку розробки. Існує велика документація про інструменти розробника Chrome на <https://developers.google.com/web/tools/chrome-devtools>. Найкращий спосіб дізнатися більше про інструменти розробника -- це відкрити їх та ознайомитися з ними: більшість можливостей очевидні. Пізніше, коли ви загалом розберетеся з ними, читайте документацію, щоб дослідити решту функціоналу. +Тут ми розглянули основи, що найчастіше використовуються і важливі прийоми необхідні для початку розробки. Існує велика документація про інструменти розробника Chrome на <https://developers.google.com/web/tools/chrome-devtools>. Найкращий спосіб дізнатися більше про інструменти розробника -- це відкрити їх та ознайомитися з ними: більшість можливостей очевидні. Пізніше, коли ви загалом розберетеся з ними, читайте документацію, щоб дослідити решту функціоналу. Вузли DOM мають властивості та методи, які дозволяють нам переміщуватися між ними, змінювати їх, переміщуватися по сторінці та багато іншого. Ми розберемо їх у наступних розділах. <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'> <html xmlns='http://www.w3.org/1999/xhtml'> <head> <title>pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy