Lekce 19 - Editace obsahu DOM v JavaScriptu Nové

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:

let 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:

let 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:

let produkty = document.querySelectorAll("li");
let 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:

let 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:

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