15. diel - Tvorba elementov a hierarchie DOM v JavaScripte
V dnešnom tutoriále základov JavaScriptu sa zameriame na hierarchiu elementov. Naučíme sa tiež vytvoriť nový element a vložiť ho do HTML stránky.
Hierarchia elementov
Element môže a nemusí mať potomkov. Jeho potomkami sú všetky elementy, ktoré sú v ňom vnorené. Ako príklad si uvedieme formulár:
Elementy <input> a <button> sú
potomkami elementu <form>.
Výber všetkých potomkov
Zoznam všetkých potomkov elementu je v jeho vlastnosti
childNodes. V skutočnosti ide o kolekciu NodeList,
ktorá je obdobou HTMLCollection, ale umožňuje navyše ukladanie
uzlov. Uzol (node) je základná jednotka
DOM, ktorá reprezentuje rôzne typy objektov. Do
zoznamu typu NodeList môžeme teda uložiť nielen
elementy, ale aj ich text,
atribút alebo HTML komentár.
Kolekciu childNodes vracia aj metóda
querySelectorAll(), ktorú už poznáme z minulosti.
Samotný element je teda špecifický typ uzla. Je to objekt, ktorý priamo
zodpovedá značkám HTML tagom ako <div>,
<span>, <a> a tak ďalej.
Vypíšme všetkých potomkov nášho formulára:
V konzole sa nám zobrazí päť prvkov:
Okrem elementov <input> a <button> tu
máme ešte tri textové uzly, ktoré reprezentujú odriadkovanie HTML
kódu.
Výber prvého alebo posledného potomka
Potomkovia sú samozrejme nejako radení, a to od najstaršieho po
najmladšieho čo do doby vloženia. Jednoducho povedané, sú v takom poradí,
v akom ich prehliadač načítal, teda zhora nadol. Vlastnosť
firstChild obsahuje prvého z nich. Vo vlastnosti
lastChild je naopak uložený posledný potomok.
Vlastnosti firstChild a lastChild nemusia nutne
obsahovať len fyzické elementy. Ako sme videli v príklade
vyššie budú obe vlastnosti obsahovať node textového reťazca.
Preto máme v JavaScripte k dispozícii ešte vlastnosti
firstElementChild a lastElementChild, ktoré nám
vrátia prvý a posledný HTML element.
Rodič elementu
V HTML štruktúre má každý element, okrem koreňového elementu
<html>, svojho rodiča. Takto nazývame
element, do ktorého je potomok vnorený. Koreňový element
<html> je výnimkou, pretože je najvyšším prvkom v
hierarchii a teda nemá žiadneho rodiča. Na identifikáciu rodiča slúži
vlastnosť parentElement. Táto vlastnosť nám poskytuje
priamy prístup k rodičovskému elementu.
Existuje aj podobná vlastnosť parentNode, ktorá opäť
zahŕňa aj ďalšie typy uzlov, napríklad textové uzly alebo komentáre. Pre
väčšinu bežných účelov je však vlastnosť parentElement
vhodnejšia a presnejšia.
Pokiaľ zavoláme túto vlastnosť na koreňový element
<html>, vráti nám hodnotu null, pretože nad
ním v hierarchii už žiadny element nie je.
Tvorba elementov
Nový element vytvoríme pomocou metódy createElement(). Táto
metóda prijíma ako parameter textový reťazec, v ktorom uvedieme tag
elementu, ktorý si prajeme vytvoriť. Metóda vráti nový element, s ktorým
môžeme akokoľvek pracovať. Tento element však zatiaľ nikde v
dokumente ešte nie je. Môžeme do neho vytvárať a vkladať ďalšie
elementy, ale pokiaľ ho niekam do dokumentu nevložíme, neuvidíme ho.
Existuje ešte variant, ktorý vytvorí element a odovzdá mu menný priestor,
metóda createElementNS().
Syntax uvedených metód je nasledovná:
Vkladanie vytvoreného elementu do DOM
Na vloženie nového elementu do iného elementu používame metódu
appendChild(). Táto metóda pridá nový element
ako posledného potomka cieľového elementu. Ak ju však
odovzdáme element, ktorý je už v DOM umiestnený, bude pomocou tejto metódy
iba presunutý. Nedôjde teda k jeho duplikácii a na pôvodnom mieste bude
tento element odstránený.
Ukážme si obe možnosti. Najprv do nášho formulára pridáme odsek s textom:
V tomto príklade sme najskôr vytvorili nový element <p>
a nastavili sme jeho textový obsah. Potom sme vyhľadali v dokumente
existujúci element <form> podľa jeho id.
Nakoniec sme použili metódu appendChild(), aby sme odsek vložili
ako posledného potomka do formulára.
Pretože ale chceme mať nový odsek až za formulárom, nie ako posledný
element formulára, zavoláme metódu appendChild() znova a
presunieme ho. Ako rodičia tentoraz použijeme document.body na
zápis na koniec tela HTML dokumentu. Celý kód vyzerá takto:
Vkladanie elementu pred iný element
Čas od času sa nám veľmi nehodí, keď nám metóda
appendChild() pridá element až ako posledný
prvok v rodičovi. V prípade, že chceme vložiť nový element
pred iný, využijeme metódu insertBefore(). Tá
ako prvý parameter príjme nový element av druhom parametri
určíme element, pred ktorý sa nový element vloží alebo presunie.
Poďme do našej stránky pomocou metódy insertBefore() pridať
nadpis, predošlý kód doplníme nasledovne:
V príklade sme na získanie elementu formulára na pripomenutie použili
metódu getElementsByTagName(), ktorá vyhľadá a vráti všetky
elementy <form> v dokumente, ak je ich viac. Preto v metóde
insertBefore() zadávame, že chceme vrátiť prvý uložený
formulár (s indexom 0).
Nahradzovanie a mazanie potomkov
Potomka elementu môžeme tiež nahradiť. Robí to metóda
replaceChild(), ktorá ako prvý parameter prijíma nového
potomka a ako druhý parameter pôvodného potomka.
Náš formulár teda teraz v dokumente nahradíme ďalším odsekom s tučným
textom:
Metóda replaceChild() vyžaduje, aby bol nahradzovaný uzol
skutočne potomkom rodiča. Ak by teda náš formulár form nemal
rodičov document.body, ale bol vložený napríklad do elementu
<div>, metóda by vyvolala chybu.
Potomka elementu môžeme odstrániť metódou removeChild().
Tú voláme na referenciu rodiča a ako parameter ju zadáme potomka, ktorý má
byť zmazaný. Zmažme teda zvýraznený text a nastavme ho priamo elementu
reprezentujúcemu daný odsek:
Archív s uvedenými príkladmi je opäť k dispozícii v prílohe.
Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.
Stiahnuť
Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami
Stiahnuté 85x (1.68 kB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript
