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 index c205ff06a..620e623b8 100644 --- 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. -Наприклад, якщо тег є ``, то об’єкт DOM має `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,16 +44,16 @@ 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 @@ -61,7 +61,7 @@ document.body.sayHi(); // Привіт, Я BODY @@ -70,7 +70,7 @@ document.body.sayHi(); // Привіт, Я BODY Зверніть увагу, що стандартний атрибут для одного елемента може бути невідомим для іншого. Наприклад, `"type"` -- це стандартний для `` ([HTMLInputElement](https://html.spec.whatwg.org/#htmlinputelement)), але не для `` ([HTMLBodyElement](https://html.spec.whatwg.org/#htmlbodyelement)). Стандартні атрибути описані у специфікації для відповідного класу елемента. -Here we can see it: +Ось приклад: ```html run @@ -83,32 +83,32 @@ Here we can see it: ``` -Отже, якщо атрибут є нестандартним, то для нього не буде 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 ``` -Атрибути 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}` ); } @@ -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 @@ -162,7 +162,7 @@ Here we can see it: ``` -Але є винятки, наприклад, `input.value` синхронізує лише з атрибуту -> до властивості, але не назад: +Але є винятки, наприклад, `input.value` синхронізується лише в одному напрямку, з атрибуту -> до властивості, але не навпаки: ```html run @@ -190,7 +190,7 @@ Here we can see it: ## Властивості DOM типізовані -Властивості DOM не завжди є рядками. Наприклад, властивість `input.checked` (для чекбоксів) має бульовий тип: +Властивості DOM не завжди є рядками. Наприклад, властивість `input.checked` (для чекбоксів) має логічний(булевий) тип: ```html run чекбокс @@ -207,10 +207,10 @@ Here we can see it:
Привіт
@@ -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'); ``` -Атрибути, що складаються з декількох слів, такі як `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'); ``` -Використання атрибутів `data-*` є валідним, безпечним способом передачі власних даних. +Використання атрибутів `data-*` є валідним, безпечним способом передачі додаткових даних. -Зверніть увагу, що ми можемо не тільки читати, але й модифікувати атрибути даних. Тоді CSS відповідно оновлює зовнішній вигляд: у прикладі вище останнього рядка `(*)` змінює колір на синій. +Зверніть увагу, що ми можемо не тільки читати, але й модифікувати data-атрибути. Тоді CSS відповідно оновлює зовнішній вигляд: у прикладі вище останнього рядка `(*)` змінює колір на синій. ## Підсумки