Модуль 10 · Урок 37
DOM selection, traversal і safe rendering
DOM — live object model parsed document, а не HTML string. Надійна view boundary має scoped selectors, явну null policy, node creation через DOM APIs і textContent для untrusted text.
Source, DOM і render
Browser parse створює nodes; JavaScript читає/змінює DOM, після чого style/layout/paint можуть оновити screen. querySelector повертає перший match або null, querySelectorAll — static NodeList. Selector краще scope до стабільного root.
const list = document.querySelector('#book-list');
if (!list) throw new Error('Book list is required');Safe node construction
const item = document.createElement('li');
const label = document.createElement('span');
label.textContent = book.title;
item.append(label);Text із data не вставляйте як HTML string: textContent зберігає його текстом. Attributes/properties задавайте за allowlisted contract. Оновлюйте мінімальну known container, зберігайте semantics, focus і empty state.
Практика
Заповніть DOM inventory, selector/null matrix і safe-render worksheet. Перевірте missing root, empty list, long text і string зі знаком < — він має лишитися текстом.
Офіційні джерела
Закріпіть матеріал уроку
Три сценарні питання. Для зарахування уроку потрібно дати щонайменше дві правильні відповіді.