JS - DOM manipulácia 1

Zhrnutie prednášky

Prednáška úvodom predstavuje cieľ vytvoriť jednoduchú stránku, ktorá po kliknutí na tlačidlo spočíta zadané čísla, a na tomto príklade vysvetľuje Document Object Model (DOM) ako hierarchickú stromovú štruktúru elementov (html, head, body a ich potomkovia). Cez konzolu prehliadača ukazuje prístup k objektu document, jeho vlastnostiam (location, href, children, body) a prácu s hodnotami ako s reťazcami (split). Ďalej demonštruje zmenu obsahu stránky cez innerText a pridávanie obsahu pomocou append. Hlavná časť ukazuje, ako JavaScript vytvorí nový element cez createElement, nastaví mu triedy cez classList, id a text, a pripojí ho na stránku metódou appendChild. Nakoniec ukazuje odstraňovanie tried a id a poznamenáva, že možno vytvárať aj iné elementy, napríklad nadpis h1 alebo input.

• - DOM je hierarchická stromová štruktúra elementov stránky, kde html obsahuje head a body.
• - Objekt document sprístupňuje stránku v JavaScripte a jeho vlastnosti (location, href, children, body) možno skúmať v konzole.
• - document.children vracia HTML kolekciu, ktorá sa podobá na pole, ale nie je to pole.
• - Vlastnosť innerText mení obsah elementu; prepísanie body.innerText odstráni celý obsah stránky.
• - document.createElement('div') vytvorí element, ktorý je však vo vnútri premennej, kým ho nepripojíme na stránku.
• - Vlastnosti elementu sa nastavujú cez classList.add/remove, id a innerText alebo innerHTML.
• - Metóda appendChild (alebo append) pridá vytvorený element na koniec body; vytvárať možno aj iné elementy, napr. h1 či input.

Zhrnutie pripravené s pomocou AI z prepisu videa.