9. diel - Manipulácia s DOM v JavaScripte

V predchádzajúcom kvíze, Kvíz - Podmienky, cykly a polia v JavaScripte, sme si overili nadobudnuté skúsenosti z predchádzajúcich lekcií.

V minulej lekcii, Kvíz - Podmienky, cykly a polia v JavaScripte , sme začali tou najčastejšie používanou metódou domov - getElementById() a povedali sme si niečo o udalostiach. Dnešné JavaScript tutoriál bude rýdzo teoretický. Ukážeme si, čo všetko možno vykonávať v domu a v budúcej lekcii vytvoríme už skutočne rozsiahlejšie webovú aplikáciu, ktorá bude čerpať práve zo znalostí nadobudnutých v tejto lekcii.

Výber elementov

Než sa do manipulácie elementov pustíme, musíme si ich nejako nájsť. Metóda getElementById() je síce veľmi účelná (a rýchla), ale nie je vždy ideálne. Niekedy je potrebné vybrať viac elementov a niekedy je potrebné vybrať elementy bez id. Nie je totiž podmienkou, že budeme vyberať z dokumentu, ku ktorému máme prístup a prítomnosť id si zaistíme sami.

Výber na základe triedy

Tento výber zaisťuje metóda getElementsByClassName(). Pri jej písaní si dávajte pozor, že elements je množné číslo a každé prvé písmeno slova (okrem prvého slova) je veľké. Ak to pomýlite, dostanete chybu (asi ju však neuvidíte, chyby zobrazujú iba staršie verzie IE). Metóda vracia pole všetkých elementov, ktoré majú danú triedu. Ak takúto triedu nemá žiadny element, vráti metóda prázdne pole (celkom presne, vráti prázdny HTMLCollection, čo je hlúpejší pole určené na uchovávanie HTML elementov).

document.getElementsByClassName("class");

Výber na základe tagu

Každý element má tag, čo je jeho značka (typ). Metóda getElementsByTagName() vracia všetky elementy, ktoré majú danú značku. Týmto spôsobom môžeme napríklad vybrať všetky textové elementy. Ak žiadny element takýto tag nemá, vráti prázdnu HTMLCollection.

document.getElementsByTagName("tag");

Existujú ešte metódy pre výber na základe tagu a jeho menného priestoru (getElementsByTagNameNS()). Tie ocenia najmä znalci XML a vyhľadávanie na základe mena (getElementsByName()), čo sa používa pre vyhľadávanie prvkov vo formulároch, kde sa atribút name používa. Obe metódy v prípade, kedy nič nespĺňa zadané podmienky, vráti taktiež prázdnu HTMLCollection.

document.getElementsByName("name");
document.getElementsByTagNameNS("tag", "NS");

Výber podľa CSS selektora

V HTML dokumente môžeme vyhľadávať ešte oveľa pohodlnejšie a to pomocou CSS selektorov, ako sme zvyknutí z webdesignu. Existujú dve metódy, ktoré mám toto umožnia. Metóda querySelector() vráti prvý element, ktorý tento selektor spĺňa a metóda querySelectorAll() vráti pole všetkých elementov, pre ktoré daný selektor platia. Ukážeme si to rovno na príklade.

document.querySelector("input[type=text].hezky#uvodni");

Tento selektor vráti element <input>, ktorého atribút type je nastavený na text, má triedu .hezky a zároveň id #uvodni. Možno ste si všimli, že keď vyhľadávame na základe id, stačil by teoreticky selektor iba takto (id musí byť jedinečné).

document.querySelector("#uvodni");

O trochu zaujímavejšie to bude s metódou querySelectorAll(), ktorá v mnohých prípadoch môže byť jediná možnosť ako niečo vybrať.

document.querySelectorAll("div[data-countdown]");

Tento selektor vráti všetky elementy, ktoré majú nastavený atribút data-countdown. Keď sme už schopní vybrať úplne každý element v DOM, môžeme sa pustiť do ich editácie.

Editácia obsahu DOM

InnerHTML

Najprv sa pozrieme na samotný obsah elementov. Jednou z najzákladnejších vlastností elementov z DOM je vlastnosť innerHTML, ktorá reprezentuje obsah elementu. Na elementu <p>:

<p><span>Hello</span>world</p>

Načítanie tejto vlastnosti

p.innerHTML

vráti <span>Hello</span>world. Obsah elementu môžeme úplne rovnako aj meniť. Len je potrebné pamätať na to, že sa vnútorné HTML tagy spracujú.

InnerText

Podobne ako innerHTML funguje aj vlastnosť innerText. Jediný rozdiel je, že innerText neobsahuje vnorené HTML elementy, no iba ich textový obsah. Ak použijeme rovnaký obsah ako v príklade vyššie, p.innerText vráti "Hello world". Vlastnosť bola predtým neštandardné, ale všetky prehliadače ju dnes už podporujú.

TextContent

textContent robí takmer to isté čo innerText. Rozdiel medzi vlastnosťami je, že innerText vracia iba viditeľný text, zatiaľ čo textContent vracia aj text skrytý cez CSS.

Teraz už vieme ako čítať / meniť obsah elementov. Teraz sa pozrieme na ich atribúty.

Editácia atribútov DOM

Má atribút?

Základnou otázkou je či element hľadaný atribút vôbec má. To zistíme metódou hasAttribute(), ktorá ako parameter berie názov atribútu a vracia booleanovskou hodnotu. Existuje aj metóda hasAttributes() (množné číslo), ktorá vracia, či má element vôbec nejaký atribút. Pokiaľ nemá žiadny, vráti false, ak má aspoň jeden, vráti true. Táto metóda neberie žiadny parameter. Metóda má aj variant so menným priestorom a môže vracať aj Node atribútu (jeho uzol v strome) voliteľne sa menným priestorom.

p.hasAttribute("data-velikost");

Potomkovia elementu

Element môže a nemusí mať potomkov. Sú to všetky elementy, ktoré sú v ňom vnorené. Ako príklad si uvedieme formulár:

<form>
    <input type="text" />
    <button>Odoslať</button>
</form>

Elementy <input> a <button> sú potomkami elementu <form>.

Výber potomkov

Zoznam všetkých potomkov elementu je v jeho vlastnosti, poli childNodes (úplne presne to opäť nie je poľa, ale tentoraz NodeList).

FirstChild

Potomkovia sú samozrejme nejako radení a to od najstaršieho po najmladšieho čo do doby vloženie. Jednoduchšie povedané, sú v takom poradí, v akom ich prehliadač načítal (už vieme, že odhora nadol). Vlastnosť firstChild obsahuje prvého z nich.

LastChild

Je naopak posledný potomok.

Treba dodať, že vlastnosti firstChild a lastChild nemusí nutne obsahovať len fyzické elementy, ale napríklad aj HTML komentáre, textové reťazce (typicky má element <p> potomka, čo je jeho obsah - text) a veľa ďalších, ktoré nás väčšinou nezaujímajú (pokiaľ dekóduje XML, je to iná, k tomu sa dostaneme u AJAXu). Z praktického hľadiska tu máme preto ešte firstElementChild a lastElementChild, ktorí vynechávajú všetky "serepetičky" okolo (dosť zákerné sú biele znaky ) A vráti nám iba HTML elementy.

Tvorba elementov

Metódou createElement(), vytvoríme element. Tag sa udáva ako textový reťazec v prvom parametri. Metóda vráti nový element, s ktorým môžeme akokoľvek pracovať, ale musíme si pamätať, že tento element nikde v dokumente zatiaľ ešte nie je. Môžeme do neho vytvárať a vkladať ďalšie elementy, ale kým ho niekam do dokumentu nevložíte, neuvidíme je. Existuje ešte variant, ktorá vytvorí element a predá mu menný priestor - createElementNS().

let span = document.createElement("span");
let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");

Vkladanie a presúvanie elementov

Element vložíme do iného elementu pomocou metódy appendChild(). Metóda nový element vloží za posledného potomka. Ak metóde odovzdáme element, ktorý už je niekde vložený, element presunieme. Na pôvodnom mieste sa odstráni.

p.appendChild(span);

Vkladanie pred nejaký element

Čas od času sa nám veľmi nehodí, keď nám metóda appendChild() pridá element až za posledný. Existuje metóda insertBefore(), ktorá ako prvý parameter príjme nový element a ako druhý element, pred ktorý sa nový element vloží / presunie.

document.body.insertBefore(span, p);

Nahrádzanie potomkov

Potomka elementu môžeme nahradiť. Robí to metóda replaceChild(), ktorá ako prvý parameter prijíma nového potomka a ako druhý parameter pôvodného potomka.

svg.replaceChild(arc, rect);

Mazanie potomkov

Potomka elementu môžeme odstrániť metódou removeChild(), ktorá ako parameter berie potomka:

p.removeChild(span);

Rodič elementu

Každý element má svojho rodiča (element, do ktorého patrí). Iba jediný element ho nemá - koreňový element <html>. Rodičia elementu získame pomocou vlastnosti parentElement (funguje aj parentNode, ktoré vracia aj tie väčšinou nevyužiteľné uzly okolo). U elementu <html> vráti Null. Element HTML sa v dokumentoch aj niekedy úplne vynecháva, podľa špecifikácie nie je nutný.

No a sme na konci. Vymenovali sme si takmer (možno na nejakú s NS som zabudol) všetky metódy a vlastnosti, ktoré nám nejakou cestou vráti iný element / atribút / obsah elementu a ukázali sme si, ako môžeme meniť obsah a atribúty elementu. Aby sme si vedomosti ukotvili v pamäti, tak si v budúcej lekcii, Editor tabuliek v JavaScripte , všetko prakticky vyskúšame. Konečne si vytvoríme skutočne rozsiahlu aplikáciu, ktorú si už ťažko pôjde spliesť s webovou stránkou.