diff --git a/2-ui/1-document/04-searching-elements-dom/1-find-elements/solution.md b/2-ui/1-document/04-searching-elements-dom/1-find-elements/solution.md index c73aecd99..7fdacc950 100644 --- a/2-ui/1-document/04-searching-elements-dom/1-find-elements/solution.md +++ b/2-ui/1-document/04-searching-elements-dom/1-find-elements/solution.md @@ -1,35 +1,35 @@ -There are many ways to do it. +Є багато способів зробити це. -Here are some of them: +Ось деякі з них: ```js -// 1. The table with `id="age-table"`. +// 1. Таблиця з `id="age-table"`. let table = document.getElementById('age-table') -// 2. All label elements inside that table +// 2. Всі елементи label всередині цієї таблиці table.getElementsByTagName('label') -// or +// або document.querySelectorAll('#age-table label') -// 3. The first td in that table (with the word "Age") +// 3. Перший td в цій таблиці (зі словом "Age") table.rows[0].cells[0] -// or +// або table.getElementsByTagName('td')[0] -// or +// або table.querySelector('td') -// 4. The form with the name "search" -// assuming there's only one element with name="search" in the document +// 4. форма з іменем "search" +// припускаємо, що в документі є лише один елемент з name="search". let form = document.getElementsByName('search')[0] -// or, form specifically +// або безпосередньо форма document.querySelector('form[name="search"]') -// 5. The first input in that form. +// 5. Перший input у цій формі. form.getElementsByTagName('input')[0] -// or +// або form.querySelector('input') -// 6. The last input in that form -let inputs = form.querySelectorAll('input') // find all inputs -inputs[inputs.length-1] // take the last one +// 6. Останній input у цій формі +let inputs = form.querySelectorAll('input') // знайти всі input +inputs[inputs.length-1] // взяти останній ``` diff --git a/2-ui/1-document/04-searching-elements-dom/1-find-elements/task.md b/2-ui/1-document/04-searching-elements-dom/1-find-elements/task.md index f0b54beac..9b88ecbc0 100644 --- a/2-ui/1-document/04-searching-elements-dom/1-find-elements/task.md +++ b/2-ui/1-document/04-searching-elements-dom/1-find-elements/task.md @@ -2,17 +2,17 @@ importance: 4 --- -# Search for elements +# Пошук елементів -Here's the document with the table and form. +Ось документ із таблицею та формою. -How to find?... +Як знайти?... -1. The table with `id="age-table"`. -2. All `label` elements inside that table (there should be 3 of them). -3. The first `td` in that table (with the word "Age"). -4. The `form` with `name="search"`. -5. The first `input` in that form. -6. The last `input` in that form. +1. Таблиця з `id="age-table"`. +2. Усі елементи `label` всередині цієї таблиці (їх має бути 3). +3. Перший `td` у цій таблиці (зі словом "Age"). +4. `form` з `name="search"`. +5. Перший `input` у цій формі. +6. Останній `input` у цій формі. -Open the page [table.html](table.html) in a separate window and make use of browser tools for that. +Відкрийте сторінку [table.html](table.html) в окремому вікні та скористайтеся для цього інструментами браузера. 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 5af6435ce..133951bd3 100644 --- a/2-ui/1-document/04-searching-elements-dom/article.md +++ b/2-ui/1-document/04-searching-elements-dom/article.md @@ -1,93 +1,93 @@ -# Searching: getElement*, querySelector* +# Пошук: getElement*, querySelector* -DOM navigation properties are great when elements are close to each other. What if they are not? How to get an arbitrary element of the page? +Властивості навігації по DOM чудові, коли елементи розташовані близько один до одного. А якщо ні? Як отримати довільний елемент сторінки? -There are additional searching methods for that. +Для цього існують додаткові методи пошуку. -## document.getElementById or just id +## document.getElementById або просто id -If an element has the `id` attribute, we can get the element using the method `document.getElementById(id)`, no matter where it is. +Якщо елемент має атрибут `id`, ми можемо отримати його за допомогою методу `document.getElementById(id)`, незалежно від того, де він знаходиться. -For instance: +Наприклад: ```html run
-
Element
+
Елемент
``` -Also, there's a global variable named by `id` that references the element: +Крім того, існує глобальна змінна з назвою `id`, яка посилається на елемент: ```html run
-
Element
+
Елемент
``` -...That's unless we declare a JavaScript variable with the same name, then it takes precedence: +...Але це лише якщо ми не оголошуємо змінну JavaScript з тим самим ім’ям, інакше вона матиме пріоритет: ```html run untrusted height=0
``` -```warn header="Please don't use id-named global variables to access elements" -This behavior is described [in the specification](http://www.whatwg.org/specs/web-apps/current-work/#dom-window-nameditem), so it's kind of standard. But it is supported mainly for compatibility. +```warn header="Будь ласка, не використовуйте id-іменовані глобальні змінні для доступу до елементів" +Ця поведінка описана [у специфікації](http://www.whatwg.org/specs/web-apps/current-work/#dom-window-nameditem), тож це свого роду стандарт. Але він підтримується в основному для сумісності. -The browser tries to help us by mixing namespaces of JS and DOM. That's fine for simple scripts, inlined into HTML, but generally isn't a good thing. There may be naming conflicts. Also, when one reads JS code and doesn't have HTML in view, it's not obvious where the variable comes from. +Браузер намагається нам допомогти, змішуючи простори імен JS і DOM. Це добре для простих сценаріїв, вбудованих у HTML, але загалом це не дуже добре. Можуть виникнути конфлікти імен. Крім того, коли хтось читає JS-код і не бачить HTML, незрозуміло, звідки приходить змінна. -Here in the tutorial we use `id` to directly reference an element for brevity, when it's obvious where the element comes from. +Тут у підручнику ми використовуємо `id` для прямого посилання на елемент для стислості, коли очевидно, звідки цей елемент походить. -In real life `document.getElementById` is the preferred method. +У реальному житті краще надавати перевагу `document.getElementById`. ``` -```smart header="The `id` must be unique" -The `id` must be unique. There can be only one element in the document with the given `id`. +```smart header="`id` має бути унікальним" +`id` має бути унікальним. У документі може бути лише один елемент із заданим `id`. -If there are multiple elements with the same `id`, then the behavior of methods that use it is unpredictable, e.g. `document.getElementById` may return any of such elements at random. So please stick to the rule and keep `id` unique. +Якщо є кілька елементів з однаковим `id`, то поведінка методів, які його використовують, буде непередбачуваною, наприклад. `document.getElementById` може повертати будь-який з таких елементів випадковим чином. Тому, будь ласка, дотримуйтеся правила та залишайте `id` унікальним. ``` -```warn header="Only `document.getElementById`, not `anyElem.getElementById`" -The method `getElementById` can be called only on `document` object. It looks for the given `id` in the whole document. +```warn header="Лише `document.getElementById`, а не `anyElem.getElementById`" +Метод `getElementById` можна викликати лише для об’єкта `document`. Він шукає вказаний `id` у всьому документі. ``` ## querySelectorAll [#querySelectorAll] -By far, the most versatile method, `elem.querySelectorAll(css)` returns all elements inside `elem` matching the given CSS selector. +До сьогодні найуніверсальніший метод -- це `elem.querySelectorAll(css)`, він повертає всі елементи всередині `elem`, що відповідають заданому CSS-селектору. -Here we look for all `
  • ` elements that are last children: +Тут ми шукаємо всі елементи `
  • `, які є останніми дочірніми: ```html run ``` -This method is indeed powerful, because any CSS selector can be used. +Цей метод дійсно потужний, оскільки можна використовувати будь-який CSS-селектор. -```smart header="Can use pseudo-classes as well" -Pseudo-classes in the CSS selector like `:hover` and `:active` are also supported. For instance, `document.querySelectorAll(':hover')` will return the collection with elements that the pointer is over now (in nesting order: from the outermost `` to the most nested one). +```smart header="Також можна використовувати псевдокласи" +Псевдокласи в CSS-селекторі, такі як `:hover` і `:active`, також підтримуються. Наприклад, `document.querySelectorAll(':hover')` поверне колекцію елементів, що знаходяться під курсором миші (у порядку вкладення: від крайнього `` до найбільш вкладеного). ``` ## querySelector [#querySelector] -The call to `elem.querySelector(css)` returns the first element for the given CSS selector. +Виклик `elem.querySelector(css)` повертає перший елемент, що відповідає даному CSS-селектору. -In other words, the result is the same as `elem.querySelectorAll(css)[0]`, but the latter is looking for *all* elements and picking one, while `elem.querySelector` just looks for one. So it's faster and also shorter to write. +Іншими словами, результат такий самий, як і `elem.querySelectorAll(css)[0]`, але останній шукає *всі* елементи та вибирає один, а `elem.querySelector` просто шукає один. Тому його писати швидше і коротше. ## matches -Previous methods were searching the DOM. +Попередні методи виконували пошук по DOM. -The [elem.matches(css)](http://dom.spec.whatwg.org/#dom-element-matches) does not look for anything, it merely checks if `elem` matches the given CSS-selector. It returns `true` or `false`. +[elem.matches(css)](http://dom.spec.whatwg.org/#dom-element-matches) нічого не шукає, він просто перевіряє, чи відповідає `elem` заданому CSS-селектору. Він повертає `true` або `false`. -The method comes in handy when we are iterating over elements (like in an array or something) and trying to filter out those that interest us. +Цей метод стає в пригоді, коли ми перебираємо елементи (наприклад, у масиві чи чомусь подібному) і намагаємося відфільтрувати ті, які нас цікавлять. -For instance: +Наприклад: ```html run ... ... @@ -140,21 +140,21 @@ For instance: ## closest -*Ancestors* of an element are: parent, the parent of parent, its parent and so on. The ancestors together form the chain of parents from the element to the top. +*Предками* елемента є: батько, батько батька, його батько і так далі. Предки разом утворюють ланцюг батьків від елемента до вершини. -The method `elem.closest(css)` looks for the nearest ancestor that matches the CSS-selector. The `elem` itself is also included in the search. +Метод `elem.closest(css)` шукає найближчого предка, який відповідає CSS-селектору. Сам `elem` також включається в пошук. -In other words, the method `closest` goes up from the element and checks each of parents. If it matches the selector, then the search stops, and the ancestor is returned. +Іншими словами, метод `closest` підіймається від елемента і перевіряє кожного з батьків. Якщо він збігається з селектором, пошук припиняється, і повертається предок. -For instance: +Наприклад: ```html run -

    Contents

    +

    Зміст

    @@ -164,44 +164,44 @@ For instance: alert(chapter.closest('.book')); // UL alert(chapter.closest('.contents')); // DIV - alert(chapter.closest('h1')); // null (because h1 is not an ancestor) + alert(chapter.closest('h1')); // null (тому що h1 -- не предок) ``` ## getElementsBy* -There are also other methods to look for nodes by a tag, class, etc. +Існують також інші методи пошуку елементів за тегом, класом тощо. -Today, they are mostly history, as `querySelector` is more powerful and shorter to write. +Сьогодні вони здебільшого історичні, оскільки `querySelector` є потужнішим і коротшим для написання. -So here we cover them mainly for completeness, while you can still find them in the old scripts. +Тому тут ми розглянемо їх переважно для повноти, тоді як ви все ще можете знайти їх у старому коді. -- `elem.getElementsByTagName(tag)` looks for elements with the given tag and returns the collection of them. The `tag` parameter can also be a star `"*"` for "any tags". -- `elem.getElementsByClassName(className)` returns elements that have the given CSS class. -- `document.getElementsByName(name)` returns elements with the given `name` attribute, document-wide. Very rarely used. +- `elem.getElementsByTagName(tag)` шукає елементи з заданим тегом і повертає їх колекцію. Параметр `tag` також може бути зірочкою `"*"` для "будь-яких тегів". +- `elem.getElementsByClassName(className)` повертає елементи, які мають заданий CSS-клас. +- `document.getElementsByName(name)` повертає елементи з заданим атрибутом `name` для всього документа. Використовується дуже рідко. -For instance: +Наприклад: ```js -// get all divs in the document +// отримує всі елементи div у документі let divs = document.getElementsByTagName('div'); ``` -Let's find all `input` tags inside the table: +Знайдімо всі теги `input` в таблиці: ```html run height=50 - + @@ -218,66 +218,66 @@ Let's find all `input` tags inside the table: ``` -```warn header="Don't forget the `\"s\"` letter!" -Novice developers sometimes forget the letter `"s"`. That is, they try to call `getElementByTagName` instead of getElementsByTagName. +```warn header="Не забуваємо про літеру `\"s\"`!" +Розробники початківці іноді забувають про літеру `"s"`. Тобто вони намагаються викликати `getElementByTagName` замість getElementsByTagName. -The `"s"` letter is absent in `getElementById`, because it returns a single element. But `getElementsByTagName` returns a collection of elements, so there's `"s"` inside. +Літера `"s"` відсутня в `getElementById`, оскільки повертає один елемент. Але `getElementsByTagName` повертає колекцію елементів, тому всередині є `"s"`. ``` -````warn header="It returns a collection, not an element!" -Another widespread novice mistake is to write: +````warn header="Повертає колекцію, а не елемент!" +Іншою поширеною помилкою новачків є ось таке написання: ```js -// doesn't work +// не працює document.getElementsByTagName('input').value = 5; ``` -That won't work, because it takes a *collection* of inputs and assigns the value to it rather than to elements inside it. +Це не спрацює, тому що код приймає *колекцію* вхідних даних і призначає значення їй, а не елементам всередині неї. -We should either iterate over the collection or get an element by its index, and then assign, like this: +Ми повинні або перебрати колекцію, або отримати елемент за його індексом, а потім призначити, як тут: ```js -// should work (if there's an input) +// має працювати (якщо є input) document.getElementsByTagName('input')[0].value = 5; ``` ```` -Looking for `.article` elements: +Шукаємо елементи `.article`: ```html run height=50 -
    Article
    -
    Long article
    +
    Стаття
    +
    Довга стаття
    ``` -## Live collections +## Живі колекції -All methods `"getElementsBy*"` return a *live* collection. Such collections always reflect the current state of the document and "auto-update" when it changes. +Усі методи `"getElementsBy*"` повертають *живу* колекцію. Такі колекції завжди відображають поточний стан документа і "автооновлюються" при його зміні. -In the example below, there are two scripts. +У нижченаведеному прикладі є два скрипта. -1. The first one creates a reference to the collection of `
    `. As of now, its length is `1`. -2. The second scripts runs after the browser meets one more `
    `, so its length is `2`. +1. Перший створює посилання на колекцію `
    `. На даний момент його довжина дорівнює `1`. +2. Другий скрипт запускається після того, як браузер зустріне ще один `
    `, тому його довжина дорівнює `2`. ```html run -
    First div
    +
    Перший div
    -
    Second div
    +
    Другий div
    ``` -In contrast, `querySelectorAll` returns a *static* collection. It's like a fixed array of elements. +На відміну від цього, `querySelectorAll` повертає *статичну* колекцію. Це схоже на фіксований масив елементів. -If we use it instead, then both scripts output `1`: +Якщо ми використаємо його у вищенаведеному прикладі, тоді обидва сценарії виведуть `1`: ```html run -
    First div
    +
    Перший div
    -
    Second div
    +
    Другий div
    ``` -Now we can easily see the difference. The static collection did not increase after the appearance of a new `div` in the document. +Тепер ми легко бачимо різницю. Статична колекція не збільшилася після появи нового `div` у документі. -## Summary +## Підсумки -There are 6 main methods to search for nodes in DOM: +Існує 6 основних методів пошуку елементів у DOM:
    Your age:Ваш вік:
    - - - - + + + + - + - + @@ -344,31 +344,31 @@ There are 6 main methods to search for nodes in DOM: - + - + - +
    MethodSearches by...Can call on an element?Live?МетодШукає, використовуючи...Чи може викликатися на елементі?Чи повертає живу колекцію?
    querySelectorCSS-selectorCSS-селектор ✔ -
    querySelectorAllCSS-selectorCSS-селектор ✔ -
    getElementsByNamenameім’я - ✔
    getElementsByTagNametag or '*'тег або '*' ✔ ✔
    getElementsByClassNameclassклас ✔ ✔
    -By far the most used are `querySelector` and `querySelectorAll`, but `getElement(s)By*` can be sporadically helpful or found in the old scripts. +Найчастіше використовуються `querySelector` і `querySelectorAll`, але `getElement(s)By*` може бути корисним час від часу або знаходитися в старому коді. -Besides that: +Крім того: -- There is `elem.matches(css)` to check if `elem` matches the given CSS selector. -- There is `elem.closest(css)` to look for the nearest ancestor that matches the given CSS-selector. The `elem` itself is also checked. +- `elem.matches(css)` існує для того, щоб перевірити, чи відповідає `elem` заданому CSS-селектору. +- `elem.closest(css)` існує для того, щоб шукати найближчого предка, який відповідає заданому CSS-селектору. Сам `elem` також перевіряється. -And let's mention one more method here to check for the child-parent relationship, as it's sometimes useful: -- `elemA.contains(elemB)` returns true if `elemB` is inside `elemA` (a descendant of `elemA`) or when `elemA==elemB`. +І згадаймо тут ще один метод перевірки взаємовідносин нащадок-предок, оскільки він іноді стає в нагоді: +- `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