diff --git a/2-ui/1-document/04-searching-elements-dom/article.md b/2-ui/1-document/04-searching-elements-dom/article.md index 133951bd3..eb111bc00 100644 --- a/2-ui/1-document/04-searching-elements-dom/article.md +++ b/2-ui/1-document/04-searching-elements-dom/article.md @@ -2,11 +2,11 @@ Властивості навігації по DOM чудові, коли елементи розташовані близько один до одного. А якщо ні? Як отримати довільний елемент сторінки? -Для цього існують додаткові методи пошуку. +Для цього в DOM існують додаткові методи пошуку. ## document.getElementById або просто id -Якщо елемент має атрибут `id`, ми можемо отримати його за допомогою методу `document.getElementById(id)`, незалежно від того, де він знаходиться. +Якщо елемент має атрибут `id`, ми можемо отримати його викликом `document.getElementById(id)`, незалежно від того, де він знаходиться. Наприклад: @@ -42,7 +42,7 @@ ``` -...Але це лише якщо ми не оголошуємо змінну JavaScript з тим самим ім’ям, інакше вона матиме пріоритет: +...Але це лише якщо ми не оголосили змінну JavaScript з таким же ім’ям, інакше вона матиме пріоритет: ```html run untrusted height=0
@@ -57,28 +57,28 @@ ```warn header="Будь ласка, не використовуйте id-іменовані глобальні змінні для доступу до елементів" Ця поведінка описана [у специфікації](http://www.whatwg.org/specs/web-apps/current-work/#dom-window-nameditem), тож це свого роду стандарт. Але він підтримується в основному для сумісності. -Браузер намагається нам допомогти, змішуючи простори імен JS і DOM. Це добре для простих сценаріїв, вбудованих у HTML, але загалом це не дуже добре. Можуть виникнути конфлікти імен. Крім того, коли хтось читає JS-код і не бачить HTML, незрозуміло, звідки приходить змінна. +Браузер намагається нам допомогти, змішуючи простори імен JS і DOM. Це зручно для простих скриптів, які знаходяться прямо в HTML, але загалом це не дуже добре. Можуть виникнути конфлікти імен. Крім того, коли хтось читає JS-код і не бачить HTML, незрозуміло, звідки приходить змінна. -Тут у підручнику ми використовуємо `id` для прямого посилання на елемент для стислості, коли очевидно, звідки цей елемент походить. +У цьому посібнику ми будемо використовувати `id` для прямого посилання на елемент для стислості, коли очевидно, звідки цей елемент походить. -У реальному житті краще надавати перевагу `document.getElementById`. +У реальному житті краще використовувати `document.getElementById`. ``` -```smart header="`id` має бути унікальним" -`id` має бути унікальним. У документі може бути лише один елемент із заданим `id`. +```smart header="Значення `id` має бути унікальним" +Значення `id` має бути унікальним. У документі повинен бути лише один елемент із заданим `id`. -Якщо є кілька елементів з однаковим `id`, то поведінка методів, які його використовують, буде непередбачуваною, наприклад. `document.getElementById` може повертати будь-який з таких елементів випадковим чином. Тому, будь ласка, дотримуйтеся правила та залишайте `id` унікальним. +Якщо є кілька елементів з однаковим `id`, то поведінка методів, які його використовують є непередбачуваною. Наприклад, `document.getElementById` може повертати будь-який з таких елементів випадковим чином. Тому, будь ласка, дотримуйтеся правила та залишайте `id` унікальним. ``` ```warn header="Лише `document.getElementById`, а не `anyElem.getElementById`" -Метод `getElementById` можна викликати лише для об’єкта `document`. Він шукає вказаний `id` у всьому документі. +Метод `getElementById` може бути викликаний лише на об’єкті `document`. Він шукає вказаний `id` у всьому документі. ``` ## querySelectorAll [#querySelectorAll] -До сьогодні найуніверсальніший метод -- це `elem.querySelectorAll(css)`, він повертає всі елементи всередині `elem`, що відповідають заданому CSS-селектору. +Найбільш гнучким методом є `elem.querySelectorAll(css)`, який повертає всі елементи всередині `elem`, що відповідають заданому CSS-селектору. -Тут ми шукаємо всі елементи `getElementsByTagName
.
+У новачків у розробці іноді трапляються випадки, коли вони забувають про літеру `"s"`. Тобто вони намагаються викликати метод `getElementByTagName` замість getElementsByTagName
.
-Літера `"s"` відсутня в `getElementById`, оскільки повертає один елемент. Але `getElementsByTagName` повертає колекцію елементів, тому всередині є `"s"`.
+Літера `"s"` відсутня в назві методу `getElementById`, оскільки він повертає один елемент. А `getElementsByTagName` повертає колекцію елементів, тому всередині є `"s"`.
```
````warn header="Повертає колекцію, а не елемент!"
@@ -363,12 +363,12 @@ document.getElementsByTagName('input')[0].value = 5;
-Найчастіше використовуються `querySelector` і `querySelectorAll`, але `getElement(s)By*` може бути корисним час від часу або знаходитися в старому коді.
+Найчастіше використовуються `querySelector` і `querySelectorAll`, але `getElement(s)By*` може бути корисним час від часу або зустрічатися в старих скриптах.
Крім того:
-- `elem.matches(css)` існує для того, щоб перевірити, чи відповідає `elem` заданому CSS-селектору.
-- `elem.closest(css)` існує для того, щоб шукати найближчого предка, який відповідає заданому CSS-селектору. Сам `elem` також перевіряється.
+- Існує метод `elem.matches(css)` , який перевіряє, чи відповідає `elem` заданому CSS-селектору.
+- Існує метод `elem.closest(css)` , який шукає найближчого предка, який відповідає заданому CSS-селектору. Сам `elem` також перевіряється.
І згадаймо тут ще один метод перевірки взаємовідносин нащадок-предок, оскільки він іноді стає в нагоді:
- `elemA.contains(elemB)` повертає true, якщо `elemB` знаходиться всередині `elemA` (нащадок `elemA`) або коли `elemA==elemB`.
\ No newline at end of file