18. diel - Tvorba elementov a hierarchie DOM v JavaScripte
V minulej lekcii, Manipulácia s DOM v JavaScripte, sme sa naučili pracovať s DOM a meniť tak obsah stránky.
V dnešnom tutoriáli 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 potomkovia sú všetky elementy, ktoré sú v ňom vnorené. Ako príklad si uvedieme hlavičku stránky pekárstva z lekcie Manipulácia s DOM v JavaScripte:
<header> <img id="logo" src="img/baker.svg" alt="Bakery logo"> <h1 id="greeting">Welcome to our bakery</h1> </header>
Elementy <img> a <h1> sú potomkovia
elementu <header>.
Výber všetkých potomkov
Zoznam všetkých potomkov elementu je obsiahnutý 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ákladnou jednotkou
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 NodeList vracia aj metóda
querySelectorAll(), ktorú už poznáme z lekcie Manipulácia s
DOM v JavaScripte
Samotný element je teda špecifický typ uzla. Je to objekt, ktorý priamo
zodpovedá značkám HTML tagov ako <div>,
<span>, <a> a tak ďalej.
Vypíšme všetkých potomkov našej hlavičky:
let headerElement = document.querySelector('header'); console.log(headerElement.childNodes);
V konzole sa nám zobrazí 5 prvkov:
Okrem elementov <img> a <h1> 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 nejakým spôsobom 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ý potomek.
Vlastnosti firstChild a lastChild nemusia nutne
obsahovať len fyzické elementy. Ako sme videli v príklade
vyššie, obe vlastnosti budú 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 potomek vnorený. Koreňový element
<html> je výnimkou, pretože je najvyšším prvkom v
hierarchii, a preto 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.
Ak 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 kým ho niekam do dokumentu nevložíme, neuvidíme ho.
Všeobecná syntax metódy je nasledovná:
let element = document.createElement(tagName);
Pri použití metódy createElement() nám tagName
symbolizuje reťazec, ktorý špecifikuje typ vytvoreného elementu, napríklad
div, span, img a tak ďalej.
Uveďme si príklad pre tvorbu nového elementu div, na ktorý
potom ďalej nadviažeme:
let paragraph = document.createElement("div");
Vkladanie vytvoreného elementu do DOM
Pre 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 jej však
predá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ý.
Ukažme si obe možnosti. Aby sme mohli využiť metódu
getElementById(), najprv v index.html poslednému
výskytu <p> na stránke pridáme id="info".
Potom do našej stránky pomocou skriptu pridáme odstavec s textom, ktorého
prvý riadok sme si už ukázali vyššie:
let paragraph = document.createElement("div"); paragraph.textContent = "Every day after 4 p.m. we provide a 50% discount on our entire assortment."; let parent = document.getElementById("info"); parent.appendChild(paragraph);
V prehliadači uvidíme doplnenú vetu po texte v elemente
<p>, ktorému sme dodávali id:
V tomto príklade sme najprv vytvorili nový element <div>
a nastavili sme jeho textový obsah. Potom sme vyhľadali v dokumente
existujúci element <p> podľa jeho id. Nakoniec
sme použili metódu appendChild(), aby sme odstavec vložili ako
posledného potomka.
Nový odstavec ale nechceme mať toľko na očiach, uvedieme ho len ako
doplnkovú informáciu dole na stránke. Zavoláme teda znovu metódu
appendChild(), ktorou teraz odstavec presunieme:
document.body.appendChild(paragraph);
Ako rodiča tentoraz používame document.body pre zápis na
koniec tela HTML dokumentu.
V prehliadači máme tento výsledok:
Vkladanie elementu pred iný element
Čas od času sa nám 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 prijme nový
element a v druhom parametri určíme element, pred ktorý sa nový
element vloží či presunie.
Poďme do našej stránky pomocou metódy insertBefore() pridať
nadpis <h2>, ktorý bude pred elementom
<div>. Predošlý kód doplníme nasledovne:
let heading = document.createElement("h2"); heading.textContent = "News:"; let element = document.getElementsByTagName("div"); document.body.insertBefore(heading, element[0]);
V príklade sme pre získanie elementu <div> pre
pripomenutie použili metódu getElementsByTagName(), ktorá
vyhľadá a vráti všetky elementy <div> v dokumente, ak je
ich viac. Preto v metóde insertBefore() zadávame, koľký výskyt
chceme. Tu potrebujeme prvý výskyt, teda uvedieme index s hodnotou
0.
V prehliadači uvidíme nový nadpis:
Keďže sa nám formátovanie h2 nadpisu do stránky úplne
graficky nehodí, priradíme mu ešte pomocou už známej metódy
setAtributes() triedu important:
let styledHeading = document.querySelector("h2"); styledHeading.setAttribute("class", "important");
Výsledok v prehliadači:
Nahrádzanie a mazanie potomkov
Potomka elementu môžeme tiež nahradiť. Náš príliš
výrazný nadpis h2 teraz v dokumente radšej nahradíme iným
tučným textom:
let newParagraph = document.createElement("p"); let strongElement = document.createElement("strong"); strongElement.textContent = "News from our bakery:"; newParagraph.appendChild(strongElement); document.body.replaceChild(newParagraph, heading);
Robí to metóda replaceChild(), ktorá ako prvý parameter
prijíma nového potomka a ako druhý parameter
pôvodného potomka. Pozrime sa na výsledok v
prehliadači:
Metóda replaceChild() vyžaduje, aby bol nahradzovaný uzol
skutočne priamym potomkom rodiča. Ak by teda náš nadpis nemal rodiča
document.body, ale bol vložený napríklad do elementu
<div>, metóda by vyvolala chybu.
Potomka elementu môžeme aj odstrániť, zmažme teda zvýraznený doplnený text:
newParagraph.removeChild(strongElement);
Mazanie vykonávame pomocou metódy removeChild(). Tú voláme
na referenciu rodiča a ako parameter jej zadáme potomka, ktorý má byť
zmazaný:
Archív s uvedenými príkladmi je opäť k dispozícii v prílohe.
V ďalšej lekcii, Editor tabuliek v JavaScripte, si vytvoríme editor, ktorý bude pracovať s HTML tabuľkou a umožní ju užívateľovi rozširovať a upravovať.
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é 3x (163.11 kB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript
