Merge pull request #531 from ltlaitoff/fix-2-1.6-attributes-and-properties

dolgachio · web-flow · commit 9920d65486f7 · 2023-08-14T15:17:24.000+03:00
fix(2-1.6): Review `Attributes and properties` article
diff --git a/2-ui/1-document/06-dom-attributes-and-properties/article.md b/2-ui/1-document/06-dom-attributes-and-properties/article.md
@@ -1,18 +1,18 @@
 # Атрибути та властивості
 
-Коли браузер завантажує сторінку, він "читає" (іншими словами: "парсить") HTML і генерує об’єкти з нього. Для вузлів-елементів, найбільш стандартні атрибути HTML автоматично стають властивостями об’єктів DOM.
+Коли браузер завантажує сторінку, він "читає" (іншими словами: "парсить") HTML і генерує DOM об’єкти з нього. Для вузлів-елементів більшість стандартних атрибутів HTML автоматично стають властивостями об'єктів DOM.
 
-Наприклад, якщо тег є `<body id="page">`, то об’єкт DOM має `body.id="page"`.
+Наприклад, якщо тег це `<body id="page">`, тоді об’єкт DOM матиме `body.id="page"`.
 
-Але представлення атрибутів через власності не відбувається один в один! У цьому розділі ми звернемо увагу на те, що слід відокремити ці два поняття, щоб побачити, як працювати з ними, коли вони однакові, і коли вони різні.
+Але представлення атрибутів через властивості не відбувається один до одного! У цій главі ми звернемо увагу на відмінності цих двох концепцій, щоб навчитись, як з ними працювати, коли вони співпадають і коли відрізняються.
 
 ## DOM властивості
 
-Ми вже бачили вбудовані властивості DOM. Їх багато. Але технічно ніхто не обмежує нас, і якщо цього недостатньо, то ми можемо додати наші власні.
+Ми вже бачили вбудовані властивості DOM. Їх багато. Але технічно ніхто нас не обмежує, і якщо їх недостатньо, ми можемо додати власні.
 
-DOM вузли є звичайними об’єктами JavaScript. Ми можемо змінити їх.
+DOM вузли є звичайними об’єктами JavaScript. Ми можемо змінювати їх.
 
-Наприклад, створімо нову властивість `document.body`:
+Наприклад, створімо нову властивість у `document.body`:
 
 ```js run
 document.body.myData = {
@@ -23,7 +23,7 @@ document.body.myData = {
 alert(document.body.myData.title); // Імператор
 ```
 
-Ми також можемо додати спосіб:
+Ми також можемо додати метод:
 
 ```js run
 document.body.sayTagName = function() {
@@ -44,24 +44,24 @@ document.documentElement.sayHi(); // Привіт, Я HTML
 document.body.sayHi(); // Привіт, Я BODY
 ```
 
-Отже, властивості та методи DOM поводяться у звичайних об’єктах JavaScript:
+Отже, властивості та методи DOM поводяться так само, як і звичайні об’єкти JavaScript:
 
 - Вони можуть мати будь-яке значення.
-- Вони чутливі до регістру (пишіть `elem.nodeType`, не `elem.NoDeTyPe`).
+- Вони чутливі до регістру (наприклад `elem.nodeType`, не `elem.NoDeTyPe`).
 
 ## HTML атрибути
 
-У HTML, теги можуть мати атрибути. Коли браузер аналізує HTML для створення об’єктів DOM для тегів, він розпізнає *стандартні* атрибути та створює властивості в DOM.
+У HTML, теги можуть мати атрибути. Коли браузер аналізує HTML і створює DOM-об'єкти для тегів, він розпізнає _стандартні_ атрибути та створює з них властивості DOM.
 
-Отже, коли елемент має `id` або інший *стандартний* атрибут, створюється відповідна властивість. Але це не відбувається, якщо атрибут нестандартний.
+Отже, коли елемент має `id` або інший *стандартний* атрибут, створюється відповідна властивість. Проте цього не відбувається, якщо атрибут не є стандартним.
 
 Наприклад:
 ```html run
 <body id="test" something="non-standard">
   <script>
     alert(document.body.id); // test
 *!*
-    // нестандартний атрибут не дає властивості
+    // нестандартний атрибут не створює DOM-властивості
     alert(document.body.something); // undefined
 */!*
   </script>
@@ -70,7 +70,7 @@ document.body.sayHi(); // Привіт, Я BODY
 
 Зверніть увагу, що стандартний атрибут для одного елемента може бути невідомим для іншого. Наприклад, `"type"` -- це стандартний для `<input>` ([HTMLInputElement](https://html.spec.whatwg.org/#htmlinputelement)), але не для `<body>` ([HTMLBodyElement](https://html.spec.whatwg.org/#htmlbodyelement)). Стандартні атрибути описані у специфікації для відповідного класу елемента.
 
-Here we can see it:
+Ось приклад:
 ```html run
 <body id="body" type="...">
   <input id="input" type="text">
@@ -83,32 +83,32 @@ Here we can see it:
 </body>
 ```
 
-Отже, якщо атрибут є нестандартним, то для нього не буде DOM властивості. Чи є спосіб доступу до таких атрибутів?
+Отже, якщо атрибут не є стандартним, то для нього не буде створено DOM-властивості. Чи є спосіб отримати доступ до таких атрибутів?
 
 Звичайно. Всі атрибути доступні за допомогою наступних методів:
 
-- `elem.hasAttribute(name)` -- перевіряє наявність.
-- `elem.getAttribute(name)` -- отримує значення.
-- `elem.setAttribute(name, value)` -- встановлює значення.
+- `elem.hasAttribute(name)` -- перевіряє наявність атрибута.
+- `elem.getAttribute(name)` -- отримує значення атрибута.
+- `elem.setAttribute(name, value)` -- встановлює значення атрибута.
 - `elem.removeAttribute(name)` -- видаляє атрибут.
 
-Ці методи працюють саме з тим, що написано в HTML.
+Ці методи працюють із значеннями, записаними у HTML.
 
-Також можна прочитати всі атрибути, використовуючи `elem.attributes`: колекція об’єктів, що належать до вбудованого класу [Attr](https://dom.spec.whatwg.org/#attr), з `name` і `value` властивостями.
+Також можна прочитати всі атрибути, використовуючи `elem.attributes`: це колекція об'єктів, які належать вбудованому класу [Attr](https://dom.spec.whatwg.org/#attr), і мають властивості `name` та `value`.
 
-Ось демонстрація читання нестандартної власності:
+Ось демонстрація читання нестандартного атрибута:
 
 ```html run
 <body something="non-standard">
   <script>
 *!*
-    alert(document.body.getAttribute('something')); // нестандартна
+    alert(document.body.getAttribute('something')); // non-standard
 */!*
   </script>
 </body>
 ```
 
-Атрибути HTML мають такі функції:
+Атрибути HTML мають такі особливості:
 
 - Їх назва нечутлива до регістру (`id` -- це те саме, що й `ID`).
 - Їхні значення завжди є рядками.
@@ -126,7 +126,7 @@ Here we can see it:
 
     alert( elem.outerHTML ); // (3), дивимося чи атрибут знаходиться в HTML (так)
 
-    for (let attr of elem.attributes) { // (4) перелічуємо всі
+    for (let attr of elem.attributes) { // (4) перерахування всіх атрибутів
       alert( `${attr.name} = ${attr.value}` );
     }
   </script>
@@ -135,16 +135,16 @@ Here we can see it:
 
 Будь ласка, зверніть увагу:
 
-1. `getAttribute('About')` -- перша буква тут є великою, а в HTML це всі з малої літери. Але це не має значення: імена атрибутів -- нечутливі до регістру.
-2. Ми можемо призначити будь-що атрибуту, але це стане рядком. Отже, ми маємо `"123"` як значення.
+1. `getAttribute('About')` -- перша літера написана великою, а в HTML вона пишеться маленькою. Але це не має значення: імена атрибутів нечутливі до регістру.
+2. Ми можемо присвоїти атрибуту будь-яке значення, але воно стане рядком. Тому тут ми отримуємо `"123"` як значення.
 3. Всі атрибути, включаючи ті, які ми встановлюємо, видно в `outerHTML`.
-4. Колекція `attributes` є ітерованою і має всі атрибути елемента (стандартні та нестандартні) як об’єкти з `name` і `value` властивостями.
+4. Колекція `attributes` є ітерованою і має всі атрибути елемента (стандартні та нестандартні) у вигляді об'єктів з властивостями `name` та `value`.
 
 ## Синхронізація властивостей і атрибутів
 
-Коли стандартний атрибут змінюється, відповідна властивість автоматично оновлюється і (з деякими винятками) навпаки.
+Коли стандартний атрибут змінюється, відповідна властивість автоматично оновлюється і, за деякими винятками, навпаки.
 
-У наведеному нижче прикладі `id` модифікується як атрибут, і ми також можемо побачити зміну властивості. А потім те ж саме навпаки:
+У наведеному нижче прикладі `id` модифікується як атрибут, і ми також можемо побачити, що властивість теж змінюється. А потім те ж саме навпаки:
 
 ```html run
 <input>
