@@ -103,22 +103,22 @@
Цей метод дійсно потужний, оскільки можна використовувати будь-який CSS-селектор.
```smart header="Також можна використовувати псевдокласи"
-Псевдокласи в CSS-селекторі, такі як `:hover` і `:active`, також підтримуються. Наприклад, `document.querySelectorAll(':hover')` поверне колекцію елементів, що знаходяться під курсором миші (у порядку вкладення: від крайнього `` до найбільш вкладеного).
+Псевдокласи в CSS-селекторі, такі як `:hover` і `:active`, також підтримуються. Наприклад, `document.querySelectorAll(':hover')` поверне колекцію елементів, що знаходяться під курсором миші (у порядку вкладення: від зовнішнього `` до найбільш вкладеного).
```
## querySelector [#querySelector]
Виклик `elem.querySelector(css)` повертає перший елемент, що відповідає даному CSS-селектору.
-Іншими словами, результат такий самий, як і `elem.querySelectorAll(css)[0]`, але останній шукає *всі* елементи та вибирає один, а `elem.querySelector` просто шукає один. Тому його писати швидше і коротше.
+Іншими словами, результат такий самий, як і `elem.querySelectorAll(css)[0]`, але він спочатку знайде всі елементи, а потім візьме перший, тоді як `elem.querySelector` знайде лише перший та зупиниться. Цей метод не лише прискорює виконання, а й дозволяє скоротити кількість написаного коду.
## matches
Попередні методи виконували пошук по DOM.
-[elem.matches(css)](http://dom.spec.whatwg.org/#dom-element-matches) нічого не шукає, він просто перевіряє, чи відповідає `elem` заданому CSS-селектору. Він повертає `true` або `false`.
+Метод [elem.matches(css)](http://dom.spec.whatwg.org/#dom-element-matches) нічого не шукає, він просто перевіряє, чи відповідає `elem` заданому CSS-селектору. Він повертає `true` або `false`.
-Цей метод стає в пригоді, коли ми перебираємо елементи (наприклад, у масиві чи чомусь подібному) і намагаємося відфільтрувати ті, які нас цікавлять.
+Цей метод стає в нагоді, коли ми перебираємо елементи (наприклад, у масиві чи чомусь подібному) і намагаємося відфільтрувати ті, які нас цікавлять.
Наприклад:
@@ -144,7 +144,7 @@
Метод `elem.closest(css)` шукає найближчого предка, який відповідає CSS-селектору. Сам `elem` також включається в пошук.
-Іншими словами, метод `closest` підіймається від елемента і перевіряє кожного з батьків. Якщо він збігається з селектором, пошук припиняється, і повертається предок.
+Іншими словами, метод `closest` йде вгору від елемента і перевіряє кожного з батьківських елементів. Якщо він відповідає заданому селектору, пошук припиняється, і повертається знайдений предок.
Наприклад:
@@ -174,10 +174,10 @@
Сьогодні вони здебільшого історичні, оскільки `querySelector` є потужнішим і коротшим для написання.
-Тому тут ми розглянемо їх переважно для повноти, тоді як ви все ще можете знайти їх у старому коді.
+Тому тут ми розглянемо їх переважно для повноти, тоді як ви все ще можете знайти їх у старих скриптах.
-- `elem.getElementsByTagName(tag)` шукає елементи з заданим тегом і повертає їх колекцію. Параметр `tag` також може бути зірочкою `"*"` для "будь-яких тегів".
-- `elem.getElementsByClassName(className)` повертає елементи, які мають заданий CSS-клас.
+- `elem.getElementsByTagName(tag)` шукає елементи з заданим тегом і повертає колекцію цих елементів. Параметр `tag` також може бути зірочкою `"*"` для "будь-яких тегів".
+- `elem.getElementsByClassName(className)` повертає елементи, які мають вказаний CSS-клас.
- `document.getElementsByName(name)` повертає елементи з заданим атрибутом `name` для всього документа. Використовується дуже рідко.
Наприклад:
@@ -219,9 +219,9 @@ let divs = document.getElementsByTagName('div');
```
```warn header="Не забуваємо про літеру `\"s\"`!"
-Розробники початківці іноді забувають про літеру `"s"`. Тобто вони намагаються викликати `getElementByTagName` замість 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
pFad - Phonifier reborn
Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.
Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.
Alternative Proxies:
Alternative Proxy
pFad Proxy
pFad v3 Proxy
pFad v4 Proxy