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 85x (1.68 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

Článek pro vás napsal Michal Žůrek - misaz

Uživatelské hodnocení:

143 hlasů

Autor se věnuje tvorbě aplikací pro počítače, mobilní telefony, mikroprocesory a tvorbě webových stránek a webových aplikací. Nejraději programuje ve Visual Basicu a TypeScript. Ovládá HTML, CSS, JavaScript, TypeScript, C# a Visual Basic.

Aktivity