Lekce 19 - Editace obsahu DOM v JavaScriptu

V minulé lekci, Výběr elementů pomocí DOM v JavaScriptu, jsme se naučili další výběr elementů v DOM.

V dnešním tutoriálu základů JavaScriptu si ukážeme, jak pomocí vlastností innerText, textContent a innerHTML číst a měnit obsah elementů v Document Object Model (DOM). Budeme pokračovat v projektu Domácího pekařství z minulé lekce, zejména v editaci souboru dom.js.

Editace obsahu DOM

Ke čtení a změně obsahu elementů v DOM nám dobře poslouží speciální vlastnosti, 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.

Vlastnosti innerText a textContent

Vlastnost innerText umožňuje získat nebo nastavit textový obsah elementu, přičemž nebere v potaz všechny HTML značky uvnitř elementu. Bere ale v úvahu stylování a text vrací tak, jak je vykreslen na stránce. Tedy ignoruje skryté elementy a zachovává vizuální formátování (například odřádkování). Změňme text na naší stránce:

const odstavec = document.querySelector("p");
odstavec.innerText = "Dnes máme v nabídce:";

Na stránce se nám zobrazí upravený úvodní odstavec:

Vlastnost textContent funguje podobně jako innerText. Jak jsme si už řekli, 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 v rámci druhého výskyty elementu <p>. Pojďme si jej nechat pomocí obou vlastností vypsat:

const skrytyText = document.querySelectorAll("p");
console.log(skrytyText[1].innerText);
console.log(skrytyText[1].textContent);

V konzoli vidíme:

Vlastnost innerHTML

Podobně jako innerText funguje i vlastnost innerHTML, která reprezentuje HTML obsah elementu. V našem HTML dokumentu máme nabízené produkty jako položky seznamu (<li>), vybereme pátou položku a necháme ji vypsat do konzole:

const produkty = document.querySelectorAll("li");
const pataPolozka = produkty[4];
console.log(pataPolozka.innerHTML);

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:

Obsah elementu můžeme úplně stejně i měnit, upravme předchozí příklad a škrtněme z nabídky položku dorty:

produkty[4].innerHTML = "<s>Dorty</s>";

Vnitřní HTML tagy vlastnosti innerHTML se zpracují. Na stránce se nám v prvním odstavci změní text na:

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 u h1 máme atributy id, class a title:

const titulek = document.getElementById("greeting");

console.log("h1 má id atribut:", titulek.hasAttribute("id")); // Vrátí true
console.log("h1 má class atribut:", titulek.hasAttribute("class")); // Vrátí false
console.log("h1 má title atribut:", titulek.hasAttribute("title")); // 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()

V případě, že chceme do elementu přidat atribut, zavoláme na něm metodu setAttribute(). V jejím parametru zadáme jeho název a hodnotu. Obecná syntaxe je:

element.setAttribute(attributeName, value);

Pokud chceme nastavit atribut class a title, postupujeme následovně:

titulek.setAttribute("class", "highlight");
titulek.setAttribute("title", "Vítejte v našem pekařství");

Ověříme si, že nové atributy byly přidány:

console.log("h1 má nyní class atribut:", titulek.hasAttribute("class")); // Vrátí true
console.log("h1 má nyní title atribut:", titulek.hasAttribute("title")); // Vrátí true

Podívejme se na výstup konzole:

Na závěr ještě budeme chtít zvýraznit nabídku čerstvého chleba:

const prvniPolozkaSeznamu = document.querySelector("li");
prvniPolozkaSeznamu.setAttribute("class", "important");

Ten si tedy pomocí selektoru získáme a nastavíme mu třídu important. Nyní se podíváme na výsledek v prohlížeči:

Shrnutí lekce

Pomocí vlastností innerText, textContent a innerHTML čteme nebo měníme obsah elementů v DOM. innerText pracuje jen s viditelným textem, zatímco textContent vrací i skrytý text. innerHTML umí pracovat i s HTML značkami, takže můžeme do elementu vložit například přeškrtnutý text. Metodou hasAttribute() ověříme, zda element obsahuje zadaný atribut. Metodou setAttribute() potom můžeme vybranému elementu nastavit nebo změnit atribut, například mu přidat CSS třídu nebo titulek, který se zobrazí po najetí myší.

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š.