Lekce 18 - 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 hlavičku stránky pekařství z lekce Manipulace s DOM v JavaScriptu:
<header> <img id="logo" src="img/baker.svg" alt="Logo pekařství"> <h1 id="greeting">Vítejte v našem pekařství</h1> </header>
Elementy <img> a <h1> jsou potomky
elementu <header>.
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 NodeList vrací také metoda
querySelectorAll(), kterou již známe z lekce Manipulace s 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.
Vypišme všechny potomky naší hlavičky:
let headerElements= document.querySelector('header'); console.log(headerElements.childNodes);
V konzoli se nám zobrazí 5 prvků:
Kromě elementů <img> a <h1> 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.
Obecná syntaxe metody je následující:
let element = document.createElement(tagName);
Při užití metody createElement() nám tagName
symbolizuje řetězec, který specifikuje typ vytvořeného elementu,
například <div>, <span>,
<img> a tak dále.
Uveďme si příklad pro tvorbu nového elementu <div>, na
který pak dále navážeme:
let paragraph = document.createElement("div");
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. 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. Abychom mohli využít metodu
getElementById() nejprve v souboru index.html
poslednímu výskytu <p> na stránce přidáme
id="info". Jde o odstavec v dokumentu, který se nachází pod
seznamem produktů pekárny. Upravíme jej takto:
<p id="info" class="important">Čerstvé křupavé pečivo a lahodné dezerty z naší pekárny denně na váš stůl!<span style="display: none;"> Aktuálně nabízíme i objednávky na vánoční cukroví.</span></p>
Pak do naší stránky pomocí scriptu přidáme odstavec s textem, jehož
první řádek jsme si již ukázali výše. V souboru dom.js
doplníme tento kód:
let paragraph = document.createElement("div"); paragraph.textContent = "Každý den po 16:00 poskytujeme na veškerý sortiment 50% slevu."; let parent = document.getElementById("info"); parent.appendChild(paragraph);
V prohlížeči uvidíme doplněnou větu po textu v elementu
<p>, kterému jsme dodávali id:
V tomto příkladu jsme nejprve vytvořili nový element
<div> a nastavili jsme jeho textový obsah. Poté jsme
vyhledali v dokumentu existující element <p> podle jeho
id. Nakonec jsme použili metodu appendChild(),
abychom odstavec vložili jako posledního potomka.
Nový odstavec ale nechceme mít tolik na očích, uvedeme ho pouze jako
doplňkovou informaci dole na stránce. Zavoláme tedy znovu metodu
appendChild(), kterou nyní odstavec přesuneme:
document.body.appendChild(paragraph);
Jako rodiče tentokrát používáme document.body pro zápis na
konec těla HTML dokumentu.
V prohlížeči máme tento výsledek:
Vkládání elementu před jiný element
Čas od času se nám 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(). 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
nadpis <h2>, který bude před elementem
<div>. Předešlý kód doplníme následovně:
let heading = document.createElement("h2"); heading.textContent = "Aktuality:"; let element = document.getElementsByTagName("div"); document.body.insertBefore(heading, element[0]);
V příkladu jsme pro získání elementu <div> pro
připomenutí použili metodu getElementsByTagName(), která
vyhledá a vrátí všechny elementy <div> v dokumentu, pokud
je jich více. Proto v metodě insertBefore() zadáváme,
kolikátý výskyt chceme. Zde potřebujeme první výskyt, tedy uvedeme index s
hodnotou 0.
V prohlížeči uvidíme nový nadpis:
Jelikož se nám formátování h2 nadpisu do stránky úplně
graficky nehodí, přiřadíme mu ještě pomocí již známé metody
setAtributes() třídu important:
let styledHeading = document.querySelector("h2"); styledHeading.setAttribute("class", "important");
Výsledek v prohlížeči:
Nahrazování a mazání potomků
Potomka elementu můžeme také nahradit. Náš pořád
příliš výrazný nadpis h2 nyní v dokumentu raději nahradíme
jiným tučným textem:
let newParagraph = document.createElement("p"); let strongElement = document.createElement("strong"); strongElement.textContent = "Novinky z naší pekárny:"; newParagraph.appendChild(strongElement); document.body.replaceChild(newParagraph, heading);
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áš
nadpis neměl rodiče document.body, ale byl vložený například
do elementu <div>, metoda by vyvolala chybu.
Potomka elementu můžeme i odstranit, smažme tedy zvýrazněný doplněný text:
newParagraph.removeChild(strongElement);
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:
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 231x (164.07 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript
