Lekce 17 - Tvorba elementů a hierarchie DOM v JavaScriptu
V minulé lekci, Manipulace s DOM v JavaScriptu, jsme se naučili pracovat s DOM a měnit tak obsah stránky.
V dnešním tutoriálu základů JavaScriptu se zaměříme na hierarchii elementů. Naučíme se také vytvořit nový element a vložit jej do HTML stránky.
Hierarchie elementů
Element může a nemusí mít potomky. Jeho potomky jsou všechny elementy, které jsou v něm vnořené. Jako příklad si uvedeme formulář:
<form id="feedback"> <input type="text" /> <button>Odeslat</button> </form>
Elementy <input>
a <button>
jsou
potomky elementu <form>
.
Výběr všech potomků
Seznam všech potomků elementu je obsažen v jeho vlastnosti
childNodes
. Ve skutečnosti jde o kolekci NodeList
,
která je obdobou HTMLCollection
, ale umožňuje navíc ukládání
uzlů. Uzel (node
) je základní jednotkou
DOM, která reprezentuje různé typy objektů. Do
seznamu typu NodeList
můžeme tedy uložit nejen
elementy, ale i jejich text,
atribut nebo HTML komentář.
Kolekci childNodes
vrací také metoda
querySelectorAll()
, kterou již známe z dřívějška.
Samotný element je tedy specifický typ uzlu. Je to objekt, který přímo
odpovídá značkám HTML tagů jako <div>
,
<span>
, <a>
a tak dále.
Vypišme všechny potomky našeho formuláře:
let form = document.querySelector('form'); console.log(form.childNodes);
V konzoli se nám zobrazí pět prvků:
Kromě elementů <input>
a <button>
zde
máme ještě tři textové uzly, které reprezentují odřádkování HTML
kódu.
Výběr prvního nebo posledního potomka
Potomci jsou samozřejmě nějak řazeni, a to od nejstaršího po
nejmladšího co do doby vložení. Jednoduše řečeno, jsou v takovém
pořadí, v jakém je prohlížeč načítal, tedy odshora dolů. Vlastnost
firstChild
obsahuje prvního z nich. Ve vlastnosti
lastChild
je naopak uložen poslední potomek.
Vlastnosti firstChild
a lastChild
nemusí nutně
obsahovat jen fyzické elementy. Jak jsme viděli v příkladu
výše, obě vlastnosti budou obsahovat node
textového řetězce.
Proto máme v JavaScriptu k dispozici ještě vlastnosti
firstElementChild
a lastElementChild
, které nám
vrátí první a poslední HTML element.
Rodič elementu
V HTML struktuře má každý element, kromě kořenového elementu
<html>
, svého rodiče. Takto nazýváme
element, do kterého je potomek vnořen. Kořenový element
<html>
je výjimkou, neboť je nejvyšším prvkem v
hierarchii, a tudíž nemá žádného rodiče. K identifikaci rodiče slouží
vlastnost parentElement
. Tato vlastnost nám poskytuje
přímý přístup k rodičovskému elementu.
Existuje i podobná vlastnost parentNode
, která opět zahrnuje
i další typy uzlů, například textové uzly nebo komentáře. Pro většinu
běžných účelů je však vlastnost parentElement
vhodnější a
přesnější.
Pokud zavoláme tuto vlastnost na kořenový element
<html>
, vrátí nám hodnotu null
, protože nad
ním v hierarchii již žádný element není.
Tvorba elementů
Nový element vytvoříme pomocí metody createElement()
. Tato
metoda přijímá jako parametr textový řetězec, v němž uvedeme tag
elementu, který si přejeme vytvořit. Metoda vrátí nový element, s nímž
můžeme jakkoliv pracovat. Tento element však zatím nikde v dokumentu
ještě není. Můžeme do něj vytvářet a vkládat další elementy,
ale dokud jej někam do dokumentu nevložíme, neuvidíme jej. Existuje ještě
varianta, která element vytvoří a předá mu jmenný prostor, a sice metoda
createElementNS()
.
Syntaxe uvedených metod je následující:
let span = document.createElement("span"); let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
Vkládání vytvořeného elementu do DOM
Pro vložení nového elementu do jiného elementu používáme metodu
appendChild()
. Tato metoda přidá nový element
jako posledního potomka cílového elementu. Jestliže ji
však předáme element, který je již v DOM umístěn, bude pomocí této
metody pouze přesunut. Nedojde tedy k jeho duplikaci a na původním místě
bude tento element odstraněn.
Ukažme si obě možnosti. Nejprve do našeho formuláře přidáme odstavec s textem:
let paragraph = document.createElement("p"); paragraph.textContent = "Toto je text ve vytvořeném odstavci."; let parent = document.getElementById("feedback"); parent.appendChild(paragraph);
V tomto příkladu jsme nejprve vytvořili nový element
<p>
a nastavili jsme jeho textový obsah. Poté jsme
vyhledali v dokumentu existující element <form>
podle jeho
id
. Nakonec jsme použili metodu appendChild()
,
abychom odstavec vložili jako posledního potomka do formuláře.
Protože ale chceme mít nový odstavec až za formulářem, nikoliv jako
poslední element formuláře, zavoláme metodu appendChild()
znovu
a odstavec přesuneme. Jako rodiče tentokrát použijeme
document.body
pro zápis na konec těla HTML dokumentu. Celý kód
vypadá takto:
let paragraph = document.createElement("p"); paragraph.textContent = "Toto je text ve vytvořeném odstavci."; let parent = document.getElementById("feedback"); parent.appendChild(paragraph); document.body.appendChild(paragraph);
Vkládání elementu před jiný element
Čas od času se nám moc nehodí, když nám metoda
appendChild()
přidá element až jako poslední
prvek v rodiči. V případě, že chceme vložit nový element
před jiný, využijeme metodu insertBefore()
. Ta
jako první parametr přijme nový element a ve druhém
parametru určíme element, před který se nový element vloží či
přesune.
Pojďme do naší stránky pomocí metody insertBefore()
přidat
nadpis, předešlý kód doplníme následovně:
let heading = document.createElement("h1"); heading.textContent = "Nový nadpis"; let element = document.getElementsByTagName("form"); document.body.insertBefore(heading, element[0]);
V příkladu jsme pro získání elementu formuláře pro připomenutí
použili metodu getElementsByTagName()
, která vyhledá a vrátí
všechny elementy <form>
v dokumentu, pokud je jich více.
Proto v metodě insertBefore()
zadáváme, že chceme vrátit
první uložený formulář (s indexem 0
).
Nahrazování a mazání potomků
Potomka elementu můžeme také nahradit. Dělá to metoda
replaceChild()
, která jako první parametr přijímá
nového potomka a jako druhý parametr původního
potomka. Náš formulář tedy nyní v dokumentu nahradíme dalším
odstavcem s tučným textem:
let newParagraph = document.createElement("p"); let strongElement = document.createElement("strong"); strongElement.textContent = "Zde byl formulář."; newParagraph.appendChild(strongElement); document.body.replaceChild(newParagraph, form);
Metoda replaceChild()
vyžaduje, aby byl nahrazovaný uzel
skutečně potomkem rodiče. Pokud by tedy náš formulář form
neměl rodiče document.body
, ale byl vložený například do
elementu <div>
, metoda by vyvolala chybu.
Potomka elementu můžeme odstranit metodou removeChild()
. Tu
voláme na referenci rodiče a jako parametr jí zadáme potomka, který má
být smazán. Smažme tedy zvýrazněný text a nastavme jej přímo elementu
reprezentujícímu daný odstavec:
newParagraph.removeChild(strongElement); newParagraph.textContent = "Zde byl formulář.";
Archiv s uvedenými příklady je opět k dispozici v příloze.
V další lekci, Editor tabulek v JavaScriptu, si vytvoříme editor, který bude pracovat s HTML tabulkou a umožní ji uživateli rozšiřovat a upravovat.
Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.
Stáhnout
Stažením následujícího souboru souhlasíš s licenčními podmínkami
Staženo 87x (1.68 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript