From bc6f8b69e591f07c95f9b5a2b9739f68b2655dca Mon Sep 17 00:00:00 2001 From: BorisBedrenko Date: Wed, 9 Apr 2025 17:04:40 +0300 Subject: [PATCH 1/3] docs: fix typos, improve readability --- .../05-basic-dom-node-properties/article.md | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/2-ui/1-document/05-basic-dom-node-properties/article.md b/2-ui/1-document/05-basic-dom-node-properties/article.md index d3c9a881c..6ac278b5d 100644 --- a/2-ui/1-document/05-basic-dom-node-properties/article.md +++ b/2-ui/1-document/05-basic-dom-node-properties/article.md @@ -6,7 +6,7 @@ ## Класи DOM вузлів -Різні вузли DOM можуть мати різні властивості. Наприклад, елемент, що відповідає тегу ``, має властивості, пов’язані з посиланням, тоді як елемент, що відповідає ``, має властивості, пов’язані з введенням даних, тощо. Текстові вузли відрізняються від вузлів елементів. Проте, між ними також існують загальні властивості та методи, оскільки всі класи вузлів DOM утворюють єдину ієрархію. +Різні вузли DOM можуть мати різні властивості. Наприклад, елемент, що відповідає тегу ``, має властивості, пов’язані з посиланням, тоді як елемент, що відповідає ``, має властивості, пов’язані з введенням даних тощо. Текстові вузли відрізняються від вузлів елементів. Проте, між ними також існують загальні властивості та методи, оскільки всі класи вузлів DOM утворюють єдину ієрархію. Кожен вузол DOM належить відповідному вбудованому класу. @@ -18,15 +18,15 @@ Ці класи: -- [EventTarget](https://dom.spec.whatwg.org/#eventtarget) -- це кореневий "абстрактний" клас клас для всього. +- [EventTarget](https://dom.spec.whatwg.org/#eventtarget) -- це кореневий "абстрактний" клас для всього. Об’єкти цього класу ніколи не створюються. Він служить основою, тому всі вузли DOM підтримують так звані "події", які ми розглянемо пізніше. - [Node](https://dom.spec.whatwg.org/#interface-node) -- також "абстрактний" клас, який є базовим для вузлів DOM. - Він надає основні функціональні можливості дерева: `parentNode`, `nextSibling`, `childNodes` та інші (це геттери). Об'єкти класу `Node` ніколи не створюються, але існують інші класи, які успадковують його (і таким чином успадковують функціональність `Node`). + Він надає основні функціональні можливості дерева: `parentNode`, `nextSibling`, `childNodes` та інші (це гетери). Об'єкти класу `Node` ніколи не створюються, але існують інші класи, які успадковують його (і таким чином успадковують функціональність `Node`). -- [Document](https://dom.spec.whatwg.org/#interface-document), з історичних причин його часто успадковує `HTMLDocument` (хоча останні специфікації цього не вимагають), представляє собою документ в цілому. +- [Document](https://dom.spec.whatwg.org/#interface-document), з історичних причин його часто успадковує `HTMLDocument` (хоча останні специфікації цього не вимагають), являє собою документ в цілому. Глобальний об'єкт `document` належить саме до цього класу. Він служить точкою входу в DOM. @@ -54,7 +54,7 @@ Таким чином, повний набір властивостей та методів для певного вузла формується в результаті ланцюжка успадкування. -Наприклад, давайте розглянемо об’єкт DOM для елемента ``. Він належить до класу [HTMLInputElement](https://html.spec.whatwg.org/multipage/forms.html#htmlinputelement). +Наприклад, розгляньмо об’єкт DOM для елемента ``. Він належить до класу [HTMLInputElement](https://html.spec.whatwg.org/multipage/forms.html#htmlinputelement). Він отримує властивості та методи шляхом "накладання" наступних класів (подані в порядку успадкування): @@ -63,9 +63,9 @@ - `Element` -- надає загальні методи для елементів, - `Node` -- надає загальні властивості для вузлів DOM, - `EventTarget` -- цей клас забезпечує підтримку подій (ми розглянемо це пізніше), -- ... і, нарешті, цей клас успадковується від `Object`, тому він має доступ до загальних методів "простого об'єкту", наприклад, `hasOwnProperty`. +- ... і, нарешті, цей клас успадковується від `Object`, тому він має доступ до загальних методів "простого об'єкта", наприклад, `hasOwnProperty`. -Щоб переглянути ім'я класу вузла DOM, ми можемо згадати, що зазвичай у об'єкта є властивість `constructor`. Вона посилається на конструктор класу, і `constructor.name` є його ім'ям: +Щоб переглянути ім'я класу вузла DOM, ми можемо згадати, що зазвичай в об'єкта є властивість `constructor`. Вона посилається на конструктор класу, і `constructor.name` є його ім'ям: ```js run alert(document.body.constructor.name); // HTMLBodyElement @@ -96,7 +96,7 @@ alert(document.body instanceof EventTarget); // true Але для DOM елементів вони різні: -- `console.log(elem)` показує елемент в вигляді DOM дерева. +- `console.log(elem)` показує елемент у вигляді DOM дерева. - `console.dir(elem)` показує елемент як об’єкт DOM, це добре для того, щоб вивчити його властивості. Спробуйте це на `document.body`. @@ -105,14 +105,14 @@ alert(document.body instanceof EventTarget); // true ````smart header="Специфікація IDL" У специфікації, класи DOM описані не за допомогою JavaScript, а спеціальною [мовою опису інтерфейсу](https://uk.wikipedia.org/wiki/Мова_опису_інтерфейсів)(IDL), яку зазвичай легко зрозуміти. -У IDL всі властивості представлені з їхними типами. Наприклад, `DOMString`, `boolean` тощо. +В IDL всі властивості представлені з їхніми типами. Наприклад, `DOMString`, `boolean` тощо. Ось витяг з цієї специфікації, з коментарями: ```js // Define HTMLInputElement *!* -// Двакрапка ":" означає, що HTMLInputElement наслідується від HTMLElement +// Двокрапка ":" означає, що HTMLInputElement наслідується від HTMLElement */!* interface HTMLInputElement: HTMLElement { // тут визначаються всі властивості та методи елементів @@ -259,7 +259,7 @@ alert( document.body.tagName ); // BODY Якщо `innerHTML` вставляє тег ` ``` @@ -490,7 +490,7 @@ elem.innerHTML = elem.innerHTML + "..." Якщо ми хочемо знати повний список підтримуваних властивостей для заданого класу, ми можемо знайти їх у специфікації. Наприклад, `HTMLInputElement` задокументовано на . -Або якщо ми хотіли б отримати їх швидко, або зацікавлені в конкретному специфікації браузера -- ми завжди можемо вивести елемент за допомогою `console.dir(elem)` та прочитати властивості. Або вивчити "DOM properties" на вкладці "Elements" інструментів розробника браузера. +Або якщо ми хотіли б отримати їх швидко, або цікавимося специфікацією конкретного браузера -- ми завжди можемо вивести елемент за допомогою `console.dir(elem)` та прочитати властивості. Або вивчити "DOM properties" на вкладці "Elements" інструментів розробника браузера. ## Підсумки @@ -502,7 +502,7 @@ elem.innerHTML = elem.innerHTML + "..." : Використовується для визначення, чи є вузол текстовим чи елементним вузлом. Має числове значення: `1` для елементів, `3` для текстових вузлів та декілька інших значень для інших типів вузлів. Лише для читання. `nodeName/tagName` -: Для елементів -- це назва тегів (записуються в верхньому регістрі, якщо не XML-режим). Для неелементних вузлів `nodeName` описує їх тип. Лише для читання. +: Для елементів -- це назва тегів (записуються в верхньому регістрі, якщо не XML-режим). Для не елементних вузлів `nodeName` описує їх тип. Лише для читання. `innerHTML` : Вміст HTML елемента. Можна змінювати. From c55a5e5fc836bbfda494234c1d3a5009ceca713d Mon Sep 17 00:00:00 2001 From: Boris Bedrenko <61657673+Arkanit7@users.noreply.github.com> Date: Wed, 9 Apr 2025 17:13:56 +0300 Subject: [PATCH 2/3] =?UTF-8?q?docs:=20revert=20"=D0=BD=D0=B5=20=D0=B5?= =?UTF-8?q?=D0=BB=D0=B5=D0=BC=D0=B5=D0=BD=D1=82=D0=BD=D0=B8=D1=85"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 2-ui/1-document/05-basic-dom-node-properties/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/05-basic-dom-node-properties/article.md b/2-ui/1-document/05-basic-dom-node-properties/article.md index 6ac278b5d..cacda7abe 100644 --- a/2-ui/1-document/05-basic-dom-node-properties/article.md +++ b/2-ui/1-document/05-basic-dom-node-properties/article.md @@ -502,7 +502,7 @@ elem.innerHTML = elem.innerHTML + "..." : Використовується для визначення, чи є вузол текстовим чи елементним вузлом. Має числове значення: `1` для елементів, `3` для текстових вузлів та декілька інших значень для інших типів вузлів. Лише для читання. `nodeName/tagName` -: Для елементів -- це назва тегів (записуються в верхньому регістрі, якщо не XML-режим). Для не елементних вузлів `nodeName` описує їх тип. Лише для читання. +: Для елементів -- це назва тегів (записуються в верхньому регістрі, якщо не XML-режим). Для неелементних вузлів `nodeName` описує їх тип. Лише для читання. `innerHTML` : Вміст HTML елемента. Можна змінювати. From b478d7ed796a3ae7f44e2a35dfbbb140577eed7c Mon Sep 17 00:00:00 2001 From: Boris Bedrenko <61657673+Arkanit7@users.noreply.github.com> Date: Wed, 9 Apr 2025 17:27:30 +0300 Subject: [PATCH 3/3] docs: fix inline code and translate block code comment --- 2-ui/1-document/05-basic-dom-node-properties/article.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/2-ui/1-document/05-basic-dom-node-properties/article.md b/2-ui/1-document/05-basic-dom-node-properties/article.md index cacda7abe..c05e02fcc 100644 --- a/2-ui/1-document/05-basic-dom-node-properties/article.md +++ b/2-ui/1-document/05-basic-dom-node-properties/article.md @@ -322,7 +322,7 @@ elem.innerHTML = elem.innerHTML + "..." let div = document.querySelector('div'); *!* - // replace div.outerHTML with

...

+ // замінити div.outerHTML на

...

*/!* div.outerHTML = '

Новий елемент

'; // (*) @@ -337,7 +337,7 @@ elem.innerHTML = elem.innerHTML + "..." У рядку `(*)` ми замінили `div` на `

Новий елемент

`. У зовнішньому документі (DOM) ми можемо побачити новий вміст замість `
`. Але, як ми можемо бачити в рядку `(**)`, значення старої змінної `div` не змінилося! -Присвоєння `outerHTML` не змінює елемент DOM (об'єкт, на який посилається, у цьому випадку, змінна 'div'), але видаляє його з DOM і вставляє новий HTML замість нього. +Присвоєння `outerHTML` не змінює елемент DOM (об'єкт, на який посилається, у цьому випадку, змінна `div`), але видаляє його з DOM і вставляє новий HTML замість нього. Отже, в `div.outerHTML=...` сталося наступне: - `div` був видалений з документа.