19. diel - Editácia obsahu DOM v JavaScripte Nové

V minulej lekcii, Tvorba elementov a hierarchie DOM v JavaScripte, sme sa naučili vytvoriť nový element a vložiť ho do HTML stránky.

V dnešnom tutoriále základov JavaScriptu si ukážeme, ako pomocou vlastností innerText, textContent a innerHTML čítať a meniť obsah elementov v Document Object Model (DOM). Budeme pokračovať v projekte Domáceho pekárstva z minulej lekcie, najmä v editácii súboru dom.js.

Editácia obsahu DOM

Na čítanie a zmene obsahu elementov v DOM nám dobre poslúžia špeciálne vlastnosti, ktoré nám umožňujú čítať aj meniť obsah elementov na našich webových stránkach. Táto zručnosť je kľúčová pre dynamické zmeny webových stránok v reálnom čase.

Vlastnosti innerText a textContent

Vlastnosť innerText umožňuje získať alebo nastaviť textový obsah elementu, pričom neberie do úvahy všetky HTML značky vo vnútri elementu. Berie ale do úvahy štýlovanie a text vracia tak, ako je vykreslený na stránke. Teda ignoruje skryté elementy a zachováva vizuálne formátovanie (napríklad odriadkovanie). Zmeňme text na našej stránke:

let paragraph = document.querySelector("p");
paragraph.innerText = "Dnes máme v ponuke:";

Na stránke sa nám zobrazí upravený úvodný odsek:

Vlastnosť textContent funguje podobne ako innerText. Hlavnou odlišnosťou je, že innerText rešpektuje štylizáciu CSS a vracia text tak, ako je vykreslený na stránke. To znamená, že skrytý text (napríklad pomocou atribútu display: none;) nebude zahrnutý v návratovej hodnote innerText. Na druhú stranu, textContent ignoruje štylovanie a vracia všetok text obsiahnutý v elemente, vrátane toho, ktorý je skrytý. Táto vlastnosť je rýchlejšia, pretože nepotrebuje zisťovať, aký text je viditeľný na základe aplikovaných štýlov.

V našej ukážke máme skrytý text v rámci druhého výskyty elementu <p>. Poďme si ho nechať pomocou oboch vlastností vypísať:

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

V konzole vidíme:

Vlastnosť innerHTML

Podobne ako innerText funguje aj vlastnosť innerHTML, ktorá reprezentuje HTML obsah elementu. V našom HTML dokumente máme ponúkané produkty ako položky zoznamu (<li>), vyberieme piatu položku a necháme ju vypísať do konzoly:

let products = document.querySelectorAll("li");
let fifthItem = products[4];
console.log(fifthItem.innerHTML);

Na prácu s týmto elementom v JavaScripte naň najprv potrebujeme získať odkaz. Potom načítame jeho vlastnosť innerHTML a vypíšeme ju do konzoly:

Obsah elementu môžeme úplne rovnako aj meniť, upravme predchádzajúci príklad a škrtnime z ponuky položku torty:

products[4].innerHTML = "<s>Torty</s>";

Vnútorné HTML tagy vlastnosti innerHTML sa spracujú. Na stránke sa nám v prvom odseku zmení text na:

Teraz už vieme, ako čítať a meniť obsah elementov. Pozrieme sa teda na editáciu ich atribútov.

Editácia atribútov DOM

Pri práci s DOM je kľúčové vedieť pracovať s atribútmi a potomkami jednotlivých elementov.

hasAttribute()

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 true alebo false.

Takto napríklad zistíme, či pri h1 máme atribúty id, class a title:

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

console.log("h1 má id atribut:", heading.hasAttribute("id")); // Vráti true
console.log("h1 má class atribut:", heading.hasAttribute("class")); // Vráti false
console.log("h1 má title atribut:", heading.hasAttribute("title")); // Vráti false

Existuje aj metóda hasAttributes() v množnom čísle, ktorá vracia, či má element vôbec nejaký atribút. Ak nemá žiadny, vráti false, ak má aspoň jeden, vráti true. Táto metóda neberie žiadny parameter.

setAttribute()

V prípade, že chceme do elementu pridať atribút, zavoláme na ňom metódu setAttribute(). V jej parametri zadáme jeho názov a hodnotu. Všeobecná syntax je:

element.setAttribute(attributeName, value);

Pokiaľ chceme nastaviť atribút class a title, postupujeme nasledovne:

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

Overíme si, že nové atribúty boli pridané:

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

Pozrime sa na výstup konzoly:

Na záver ešte budeme chcieť zvýrazniť ponuku čerstvého chleba:

let firstListItem = document.querySelector("li");
firstListItem.setAttribute("class", "important");

Ten si teda pomocou selektora získame a nastavíme mu triedu important. Teraz sa pozrieme na výsledok v prehliadači:

V ďalšej lekcii, Dokončenie editora tabuliek v JavaScripte, sa naučíme do editora tabuliek vkladať nové stĺpce a riadky. Doplníme do neho aj funkcie na ich zmazanie.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.