You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 2-ui/1-document/07-modifying-document/article.md
+9-9
Original file line number
Diff line number
Diff line change
@@ -1,8 +1,8 @@
1
1
# Внесення змін в документ
2
2
3
-
Модифікації DOM є ключем до створення «живих» сторінок.
3
+
Модифікації DOM є ключем до створення "живих" сторінок.
4
4
5
-
Тут ми побачимо, як створювати нові елементи «на льоту» та змінювати ті, що вже існують.
5
+
Тут ми побачимо, як створювати нові елементи "на льоту" та змінювати ті, що вже існують.
6
6
7
7
## Приклад: показати повідомлення
8
8
@@ -192,7 +192,7 @@ after
192
192
-`"beforeend"` -- вставити `html` в `elem`, в кінці,
193
193
-`"afterend"` -- вставити `html` безпосередньо після `elem`.
194
194
195
-
Другим параметром є рядок HTML, який вставляється «як HTML».
195
+
Другим параметром є рядок HTML, який вставляється "як HTML".
196
196
197
197
Наприклад:
198
198
@@ -225,7 +225,7 @@ after
225
225
-`elem.insertAdjacentText(куди, текст)` -- синтаксис той самий, але рядок тексту вставляється «як текст» замість HTML
226
226
-`elem.insertAdjacentElement(куди, текст)` -- синтаксис той самий, але вставляється елемент
227
227
228
-
Наведені методи існують для того, щоб синтаксис залишався «однорідним». На практиці найчастіше використовується `insertAdjacentHTML`. Тому що для вставки елементів та тексту є методи `append/prepend/before/after` -- вони коротші для написання і так само вміють вставляти вузли чи фрагменти тексту.
228
+
Наведені методи існують для того, щоб синтаксис залишався "однорідним". На практиці найчастіше використовується `insertAdjacentHTML`. Тому що для вставки елементів та тексту є методи `append/prepend/before/after` -- вони коротші для написання і так само вміють вставляти вузли чи фрагменти тексту.
229
229
230
230
Отже, ось альтернативний варіант показу повідомлення:
`DocumentFragment` рідко використовується явно. Навіщо додавати до вузла особливого типу, якщо натомість можна повернути масив вузлів? Переписаний приклад:
371
+
`DocumentFragment` рідко використовується явно. Навіщо додавати до вузла особливого типу, якщо натомість можна повернути масив вузлів? Переписаний приклад:
Виклик `document.write(html)` записує `html` на сторінку «прямо тут і зараз». Рядок `html` може бути згенерований динамічно, тож метод дещо гнучкий. За допомогою JavaScript ми можемо створити повноцінну вебсторінку та записати її в документ.
492
+
Виклик `document.write(html)` записує `html` на сторінку "прямо тут і зараз". Рядок `html` може бути згенерований динамічно, тож метод досить гнучкий. За допомогою JavaScript ми можемо створити повноцінну вебсторінку та записати її вміст в документ.
493
493
494
494
Метод прийшов з тих часів коли не було ні DOM, ні стандартів... Справді давні часи. Метод досі живий, тому що є скрипти, в яких він використовується.
Окрім того, є і перевага. Технічно, коли `document.write` викликається поки браузер читає («розбирає») вхідний HTML і щось записує в документ, то браузер сприймає його так, наче він з самого початку був там, в HTML-документі.
519
+
Окрім того, є і перевага. Технічно, коли `document.write` викликається поки браузер читає ("розбирає") вхідний HTML і щось записує в документ, то браузер сприймає його так, наче він з самого початку був там, в HTML-документі.
520
520
521
521
Тому він працює надзвичайно швидко, адже не відбувається *жодних DOM-модифікацій*. Він записує безпосередньо в текст сторінки, поки DOM ще не сформований.
0 commit comments