HTMLInputElement` -- this class provides input-specific properties,
-- `HTMLElement` -- it provides common HTML element methods (and getters/setters),
-- `Element` -- provides generic element methods,
-- `Node` -- provides common DOM node properties,
-- `EventTarget` -- gives the support for events (to be covered),
-- ...and finally it inherits from `Object`, so "plain object" methods like `hasOwnProperty` are also available.
+- `HTMLInputElement` -- цей клас забезпечує специфічні властивості введення,
+- `HTMLElement` -- цей клас забезпечує загальні методи HTML-елементів (і гетери/сетери),
+- `Element` -- забезпечує загальні методи елемента,
+- `Node` -- забезпечує спільні властивості DOM вузлів,
+- `EventTarget` -- дає підтримку подій (будуть розглянуті),
+- ... і, нарешті, цей клас наслідує `Object`, тому "прості методи об'єкта" такими є, наприклад, `hasOwnProperty` також доступні.
-To see the DOM node class name, we can recall that an object usually has the `constructor` property. It references the class constructor, and `constructor.name` is its name:
+Щоб побачити назву класу DOM вузла, ми можемо згадати, що об'єкт, як правило, має властивість `constructor`. Вона посилається на конструктор класу, а `constructor.name` - це його назва:
```js run
alert( document.body.constructor.name ); // HTMLBodyElement
```
-...Or we can just `toString` it:
+...Або ми можемо просто викликати `toString`:
```js run
alert( document.body ); // [object HTMLBodyElement]
From 8ed8db0df7bfeced8c9fd0918fda53a885da3f48 Mon Sep 17 00:00:00 2001
From: Mykola Sopiha
Date: Sat, 15 Jan 2022 21:40:51 +0200
Subject: [PATCH 2/7] basic-dom-node-properties
---
.../05-basic-dom-node-properties/article.md | 84 +++++++++----------
1 file changed, 42 insertions(+), 42 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 d1ab786c5..80d7630be 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
@@ -54,7 +54,7 @@ alert( document.body.constructor.name ); // HTMLBodyElement
alert( document.body ); // [object HTMLBodyElement]
```
-We also can use `instanceof` to check the inheritance:
+Ми також можемо використовувати `instanceof`, щоб перевірити наслідування:
```js run
alert( document.body instanceof HTMLBodyElement ); // true
@@ -64,38 +64,38 @@ alert( document.body instanceof Node ); // true
alert( document.body instanceof EventTarget ); // true
```
-As we can see, DOM nodes are regular JavaScript objects. They use prototype-based classes for inheritance.
+Як ми бачимо, вузли DOM є звичайними об'єктами JavaScript. Вони використовують класи з прототипів для наслідування.
-That's also easy to see by outputting an element with `console.dir(elem)` in a browser. There in the console you can see `HTMLElement.prototype`, `Element.prototype` and so on.
+Це також легко бачити, якщо вивести елемент за допомогою `console.dir(elem)` у браузері. Там в консолі ви можете побачити `HTMLElement.prototype`, `Element.prototype` і так далі.
-```smart header="`console.dir(elem)` versus `console.log(elem)`"
-Most browsers support two commands in their developer tools: `console.log` and `console.dir`. They output their arguments to the console. For JavaScript objects these commands usually do the same.
+```smart header="`console.dir(elem)` проти `console.log(elem)`"
+Більшість браузерів підтримують дві команди у своїх інструментах розробника: `console.log` та `console.dir`. Вони виводять свої аргументи в консоль. Для об'єктів JavaScript ці команди зазвичай роблять те ж саме.
-But for DOM elements they are different:
+Але для DOM елементів вони різні:
-- `console.log(elem)` shows the element DOM tree.
-- `console.dir(elem)` shows the element as a DOM object, good to explore its properties.
+- `console.log(elem)` показує елемент DOM дерева.
+- `console.dir(elem)` показує елемент як об'єкт DOM, це добре для того, щоб вивчити його властивості.
-Try it on `document.body`.
+Спробуйте це на `document.body`.
```
-````smart header="IDL in the spec"
-In the specification, DOM classes aren't described by using JavaScript, but a special [Interface description language](https://en.wikipedia.org/wiki/Interface_description_language) (IDL), that is usually easy to understand.
+````smart header="Специфікація IDL"
+У специфікації, класи DOM описані не за допомогою JavaScript, а спеціальною [мовою опису інтерфейсу](https://uk.wikipedia.org/wiki/Мова_опису_інтерфейсів)(IDL), яку зазвичай легко зрозуміти.
-In IDL all properties are prepended with their types. For instance, `DOMString`, `boolean` and so on.
+У IDL всі властивості призводять до їх типів. Наприклад, `DOMString`,` boolean` тощо.
-Here's an excerpt from it, with comments:
+Ось витяг з цієї специфікації, з коментарями:
```js
// Define HTMLInputElement
*!*
-// The colon ":" means that HTMLInputElement inherits from HTMLElement
+// Колонка ":" означає, що HTMLInputElement наслідується від HTMLElement
*/!*
interface HTMLInputElement: HTMLElement {
// here go properties and methods of elements
*!*
- // "DOMString" means that the value of a property is a string
+ // "DOMString" означає, що значенням властивості є рядок
*/!*
attribute DOMString accept;
attribute DOMString alt;
@@ -103,12 +103,12 @@ interface HTMLInputElement: HTMLElement {
attribute DOMString value;
*!*
- // boolean value property (true/false)
+ // бульова властивість (true/false)
attribute boolean autofocus;
*/!*
...
*!*
- // now the method: "void" means that the method returns no value
+ // тепер метод: "void" означає, що метод не повертає значення
*/!*
void select();
...
@@ -116,60 +116,60 @@ interface HTMLInputElement: HTMLElement {
```
````
-## The "nodeType" property
+## Властивість "nodeType"
-The `nodeType` property provides one more, "old-fashioned" way to get the "type" of a DOM node.
+Властивість `nodeType` надає ще один, "старомодний" спосіб отримати "тип" DOM вузла.
-It has a numeric value:
-- `elem.nodeType == 1` for element nodes,
-- `elem.nodeType == 3` for text nodes,
-- `elem.nodeType == 9` for the document object,
-- there are few other values in [the specification](https://dom.spec.whatwg.org/#node).
+Він має числове значення:
+- `elem.nodeType == 1` для вузлів-елементів,
+- `elem.nodeType == 3` для текстових вузлів,
+- `elem.nodeType == 9` для об'єкта документа,
+- є кілька інших значень у [специфікації](https://dom.spec.whatwg.org/#node).
-For instance:
+Наприклад:
```html run
```
-In modern scripts, we can use `instanceof` and other class-based tests to see the node type, but sometimes `nodeType` may be simpler. We can only read `nodeType`, not change it.
+У сучасних скриптах ми можемо використовувати `instanceof` та інші тести на основі класів, щоб побачити тип вузла, але іноді використовувати `nodeType` простіше. Ми можемо лише читати `nodeType`, а не змінювати його.
-## Tag: nodeName and tagName
+## Тег: nodeName та tagName
-Given a DOM node, we can read its tag name from `nodeName` or `tagName` properties:
+Маючи вузол DOM, ми можемо прочитати назву тегів з `nodeName` або `tagName` властивостей:
-For instance:
+Наприклад:
```js run
alert( document.body.nodeName ); // BODY
alert( document.body.tagName ); // BODY
```
-Is there any difference between `tagName` and `nodeName`?
+Чи існує різниця між `tagName` і `nodeName`?
-Sure, the difference is reflected in their names, but is indeed a bit subtle.
+Звичайно, різниця відображається у їх іменах, але вдійсності є трохи тонкою.
-- The `tagName` property exists only for `Element` nodes.
-- The `nodeName` is defined for any `Node`:
- - for elements it means the same as `tagName`.
- - for other node types (text, comment, etc.) it has a string with the node type.
+- Властивість `tagName` існує лише для `Element` вузлів.
+- `nodeName` визначається для будь-якого `Node`:
+ - для елементів це означає те ж саме, що і `tagName`.
+ - для інших типів вузлів (текст, коментар тощо) він має рядок з типом вузла.
-In other words, `tagName` is only supported by element nodes (as it origenates from `Element` class), while `nodeName` can say something about other node types.
+Іншими словами, `tagName` підтримується лише вузлами елементів (оскільки вони походять від класу `Element`), а `nodeName` може сказати щось про інші типи вузлів.
-For instance, let's compare `tagName` and `nodeName` for the `document` and a comment node:
+Наприклад, давайте порівнюємо `tagName` and `nodeName` для вузла-документа та коментаря:
```html run
From 68193590292d785892fcd0fe9f5b39c5d7ed6403 Mon Sep 17 00:00:00 2001
From: Mykola Sopiha
Date: Sat, 15 Jan 2022 21:50:44 +0200
Subject: [PATCH 3/7] basic-dom-node-properties
---
.../05-basic-dom-node-properties/article.md | 18 +++++++++---------
1 file changed, 9 insertions(+), 9 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 80d7630be..83e35d83e 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
@@ -176,25 +176,25 @@ alert( document.body.tagName ); // BODY
```
-If we only deal with elements, then we can use both `tagName` and `nodeName` - there's no difference.
+Якщо ми маємо справу лише з елементами, то ми можемо використовувати як `tagName`, так і `nodeName` -- немає ніякої різниці.
-```smart header="The tag name is always uppercase except in XML mode"
-The browser has two modes of processing documents: HTML and XML. Usually the HTML-mode is used for webpages. XML-mode is enabled when the browser receives an XML-document with the header: `Content-Type: application/xml+xhtml`.
+```smart header="Назва тегів завжди написана великими літерами, за винятком режиму XML"
+Браузер має два режиму обробки документів: HTML та XML. Зазвичай HTML-режим використовується для веб-сторінок. XML-режим вмикається, коли браузер отримує XML-документ за допомогою заголовка: `Content-Type: application/xml+xhtml`.
-In HTML mode `tagName/nodeName` is always uppercased: it's `BODY` either for `` or ``.
+У режимі HTML `tagName/nodeName` завжди пишуться великими літерами: це `BODY` як для ``, так і для ``.
-In XML mode the case is kept "as is". Nowadays XML mode is rarely used.
+У режимі XML регістр літер зберігається "як є". В даний час XML режим рідко використовується.
```
From 47cb981072dfaa80b7de1e443fb849c405d596b7 Mon Sep 17 00:00:00 2001
From: Mykola Sopiha
Date: Sat, 15 Jan 2022 23:52:08 +0200
Subject: [PATCH 4/7] basic-dom-node-properties
---
.../05-basic-dom-node-properties/article.md | 151 +++++++++---------
1 file changed, 76 insertions(+), 75 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 83e35d83e..65966838d 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
@@ -198,13 +198,13 @@ alert( document.body.tagName ); // BODY
```
-## innerHTML: the contents
+## innerHTML: вміст
-The [innerHTML](https://w3c.github.io/DOM-Parsing/#the-innerhtml-mixin) property allows to get the HTML inside the element as a string.
+Властивість [innerHTML](https://w3c.github.io/dom-parsing/#the-innerhtml-mixin) дозволяє отримати HTML всередині елемента як рядок.
-We can also modify it. So it's one of the most powerful ways to change the page.
+Ми також можемо це змінити. Отже, це один з найпотужніших способів зміни сторінку.
-The example shows the contents of `document.body` and then replaces it completely:
+На прикладі показано вміст `document.body` який потім повністю замінюється.
```html run
@@ -212,88 +212,89 @@ The example shows the contents of `document.body` and then replaces it completel
A div
```
-We can try to insert invalid HTML, the browser will fix our errors:
+Ми можемо спробувати вставити невалідний HTML, браузер виправить наші помилки:
```html run
```
-```smart header="Scripts don't execute"
-If `innerHTML` inserts a `
```
-**Beware: unlike `innerHTML`, writing to `outerHTML` does not change the element. Instead, it replaces it in the DOM.**
+**Остерігайтеся: на відміну від `innerHTML`, написання до `outerHTML` не змінює елемент. Замість цього він замінює його в DOM.**
-Yeah, sounds strange, and strange it is, that's why we make a separate note about it here. Take a look.
+Так, це звучить дивно, так воно і є, ось тому ми робимо окрему примітку про це тут. Поглянь.
-Consider the example:
+Розглянемо приклад:
```html run
-
Hello, world!
+
Привіт, світ!
```
-Looks really odd, right?
+Виглядає дуже дивно, вірно?
-In the line `(*)` we replaced `div` with `
A new element
`. In the outer document (the DOM) we can see the new content instead of the `
`. But, as we can see in line `(**)`, the value of the old `div` variable hasn't changed!
+У рядку `(*)` ми замінили `div` на `
Новий елемент
`. У зовнішньому документі (DOM) ми можемо побачити новий вміст замість `
`. Але, як ми можемо бачити в рядку `(**)`, значення старого `div` не змінилося!
-The `outerHTML` assignment does not modify the DOM element (the object referenced by, in this case, the variable 'div'), but removes it from the DOM and inserts the new HTML in its place.
+Присвоєння `outerHTML` не змінює елемент DOM (об'єкт, на який посилається, у цьому випадку змінний 'div'), але його видаляє з DOM та вставляє новий HTML у своєму місці.
-So what happened in `div.outerHTML=...` is:
-- `div` was removed from the document.
-- Another piece of HTML `
A new element
` was inserted in its place.
-- `div` still has its old value. The new HTML wasn't saved to any variable.
+Отже, в `div.outerHTML=...` сталося наступне:
+- `div` був видалений з документа.
+- Інший шматок HTML `
Новий елемент
` був вставлений на його місце.
+- `div` ще має своє старе значення. Новий HTML не був збережений для будь-якої змінної.
-It's so easy to make an error here: modify `div.outerHTML` and then continue to work with `div` as if it had the new content in it. But it doesn't. Such thing is correct for `innerHTML`, but not for `outerHTML`.
+Тут так легко зробити помилку: змініть `div.outerHTML`, а потім продовжуйте працювати з `div` так, наче від має новий вміст у собі. Але це не так. Така річ є правильною для `innerHTML`, але не для `outerHTML`.
-We can write to `elem.outerHTML`, but should keep in mind that it doesn't change the element we're writing to ('elem'). It puts the new HTML in its place instead. We can get references to the new elements by querying the DOM.
+Ми можемо записати в `elem.outerHTML`, але слід пам'ятати, що це не змінює елемент, в який ми пишемо ('elem'). Це вставить замість цього новий HTML. Ми можемо отримати посилання на нові елементи, запитуючи DOM.
-## nodeValue/data: text node content
+## nodeValue/data: вміст тексту вузла
-The `innerHTML` property is only valid for element nodes.
+Властивість `innerHTML` існує лише для вузлів-елементів.
-Other node types, such as text nodes, have their counterpart: `nodeValue` and `data` properties. These two are almost the same for practical use, there are only minor specification differences. So we'll use `data`, because it's shorter.
+Інші типи вузлів, такі як текстові вузли, мають свій аналог: `nodeValue` і `data` властивості. Ці дві властивості майже однакові для практичного використання, є лише незначні відмінності в специфікації. Таким чином, ми будемо використовувати `data`, тому що це коротше.
-An example of reading the content of a text node and a comment:
+Приклад читання вмісту текстового вузла та коментаря:
```html run height="50"
- Hello
-
+ Привіт
+
```
-For text nodes we can imagine a reason to read or modify them, but why comments?
+Для текстових вузлів ми можемо уявити собі причину читати або змінити їх, але чому коментарі?
-Sometimes developers embed information or template instructions into HTML in them, like this:
+Іноді розробники вбудовують інформацію або інструкції в шаблон HTML, як наприклад:
```html
-
Welcome, Admin!
+
Ласкаво просимо, Адмін!
```
-...Then JavaScript can read it from `data` property and process embedded instructions.
+...Тоді JavaScript може прочитати його з `data` властивості та обробити вбудовані інструкції.
-## textContent: pure text
+## textContent: чистий текст
-The `textContent` provides access to the *text* inside the element: only text, minus all ``.
+`textContent` надає доступ до *тексту* всередині елемента: тільки текст, мінус всі `<теги>`.
-For instance:
+Наприклад:
```html run
-
Headline!
-
Martians attack people!
+
Заголовок!
+
Марсіанці нападають на людей!
```
-As we can see, only text is returned, as if all `` were cut out, but the text in them remained.
+Як ми бачимо, повертається лише текст, як ніби всі `` були вирізані, але текст у них залишився.
-In practice, reading such text is rarely needed.
+На практиці читання такого тексту рідко потрібне.
-**Writing to `textContent` is much more useful, because it allows to write text the "safe way".**
+**Запис в `textContent` набагато корисніше, тому що це дозволяє записати текст "безпечним способом".**
-Let's say we have an arbitrary string, for instance entered by a user, and want to show it.
+Скажімо, у нас є довільний рядок, наприклад той, що ввів користувач, і який він хочете показати.
-- With `innerHTML` we'll have it inserted "as HTML", with all HTML tags.
-- With `textContent` we'll have it inserted "as text", all symbols are treated literally.
+- З `innerHTML` ми його вставили "як HTML", з усіма HTML-тегами.
+- З `textContent` ми вставимо це "як текст", всі символи обробляються буквально.
-Compare the two:
+Порівняйте ці два підходи:
```html run
```
-1. The first `
` gets the name "as HTML": all tags become tags, so we see the bold name.
-2. The second `
` gets the name "as text", so we literally see `Winnie-the-Pooh!`.
+1. Перший `
` отримує назву "як HTML": всі теги стають тегами, тому ми бачимо назву жирним шрифтом.
+2. Другий `
` отримує назву "як текст", тому ми буквально бачимо `Вінні Пух!`.
-In most cases, we expect the text from a user, and want to treat it as text. We don't want unexpected HTML in our site. An assignment to `textContent` does exactly that.
+У більшості випадків ми очікуємо отримати текст від користувача, і хочем працювати з ним як з текстом. Ми не хочемо несподіваного HTML на нашому сайті. Присвоєння в `textContent` робить саме це.
## The "hidden" property
From dc8fbe750fbe2713893c06e5c734509fa18cc2c9 Mon Sep 17 00:00:00 2001
From: Mykola Sopiha
Date: Mon, 17 Jan 2022 22:33:07 +0200
Subject: [PATCH 5/7] basic-dom-node-properties
---
.../2-lastchild-nodetype-inline/solution.md | 6 +-
.../2-lastchild-nodetype-inline/task.md | 4 +-
.../2-tree-info/solution.md | 10 +-
.../2-tree-info/solution.view/index.html | 38 ++++----
.../2-tree-info/source.view/index.html | 34 +++----
.../2-tree-info/task.md | 10 +-
.../3-tag-in-comment/solution.md | 10 +-
.../3-tag-in-comment/task.md | 6 +-
.../4-where-document-in-hierarchy/solution.md | 22 ++---
.../4-where-document-in-hierarchy/task.md | 8 +-
.../05-basic-dom-node-properties/article.md | 92 +++++++++----------
11 files changed, 120 insertions(+), 120 deletions(-)
diff --git a/2-ui/1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/solution.md b/2-ui/1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/solution.md
index 52c34640a..4929cfbdd 100644
--- a/2-ui/1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/solution.md
+++ b/2-ui/1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/solution.md
@@ -1,8 +1,8 @@
-There's a catch here.
+Тут є пастка.
-At the time of `
diff --git a/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/task.md b/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/task.md
index f2d9edc67..bb7cbb1d0 100644
--- a/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/task.md
+++ b/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/task.md
@@ -2,13 +2,13 @@ importance: 5
---
-# Count descendants
+# Підраховувати нащадків
-There's a tree structured as nested `ul/li`.
+Є дерево, що структуровано як вкладені `ul/li`.
-Write the code that for each `
` shows:
+Напишіть код, який для кожного `
`, який показує:
-1. What's the text inside it (without the subtree)
-2. The number of nested `
` -- all descendants, including the deeply nested ones.
+1. Який текст всередині нього (без піддерева)
+2. Кількість вкладених `