Skip to content

Update article.md #438

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 1 commit into from
Feb 18, 2023
Merged

Update article.md #438

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
18 changes: 9 additions & 9 deletions 2-ui/1-document/03-dom-navigation/article.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ DOM дозволяє нам робити будь-що з елементами
`<head>` = `document.head`
: Тег `<head>` доступний як `document.head`.

````warn header="Але є загвоздка: `document.body` може бути `null`"
````warn header="Але є заковика: `document.body` може бути `null`"
Скрипт не може отримати доступ до елемента, який не існує на момент виконання цього скрипта.

Зокрема, якщо скрипт знаходиться всередині `<head>`, то `document.body` недоступний, оскільки браузер ще не прочитав його.
Expand Down Expand Up @@ -152,8 +152,8 @@ elem.childNodes[elem.childNodes.length - 1] === elem.lastChild
alert( Array.from(document.body.childNodes).filter ); // function
```

```warn header="Колекції DOM доступні лише для считування"
Колекції DOM і навіть більше -- *всі* властивості навігації, перелічені в цьому розділі, доступні лише для считування.
```warn header="Колекції DOM доступні лише для зчитування"
Колекції DOM і навіть більше -- *всі* властивості навігації, перелічені в цьому розділі, доступні лише для зчитування.

Ми не можемо замінити дочірній елемент на щось інше, призначивши `childNodes[i] = ...`.

Expand All @@ -163,7 +163,7 @@ elem.childNodes[elem.childNodes.length - 1] === elem.lastChild
```warn header="DOM колецкції живі"
Майже всі колекції DOM, за незначними винятками, є *живими*. Іншими словами, вони завжди відображають поточний стан DOM.

Якщо ми зберегли посилання на `elem.childNodes` і після цього додамо/видалемо вузли в DOM, вони автоматично з’являться в колекції.
Якщо ми зберегли посилання на `elem.childNodes` і після цього додамо/видалимо вузли в DOM, вони автоматично з’являться в колекції.
```

````warn header="Не використовуйте `for..in` для перебору колекцій"
Expand Down Expand Up @@ -218,18 +218,18 @@ alert( document.body.previousSibling ); // HTMLHeadElement

Але для багатьох задач нам не потрібні текстові вузли чи вузли коментарів. Ми хочемо маніпулювати вузлами елементів, які представляють теги та формують структуру сторінки.

Тож давайте подивимося властивости зі спеціальними посиланнями, які враховують лише *вузли елементи*:
Тож давайте подивимося властивости зі спеціальними посиланнями, які враховують лише *вузли-елементи*:

![](dom-links-elements.svg)

Посилання подібні до наведених вище, лише із словом `Element` всередині:

- `children` -- тільки ті дочірні елементи, які є вузлами елементами.
- `children` -- тільки ті дочірні елементи, які є вузлами-елементами.
- `firstElementChild`, `lastElementChild` -- перший і останній дочірні елементи.
- `previousElementSibling`, `nextElementSibling` -- сусідні елементи.
- `parentElement` -- батьківський елемент.

````smart header="Чому `parentElement`? Чи може батько бути *не* елементом?"
````smart header="Чому `parentElement`? Чи може батько бути *не елементом?*"
Властивість `parentElement` повертає батьківський елемент "element", тоді як `parentNode` повертає батьківський "будь-який вузол". Ці властивості зазвичай однакові: обидва вони отримують батьківський елемент.

За одним винятком `document.documentElement`:
Expand All @@ -243,7 +243,7 @@ alert( document.documentElement.parentElement ); // null

Ця деталь може бути корисною, коли ми хочемо перейти від довільного елемента `elem` до `<html>`, але не до `document`:
```js
while(elem = elem.parentElement) { // ідемо вверх поки не дійдемо до <html>
while(elem = elem.parentElement) { // ідемо вгору, поки не дійдемо до <html>
alert( elem );
}
```
Expand Down Expand Up @@ -330,4 +330,4 @@ while(elem = elem.parentElement) { // ідемо вверх поки не дій
- Для всіх вузлів: `parentNode`, `childNodes`, `firstChild`, `lastChild`, `previousSibling`, `nextSibling`.
- Лише для вузлів елементів: `parentElement`, `children`, `firstElementChild`, `lastElementChild`, `previousElementSibling`, `nextElementSibling`.

Деякі типи елементів DOM, напр. таблиці, надають додаткові властивості та колекції для доступу до їх вмісту.
Деякі типи елементів DOM (наприклад, таблиці) надають додаткові властивості та колекції для доступу до їх вмісту.