URL: http://github.com/javascript-tutorial/uk.javascript.info/pull/517.diff
егами. -Інструменти розробника таким чином зберігають екранний простір. +Таким чином інструменти розробника зберігають екранний простір. -На подальших рисунках DOM ми іноді опускаємо їх, коли вони не мають значення. Такі пробіли зазвичай не впливають на те, як відображається документ. +На подальших рисунках DOM ми іноді будемо опускати текстові вузли з пробілів та переходів, якщо вони не мають значення. Такі пробіли зазвичай не впливають на те, як відображається документ. ``` ## Автокорекція -Якщо браузер зтикається з невалідним HTML, він автоматично виправляє його при створенні DOM. +Якщо браузер зтикається з невалідним HTML-кодом, він автоматично виправляє його при створенні DOM. -Наприклад, верхній тег завжди ``. Навіть якщо він не існує в документі, він буде існувати в DOM, тому що браузер створить його. Те ж саме стосується ``. +Наприклад, напочатку документу завжди повинен бути тег ``. Навіть якщо він не існує в документі, він буде існувати в дереві DOM, тому що браузер створить його. Те ж саме стосується ``. -Як приклад, якщо файл HTML містить єдине слово `"Привіт"`, браузер оберне його в `` і ``, та додасть необхідний ``, а DOM буде виглядати наступним чином: +Як приклад, якщо файл HTML містить єдине слово `"Привіт"`, браузер оберне його в `` і ``, та додасть необхідний тег ``, а DOM буде виглядати наступним чином: @@ -143,7 +143,7 @@ drawHtmlTree(node4, 'div.domtree', 690, 360); ````warn header="Таблиці завжди мають ``" -Цікавий "особливий випадок" -- це таблиці. Згідно DOM специфікації вони повинні мати тег ``, але текст HTML може це пропустити. Тоді браузер створює `` у DOM автоматично. +Цікавий "особливий випадок" -- це таблиці. Згідно DOM специфікації вони повинні мати тег ``, але в HTML офіційно можна писати без нього. Тоді браузер створює `` у DOM автоматично. Наприклад, HTML: @@ -160,14 +160,14 @@ let node5 = {"name":"TABLE","nodeType":1,"children":[{"name":"TBODY","nodeType": drawHtmlTree(node5, 'div.domtree', 600, 200); -Розумієте? Тег `` з’явився з нізвідки. Ми повинні мати це на увазі під час роботи з таблицями, щоб уникати сюрпризів. +Бачите? Тег `` з’явився з нізвідки. Ми повинні мати це на увазі під час роботи з таблицями, щоб уникати сюрпризів. ```` ## Інші типи вузлів Окрім елементів та текстових вузлів є деякі інші типи вузлів. -Наприклад, коментарі: +Наприклад, вузли-коментарі: ```html @@ -195,13 +195,13 @@ drawHtmlTree(node6, 'div.domtree', 690, 500); Тут ми бачимо новий тип вузла дерева -- *вузол-коментар*, позначений як `#comment`, між двома текстовими вузлами. -Ми могли подумати -- чому коментар додається до DOM? Це не впливає на візуальне уявлення. Але є правило - якщо щось є в HTML, то воно також повинно бути в DOM дереві. +Ми могли подумати -- чому коментар додається до DOM? Це не впливає на візуальне уявлення. Але є важливе правило -- якщо щось є в HTML, то воно також повинно бути в DOM дереві. **Все в HTML, навіть коментарі, стає частиною DOM.** Навіть директива `` на самому початку HTML також є вузлом DOM. Вона є DOM дереві прямо перед ``. Мало хто знає про це. Ми не збираємося звертатися до цього вузла, ми навіть не малюємо його на діаграмах, але він там є. -Об’єкт `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 в інструментах розробника відображається в спрощеному вигляді. Текстові вузли показані так само, як текст. І взагалі немає "порожніх" (тільки пробіли) текстових вузлів. Це добре, тому що більшу частину часу ми зацікавлені в вузлах-елементах. Якщо натиснути кнопку у лівому верхньому куті, то можна буде вибрати вузол з веб-сторінки за допомогою миші (або інших пристроїв покажчика) і "проінспектувати" його (прокрутити до нього на вкладці "Elements"). Це чудово працює, коли у нас є величезна HTML-сторінка (і відповідний величезний дом) і хотілося б побачити місце конкретного елемента в ньому. @@ -233,12 +233,12 @@ drawHtmlTree(node6, 'div.domtree', 690, 500);  У правій частині інструментів є наступні підвкладки: -- **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 на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: