Skip to content

fix(2-1.6): Review Attributes and properties article #531

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Aug 14, 2023
Merged

fix(2-1.6): Review Attributes and properties article #531

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
20a44c3
fix(2-1.6): Review `Attributes and properties` article
ltlaitoff Jul 21, 2023
3037c1d
Update 2-ui/1-document/06-dom-attributes-and-properties/article.md
dolgachio Aug 14, 2023
91ae307
Update 2-ui/1-document/06-dom-attributes-and-properties/article.md
dolgachio Aug 14, 2023
a6529e9
Update 2-ui/1-document/06-dom-attributes-and-properties/article.md
dolgachio Aug 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 38 additions & 38 deletions 2-ui/1-document/06-dom-attributes-and-properties/article.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = {
Expand All @@ -23,7 +23,7 @@ document.body.myData = {
alert(document.body.myData.title); // Імператор
```

Ми також можемо додати спосіб:
Ми також можемо додати метод:

```js run
document.body.sayTagName = function() {
Expand All @@ -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>
Expand All @@ -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">
Expand All @@ -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`).
- Їхні значення завжди є рядками.
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -162,7 +162,7 @@ Here we can see it:
</script>
```

Але є винятки, наприклад, `input.value` синхронізує лише з атрибуту -> до властивості, але не назад:
Але є винятки, наприклад, `input.value` синхронізується лише в одному напрямку, з атрибуту -> до властивості, але не навпаки:

```html run
<input>
Expand Down Expand Up @@ -190,7 +190,7 @@ Here we can see it:

## Властивості DOM типізовані

Властивості DOM не завжди є рядками. Наприклад, властивість `input.checked` (для чекбоксів) має бульовий тип:
Властивості DOM не завжди є рядками. Наприклад, властивість `input.checked` (для чекбоксів) має логічний(булевий) тип:

```html run
<input id="input" type="checkbox" checked> чекбокс
Expand All @@ -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>
Expand Down Expand Up @@ -238,9 +238,9 @@ Here we can see it:

## Нестандартні атрибути, dataset

При написанні HTML ми використовуємо багато стандартних атрибутів. Але як щодо нестандартних, користувацьких? По-перше, подивімося, чи вони корисні чи ні? І для чого?
При написанні HTML ми використовуємо багато стандартних атрибутів. Але як щодо нестандартних, користувацьких? Спершу давайте побачимо, чи вони корисні, і для чого вони потрібні?

Іноді нестандартні атрибути використовуються для передачі користувацьких даних з HTML до JavaScript, або для "позначки" HTML-елементів для JavaScript.
Іноді нестандартні атрибути використовуються для передачі користувацьких даних з HTML до JavaScript, або для "позначення" HTML-елементів для JavaScript.

Наприклад:

Expand Down Expand Up @@ -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) атрибути.

Expand All @@ -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":

Expand Down Expand Up @@ -356,9 +356,9 @@ div.setAttribute('order-state', 'canceled');
</script>
```

Використання атрибутів `data-*` є валідним, безпечним способом передачі власних даних.
Використання атрибутів `data-*` є валідним, безпечним способом передачі додаткових даних.

Зверніть увагу, що ми можемо не тільки читати, але й модифікувати атрибути даних. Тоді CSS відповідно оновлює зовнішній вигляд: у прикладі вище останнього рядка `(*)` змінює колір на синій.
Зверніть увагу, що ми можемо не тільки читати, але й модифікувати data-атрибути. Тоді CSS відповідно оновлює зовнішній вигляд: у прикладі вище останнього рядка `(*)` змінює колір на синій.

## Підсумки

Expand Down