@@ -162,7 +162,7 @@ Here we can see it:
 </script>
 ```
 
-Але є винятки, наприклад, `input.value` синхронізує лише з атрибуту -> до властивості, але не назад:
+Але є винятки, наприклад, `input.value` синхронізується лише в одному напрямку, з атрибуту -> до властивості, але не навпаки:
 
 ```html run
 <input>
@@ -190,7 +190,7 @@ Here we can see it:
 
 ## Властивості DOM типізовані
 
-Властивості DOM не завжди є рядками. Наприклад, властивість `input.checked` (для чекбоксів) має бульовий тип:
+Властивості DOM не завжди є рядками. Наприклад, властивість `input.checked` (для чекбоксів) має логічний(булевий) тип:
 
 ```html run
 <input id="input" type="checkbox" checked> чекбокс
@@ -207,10 +207,10 @@ Here we can see it:
 <div id="div" style="color:red;font-size:120%">Привіт</div>
 
 <script>
-  // string
+  // рядок
   alert(div.getAttribute('style')); // color:red;font-size:120%
 
-  // object
+  // об’єкт
   alert(div.style); // [object CSSStyleDeclaration]
   alert(div.style.color); // red
 </script>
@@ -238,9 +238,9 @@ Here we can see it:
 
 ## Нестандартні атрибути, dataset
 
-При написанні HTML ми використовуємо багато стандартних атрибутів. Але як щодо нестандартних, користувацьких? По-перше, подивімося, чи вони корисні чи ні? І для чого?
+При написанні HTML ми використовуємо багато стандартних атрибутів. Але як щодо нестандартних, користувацьких? Спершу давайте побачимо, чи вони корисні, і для чого вони потрібні?
 
-Іноді нестандартні атрибути використовуються для передачі користувацьких даних з HTML до JavaScript, або для "позначки" HTML-елементів для JavaScript.
+Іноді нестандартні атрибути використовуються для передачі користувацьких даних з HTML до JavaScript, або для "позначення" HTML-елементів для JavaScript.
 
 Наприклад:
 
@@ -307,7 +307,7 @@ Here we can see it:
 div.setAttribute('order-state', 'canceled');
 ```
 
-Але може виникнути потенційна проблема з користувацькими атрибутами. Що робити, якщо ми використовуємо нестандартний атрибут для наших цілей, а пізніше він з’являється в стандарті і виконує якусь функцію? Мова HTML жива, вона зростає, а також з’являється більше атрибутів, які відповідають потребам розробників. У такому випадку можуть бути несподівані ефекти.
+Але може виникнути потенційна проблема з користувацькими атрибутами. Що робити, якщо ми використовуємо нестандартний атрибут для наших цілей, а потім стандарт вводить його та надає йому якусь функціональність? Мова HTML жива, вона зростає, а також з’являється більше атрибутів, які відповідають потребам розробників. У такому випадку можуть виникнути неочікувані наслідки.
 
 Щоб уникнути конфліктів, існують [data-*](https://html.spec.whatwg.org/#embedding-custom-non-visible-data-with-the-data-*-attributes) атрибути.
 
@@ -324,7 +324,7 @@ div.setAttribute('order-state', 'canceled');
 </script>
 ```
 
-Атрибути, що складаються з декількох слів, такі як `data-order-state` стають записані за допомогою  верблюжої нотації (camel-case): `dataset.orderState`.
+Атрибути, що складаються з декількох слів, такі як `data-order-state` стають записані за допомогою верблюжої нотації (camel-case): `dataset.orderState`.
 
 Ось приклад переписаного "order state":
 
@@ -356,9 +356,9 @@ div.setAttribute('order-state', 'canceled');
 </script>
 ```
 
-Використання атрибутів `data-*` є валідним, безпечним способом передачі власних даних.
+Використання атрибутів `data-*` є валідним, безпечним способом передачі додаткових даних.
 
-Зверніть увагу, що ми можемо не тільки читати, але й модифікувати атрибути даних. Тоді CSS відповідно оновлює зовнішній вигляд: у прикладі вище останнього рядка `(*)` змінює колір на синій.
+Зверніть увагу, що ми можемо не тільки читати, але й модифікувати data-атрибути. Тоді CSS відповідно оновлює зовнішній вигляд: у прикладі вище останнього рядка `(*)` змінює колір на синій.
 
 ## Підсумки
 
