Урок 08 · 12 хв
DOM: знайти й змінити
Сторінка — це дерево елементів. JS уміє його читати й змінювати.
Браузер розбирає HTML у дерево об'єктів — DOM. JavaScript уміє це дерево читати й змінювати: знайти вузол, замінити текст, додати клас, вставити новий елемент. Починається все з пошуку.
querySelector приймає такий самий селектор, як CSS, і повертає перший елемент, що збігся. querySelectorAll повертає всі збіги — це NodeList, по ньому можна пройти через for..of або перетворити на масив: [...rows].
textContent працює з текстом і не розбирає його як розмітку. innerHTML вставляє HTML — і якщо туди потрапить те, що ввів користувач, на сторінці виконається чужий код. Правило: за замовчуванням textContent, innerHTML — лише для розмітки, яку зібрав ти сам.
Класи й атрибути
Створити й вставити
Порядок такий: створити, налаштувати, вставити. Доки елемент не в дереві, на сторінці його немає, але налаштовувати вже можна — і це дешевше, ніж чіпати вставлений. Для довгого списку збери елементи в масив і встав одним викликом list.append(...items).
- MDN · querySelector — пошук за CSS-селектором
- MDN · querySelectorAll — NodeList з усіма збігами
- MDN · textContent — текст без розбору розмітки
- MDN · classList — add, remove, toggle, contains
Перевірка
Закріпи, поки не пішов далі
1. Що поверне
querySelector, якщо збігів немає?2. Куди безпечно класти текст, введений користувачем?
3. Що повертає
classList.toggle("is-open")?4. У якому порядку додавати елемент на сторінку?