From 7936c2d1ab2455b8d0cd4dbb830ba008d46bf5f2 Mon Sep 17 00:00:00 2001 From: nibbl3 <77545790+nibbl@users.noreply.github.com> Date: Fri, 6 Jan 2023 16:00:09 +0200 Subject: [PATCH] Update article.md Fix grammar mistakes --- 2-ui/1-document/03-dom-navigation/article.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/2-ui/1-document/03-dom-navigation/article.md b/2-ui/1-document/03-dom-navigation/article.md index 130bd027b..289ccf33c 100644 --- a/2-ui/1-document/03-dom-navigation/article.md +++ b/2-ui/1-document/03-dom-navigation/article.md @@ -30,7 +30,7 @@ DOM дозволяє нам робити будь-що з елементами `` = `document.head` : Тег `` доступний як `document.head`. -````warn header="Але є загвоздка: `document.body` може бути `null`" +````warn header="Але є заковика: `document.body` може бути `null`" Скрипт не може отримати доступ до елемента, який не існує на момент виконання цього скрипта. Зокрема, якщо скрипт знаходиться всередині ``, то `document.body` недоступний, оскільки браузер ще не прочитав його. @@ -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] = ...`. @@ -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` для перебору колекцій" @@ -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`: @@ -243,7 +243,7 @@ alert( document.documentElement.parentElement ); // null Ця деталь може бути корисною, коли ми хочемо перейти від довільного елемента `elem` до ``, але не до `document`: ```js -while(elem = elem.parentElement) { // ідемо вверх поки не дійдемо до +while(elem = elem.parentElement) { // ідемо вгору, поки не дійдемо до alert( elem ); } ``` @@ -330,4 +330,4 @@ while(elem = elem.parentElement) { // ідемо вверх поки не дій - Для всіх вузлів: `parentNode`, `childNodes`, `firstChild`, `lastChild`, `previousSibling`, `nextSibling`. - Лише для вузлів елементів: `parentElement`, `children`, `firstElementChild`, `lastElementChild`, `previousElementSibling`, `nextElementSibling`. -Деякі типи елементів DOM, напр. таблиці, надають додаткові властивості та колекції для доступу до їх вмісту. +Деякі типи елементів DOM (наприклад, таблиці) надають додаткові властивості та колекції для доступу до їх вмісту.