Lekce 20 - Tvorba elementů a hierarchie DOM v JavaScriptu
V minulé lekci, Editace obsahu DOM v JavaScriptu, jsme se naučili jak manipulovat s obsahem elementů v DOM pomocí vlastností, které nám umožňují číst i měnit obsah elementů.
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. Budeme pokračovat s naší stránkou pekařství z minulých lekcí.
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 seznam
<ul> s aktuální nabídkou:
<ul> <li>Čerstvý chléb</li> <li>Pečivo</li> <li>Koláče</li> <li>Moučníky</li> <li>Dorty</li> </ul>
Elementy <li> jsou potomky elementu
<ul>.
Výběr všech potomků
Vypišme všechny potomky našeho seznamu. Seznam všech potomků elementu je
obsažen v jeho vlastnosti childNodes:
const ulElementy = document.querySelector('ul'); console.log(ulElementy.childNodes);
V konzoli se nám zobrazí 11 prvků.
Kromě elementů <li> zde máme ještě textové uzly,
které reprezentují odřádkování HTML kódu.
ChildNodes je ve skutečnosti kolekce 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 NodeList vrací také metoda
querySelectorAll(), kterou již známe z lekce Výběr
elementů pomocí DOM v JavaScriptu.
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.
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.
Obecná syntaxe je:
const novyElement = document.createElement(retezecTypuElementu);
Parametr ve formě řetězce specifikuje typ vytvořeného elementu,
například "<p>", "div", "span",
"img" a tak dále.
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ému elementu. Pokud 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.
Do seznamu s produkty pomocí scriptu přidáme další položku
<li> s textem "Cukroví". Prvně seznamu v HTML souboru
přidáme ID, abychom jej mohli snadno vybrat:
<ul id="produkty">
V souboru dom.js doplníme tento kód:
const novaPolozka = document.createElement("li"); novaPolozka.textContent = "Cukroví"; const rodic = document.getElementById("produkty"); rodic.appendChild(novaPolozka);
V prohlížeči uvidíme doplněnou položku na posledním místě v seznamu produktů:
V tomto příkladu jsme nejprve vytvořili nový element
<li> a nastavili jsme jeho textový obsah. Poté jsme
vyhledali v dokumentu existující element <ul> podle jeho
ID. Nakonec jsme použili metodu appendChild(), abychom položku
vložili jako posledního potomka.
Vkládání elementu před jiný element
Čas od času se nám nehodí, přidávat element až jako poslední
prvek v rodiči, tak jak to dělá metoda appendChild(). V
případě, že chceme vložit nový element před jiný,
využijeme metodu insertBefore(). Tato metoda 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
položku Bezlepkové, která bude před druhým elementem
<li>. Předešlý kód doplníme následovně:
const dalsiPolozka = document.createElement("li"); dalsiPolozka.textContent = "Bezlepkové"; const polozky = rodic.getElementsByTagName("li"); rodic.insertBefore(dalsiPolozka, polozky[1]);
V příkladu jsme pro získání elementu <li> pro
připomenutí použili metodu getElementsByTagName(), která
vyhledá a vrátí všechny elementy <li>, které jsou
potomky daného elementu, v našem případě seznamu. V metodě
insertBefore() zadáváme jako druhý parametr
elements[1], což je druhá položka seznamu. Tím určujeme, že
nově vytvořený prvek bude vložen před tuto položku, tedy na druhou pozici
v seznamu.
Jelikož chceme zvýraznit, že máme bezlepkové pečivo, přiřadíme nové
položce ještě pomocí již známé metody setAtributes() třídu
important:
dalsiPolozka.setAttribute("class", "important");
Výsledek v prohlížeči:
Nahrazování potomků
Potomka elementu můžeme také nahradit. Nejdřív si
vytvořme nový element typu <p> s textem, že máme
vyprodáno, a pak ním nahradíme celý seznam produktů:
const novyOdstavec = document.createElement("p"); novyOdstavec.textContent = "Máme vyprodáno!"; document.body.replaceChild(novyOdstavec, rodic);
Dělá to metoda replaceChild(), která jako první parametr
přijímá nového potomka a jako druhý parametr
původního potomka. Podívejme se na výsledek v
prohlížeči:
Metoda replaceChild() vyžaduje, aby byl
nahrazovaný uzel skutečně přímým potomkem rodiče. Pokud by tedy náš
seznam neměl rodiče document.body, ale byl vložený například
do elementu <div>, bylo by třeba volat metodu na tomto divu
a ne na document.body.
Odstranění elementů
Potomka elementu můžeme i odstranit, smažme tedy zprávu o vyprodání:
document.body.removeChild(novyOdstavec);
Mazání provádíme pomocí metody removeChild(). Tu voláme na
referenci rodiče a jako parametr jí zadáme potomka, který má být smazán.
Tady je výsledek:
V následujícím kvízu, Kvíz - Manipulace s DOM v JavaScriptu, si vyzkoušíme nabyté zkušenosti z předchozích lekcí.
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 464x (3.98 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript
