Lekce 16 - Manipulace s DOM v JavaScriptu
V minulé lekci, Základy práce s DOM a události v JavaScriptu, jsme začali tou nejčastěji používanou
metodou DOMu - getElementById()
a řekli jsme si něco o
událostech.
Dnešní JavaScript tutoriál bude zaměřen na manipulaci DOM elementů. Ukážeme si další možnosti výběru elementů z HTML stránky a naučíme se měnit jejich obsah.
Výběr elementů
Než se do manipulace s elementy pustíme, musíme je umět
vyhledat. Již umíme použít metodu
getElementById()
, která je sice velmi účelná a rychlá, ale
není vždy ideální. Někdy je například potřeba vybrat více
elementů a někdy je třeba vybrat elementy bez id
. Není
totiž podmínkou, že budeme vybírat z dokumentu, ke kterému máme přístup
a přítomnost id
si zajistíme sami.
Metody pro výběr elementů
Pojďme si tedy nejprve krátce představit další metody objektu
document
umožňující vyhledat elementy DOM:
getElementsByClassName(className)
– Tato metoda vrátí všechny elementy s odpovídajícím názvem třídy (HTML atributemclass
) uvedeném v jejím parametru.getElementsByTagName(tagName)
– Pomocí metody vyhledáme všechny elementy s uvedeným HTML tagem, například"table"
.getElementsByName(name)
– Tato další metoda se používá především pro vyhledávání prvků ve formulářích, vrací elementy podle atributuname
.getElementsByTagNameNS(ns, tagName)
– Metodu zde uvádíme spíše pro úplnost. Kromě tagu hledaných elementů ji v prvním parametru ještě upřesňujeme tzv. jmenný prostor, na který narazíme v jiných typech dokumentů než je HTML (například XML, SVG, ...).
Elementy můžeme vybírat také podle CSS selektorů, jak jsme zvyklí z webdesignu. Využijeme k tomu metody:
querySelector(cssSelector)
– Vrátí první nalezený element.querySelectorAll(cssSelector)
– Vrátí všechny elementy odpovídající zadanému selektoru.
HTML dokument pro práci s DOM
Abychom si uvedené metody vyzkoušeli, připravíme si jednoduchý HTML dokument:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Manipulace s DOM</title> <script src="js/dom.js"></script> <style> .highlighted { color: red; font-weight: bold; } </style> </head> <body> <h2>Práce s DOM</h2> <p>Odstavec se <span class="highlighted">zvýrazněným</span> textem.</p> <div class="registrationForm"> <label for="username">Jméno:</label> <input type="text" id="username" name="username" required> <br><br> <label for="password">Heslo:</label> <input type="password" id="password" name="password"> <br><br> <button type="submit">Potvrdit</button> </div> <p>Další odstavec se <span class="highlighted">skrytým</span> textem.<span style="display: none;"> Tento text se nezobrazí.</span></p> </body> </html>
Vytvořili jsme stránku s jednoduchým formulářem pro registraci
uživatele. Na začátku je nadpis <h2>
a odstavec se
zvýrazněným textem. CSS styl pro zvýraznění jsme pro jednoduchost uvedli v
hlavičce dokumentu. Na konci pak máme další odstavec, který má navíc
skrytou část textu pomocí atributu style
s hodnotou
display: none;
.
Stránka vypadá takto:
Výběr elementů a výpis do konzole
V hlavičce dokumentu máme připravený odkaz na soubor
js/dom.js
, který do projektu přidáme. Do něj budeme zapisovat
metody pro manipulaci s DOM. Nejprve vyhledáme elementy se zvýrazněným
textem:
document.addEventListener("DOMContentLoaded", function() { let elements = document.getElementsByClassName("highlighted"); });
Metoda getElementsByClassName()
vrací seznam nalezených
elementů HTMLCollection
, což je kolekce podobná poli, ale
poskytuje méně metod a vlastností než klasické pole. Pokud hledanou třídu
nemá žádný element, získáme prázdný seznam a vlastnost
length
bude mít hodnotu 0
.
V našem případě se do HTMLCollection
vloží dva elementy
<span>
. Kolekci pomocí cyklu nyní vypíšeme do
konzole:
document.addEventListener("DOMContentLoaded", function() { let elements = document.getElementsByClassName("highlighted"); for (let i = 0; i < elements.length; i++) { console.log(elements[i]); } });
Po spuštění v prohlížeči si otevřeme vývojářskou konzoli pomocí klávesy F12 a klikneme na záložku Konzole. V Google Chrome vypadá konzole takto:
Vidíme zde, že se podařilo vyhledat a vypsat oba zvýrazněné elementy.
Nyní vybereme a vypíšeme všechny odstavce v dokumentu, použijeme tedy
metodu getElementsByTagName()
:
document.addEventListener("DOMContentLoaded", function() { let paragraphs = document.getElementsByTagName("p"); for (let i = 0; i < paragraphs.length; i++) { console.log(paragraphs[i]); } });
Výběr podle CSS selektoru
Ukažme si nyní, jak vybrat jeden element pomocí metody
querySelector()
a více elementů metodou
querySelectorAll()
. Jako selektor můžeme zadat #id
,
.class
pro třídu, atribut (například [type=text]
)
nebo tag elementu.
V následujícím příkladu vyhledáme element s id
username
, první zvýrazněný text, všechny
<span>
elementy a tlačítko s atributem
submit
:
document.addEventListener("DOMContentLoaded", function() { let user = document.querySelector("#username"); let text = document.querySelector(".highlighted"); let spans = document.querySelectorAll("span"); let confirm = document.querySelector("[type=submit]"); console.log(user); console.log(text); console.log(confirm); for (let i = 0; i < spans.length; i++) { console.log(spans[i]); } });
Jednotlivé selektory lze mezi sebou řetězit. Kdybychom chtěli vybrat
pouze elementy <span>
, které mají třídu
highlighted
, upravili bychom metodu querySelectorAll()
takto:
document.querySelectorAll("span.highlighted");
Když jsme již schopni vybrat úplně každý element v DOM, můžeme se pustit do jejich editace.
Editace obsahu DOM
Nyní se zaměříme na to, jak manipulovat s obsahem elementů v Document Object Model (DOM). Budeme se věnovat jejich vlastnostem, které nám umožňují číst i měnit obsah elementů na našich webových stránkách. Tato dovednost je klíčová pro dynamické změny webových stránek v reálném čase.
Vlastnost innerHTML
Nejprve se podíváme na samotný obsah elementů. Jednou z
nejzákladnějších vlastností elementů z DOM je vlastnost
innerHTML
, která reprezentuje HTML obsah
elementu. V našem HTML dokumentu máme tento první element
<p>
:
<p>Odstavec se <span class="highlighted">zvýrazněným</span> textem.</p>
Pro práci s tímto elementem v JavaScriptu na něj nejprve potřebujeme
získat odkaz. Poté načteme jeho vlastnost innerHTML
a vypíšeme
ji do konzole:
let paragraph = document.querySelector("p"); console.log(paragraph.innerHTML);
V konzoli budeme mít vypsaný nejen text prvního odstavce, ale i obsah tagu
<span>
:
Obsah elementu můžeme úplně stejně i měnit, upravme předchozí příklad:
let paragraph = document.querySelector("p"); paragraph.innerHTML = "<strong>Změněný</strong> text!"; console.log(paragraph.innerHTML);
Vnitřní HTML tagy vlastnosti innerHTML
se zpracují. Na
stránce se nám v prvním odstavci změní text na:
Vlastnosti innerText
a
textContent
Podobně jako innerHTML
funguje i vlastnost
innerText
. Jediný rozdíl je v tom, že innerText
neobsahuje vnořené HTML elementy, ale pouze jejich textový
obsah. Bere také v úvahu stylování a text vrací tak, jak je vykreslen na
stránce. To znamená, že ignoruje skryté elementy a
zachovává vizuální formátování (např. odřádkování).
Upravme předchozí příklad a do konzole vypišme
paragraph.innerText
:
let paragraph = document.querySelector("p"); paragraph.innerHTML = "<strong>Změněný</strong> text!"; console.log(paragraph.innerText);
V konzoli se nám zobrazí pouze Změněný text!
bez tagů
<strong>
.
Vlastnost textContent
funguje podobně jako
innerText
. Hlavní odlišností je, že innerText
respektuje stylizaci CSS a vrací text tak, jak je vykreslený na stránce. To
znamená, že skrytý text (například pomocí atributu
display: none;
) nebude zahrnut v návratové hodnotě
innerText
. Na druhou stranu, textContent
ignoruje
stylování a vrací veškerý text obsažený v elementu,
včetně toho, který je skrytý. Tato vlastnost je rychlejší, protože
nepotřebuje zjišťovat, jaký text je viditelný na základě aplikovaných
stylů.
V naší ukázce máme skrytý text ve druhém odstavci, pojďme si jej nechat pomocí obou vlastností vypsat:
let hiddenText = document.querySelectorAll("p"); console.log(hiddenText[1].innerText); // vypíše: Další odstavec se skrytým textem. console.log(hiddenText[1].textContent); // vypíše: Další odstavec se skrytým textem. Tento text se nezobrazí.
Nyní již víme, jak číst a měnit obsah elementů. Podíváme se tedy na editaci jejich atributů.
Editace atributů DOM
Při práci s DOM je klíčové umět pracovat s atributy a potomky jednotlivých elementů.
Metoda hasAttribute()
Základní otázkou je, zda element hledaný atribut vůbec má. To zjistíme
metodou hasAttribute()
, která jako parametr bere název atributu a
vrací true
nebo false
.
Takto například zjistíme, zda je ve formuláři vyžadováno zadání hesla:
let element = document.querySelector("#password"); console.log(element.hasAttribute("required")); // vrátí false
Existuje i metoda hasAttributes()
v množném
čísle, která vrací, jestli má element vůbec nějaký atribut. Pokud nemá
žádný, vrátí false
, pokud má alespoň jeden, vrátí
true
. Tato metoda nebere žádný parametr.
Metoda setAttribute()
Vidíme, že jsme pro zadání hesla atribut required
neuvedli.
Pojďme to opravit. Do kódu výše přidáme metodu
setAttribute()
, které v parametru zadáme jeho název a hodnotu.
Pokud chceme například nastavit atribut type="text"
, zavoláme
setAttribute("type", "text")
. V případě atributu
required
však necháme druhý parametr nevyplněný:
let element = document.querySelector("#password"); element.setAttribute("required", ""); console.log(element.hasAttribute("required")); // nyní již vrátí true
Na závěr ještě budeme chtít zvýraznit popisek políčka pro zadání
hesla. Ten si tedy pomocí selektoru získáme a nastavíme mu třídu
highlighted
:
let label = document.querySelector('label[for="password"]'); label.setAttribute("class", "highlighted");
Celý kód projektu je opět k dispozici v archivu lekce. Zkuste si jej upravit a vyhledat nebo změnit další elementy DOM.
V příští lekci, Tvorba elementů a hierarchie DOM v JavaScriptu, si popíšeme hierarchii elementů a naučíme se vytvořit nový element a přidat jej do HTML stránky.
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 94x (2 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript