Kas yra DOM ir kodėl statome rankomis

1 pamokoje puslapis įrašė vieną sakinį. Dabar pradėsim statyti tikrą sąsają — rankomis.

Kai naršyklė perskaito HTML, ji sukuria DOM (Document Object Model) — puslapio medį iš objektų. Kiekvienas <article>, <img>, <h2> yra mazgas (node), į kurį JavaScript gali kreiptis ir kurį gali keisti. Tris pagrindinės operacijos:

• document.createElement('article') — sukuria naują elementą (dar neįdėtą į puslapį).
• element.textContent = '…' — įrašo tekstą į elementą.
• parent.appendChild(child) — įdeda elementą į medį.

Statyti kortelę taip yra daugžodiška: penkiems elementams — dešimt eilučių. Ir būtent tai yra esmė. Karkasai (Vue, React) šitą paslepia už šablonų — bet paslepia ir tai, kas iš tikrųjų vyksta. Čia tu matai kiekvieną sukurtą mazgą, kiekvieną priskyrimą. Kai 15+ pamokose grįšim prie tipų, o realiuose projektuose — prie karkasų, žinosi, ką jie daro už tave.

Yra ir saugumo pusė. Tekstą į elementą galima įrašyti dviem būdais:

• el.textContent = userText — įrašo kaip tekstą. Saugu.
• el.innerHTML = userText — įrašo kaip HTML. Jei userText ateina iš API ar vartotojo ir jame yra <script>, jis įvykdomas. Tai — XSS (cross-site scripting) spraga.

Šioje pamokoje pastatysim nuotraukos kortelę (nuotrauka, pavadinimas, data) su createElement ir textContent. Tai bus pamatas, kurį 3 pamokoje padarysim interaktyvų, o 5 — sudėsim į galeriją.