17. diel - Manipulácia s DOM v JavaScripte

V minulej lekcii, Spracovanie udalostí DOM pomocou poslucháčov v JavaScripte, sme sa naučili pracovať s udalosťami pomocou poslucháčov a lepšie štruktúrovať naše aplikácie s využitím externých súborov.

Dnešný JavaScript tutoriál bude zameraný na manipuláciu DOM elementov. Ukážeme si na pripravenej webovej stránke ďalšie možnosti výberu elementov z HTML stránky a naučíme sa meniť ich obsah.

Výber elementov

Než sa do manipulácie s elementmi pustíme, musíme ich vedieť vyhľadať. Už vieme použiť metódu getElementById(), ktorá je síce veľmi účelná a rýchla, ale nie je vždy ideálna. Niekedy je napríklad potrebné vybrať viac elementov a niekedy je treba 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.

Metódy pre výber elementov

Poďme si teda najprv krátko predstaviť ďalšie metódy objektu document umožňujúce vyhľadať elementy DOM:

getElementsByClassName(className) – Táto metóda vráti všetky elementy s odpovedajúcim názvom triedy (HTML atribútom class) uvedenom v jej parametri.
getElementsByTagName(tagName) – Pomocou metódy vyhľadáme všetky elementy s uvedeným HTML tagom.
getElementsByName(name) – Táto ďalšia metóda sa používa predovšetkým pre vyhľadávanie prvkov vo formulároch, vracia elementy podľa atribútu name.

Elementy môžeme vyberať aj podľa CSS selektorov, ako sme zvyknutí z webdesignu. Využijeme k tomu metódy:

querySelector(cssSelector) – Vráti prvý nájdený element.
querySelectorAll(cssSelector) – Vráti všetky elementy zodpovedajúce zadanému selektoru.

HTML dokument pre prácu s DOM

Aby sme mohli vyskúšať všetky metódy v tejto lekcii, budeme využívať jednoduché stránky pekárstva, ktoré máme k dispozícii v archíve dole pod lekciou v súbore s názvom file_for_work. Sú tu nižšie popísané súbory HTML a CSS a priečinok js\ s prázdnym súborom dom.js, do ktorého budeme postupne pridávať jednotlivé metódy.

Ukážme si náš HTML dokument obsahujúci stránku pekárstva:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Home bakery</title>
    <script src="js/dom.js"></script>
    <link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
    <header>
        <img id="logo" src="img/baker.svg" alt="Bakery logo">
        <h1 id="greeting">Welcome to our bakery</h1>
    </header>
    <p>In our store<span class="important"> we currently offer:</span></p>
    <ul>
        <li>Fresh bread</li>
        <li>Pastry</li>
        <li>Pies</li>
        <li>Flour mills</li>
        <li>Cakes</li>
    </ul>
    <p class="important">Fresh crispy pastries and delicious desserts from our bakery to your table daily!<span style="display: none;"> We currently offer orders for Christmas pastries.</span></p>
    <img src="img/pastry.jpg" alt="">
</body>
</html>

Jedná sa o jednoduchú stránku pekárstva. Na začiatku je logo s uvítacím nadpisom <h1>, nasledovaný textom . Ten uvádza aktuálnu ponuku, ktorá je formátovaná ako neusporiadaný zoznam pomocou elementu <ul>. Ďalej je tu druhý element  s textom, ktorý má navyše skrytú časť textu pomocou atribútu style s hodnotou display: none;. Na konci je potom obrázok.

V samostatnom súbore style.css máme jednoduchý CSS štýl, ktorý je nalinkovaný do hlavičky HTML súboru:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;800&display=swap');

body {
    font: 14px "Poppins";
}

body > header {
    height: 80px;
    width: 100%;
    background: #be9853;
    color: white;
    display: flex;
    justify-content: center
}

.important {
    font-weight: bold;
    color: #71592c;
}

#logo {
    height:100%;
}

img {
    height: 350px;
}

Stránka vyzerá v prehliadači takto:

Home Bakery

home_bakery.com

Výber elementov a výpis do konzoly

V hlavičke dokumentu máme odkaz na súbor js/dom.js. Do neho budeme postupne zapisovať metódy pre manipuláciu s DOM. Najprv vyhľadáme elementy so zvýrazneným textom:

document.addEventListener("DOMContentLoaded", function() {
    let elements = document.getElementsByClassName("important");

    // We will add the code for listing the elements to the console here
});

Metóda getElementsByClassName() vracia zoznam nájdených elementov ako HTMLCollection, čo je kolekcia podobná poľu, ale poskytuje menej metód a vlastností ako klasické pole. Ak hľadaná trieda nemá žiadny element, získame prázdny zoznam a vlastnosť length bude mať hodnotu 0.

V našom prípade sa do HTMLCollection vložia dva elementy:  a <span>. Kolekciu pomocou cyklu teraz vypíšeme do konzoly, urobíme to tak, že do nášho súboru dom.js namiesto komentára v ukážke vyššie doplníme kód:

for (let i = 0; i < elements.length; i++) {
    console.log(elements[i]);
}

Ďalej po spustení webovej stránky pekárstva v prehliadači si otvoríme vývojársku konzolu pomocou klávesy F12 a klikneme na záložku Console. V Google Chrome vyzerá konzola takto:

Výpis v konzole google Chrome - Základné konštrukcie jazyka JavaScript

Vidíme tu, že sa podarilo vyhľadať a vypísať oba elementy, druhý vrátane skrytého textu. Teraz vyberieme a vypíšeme všetky odstavce v dokumente, použijeme teda metódu getElementsByTagName():

document.addEventListener("DOMContentLoaded", function() {

    // ...

    let paragraphs = document.getElementsByTagName("p");

    for (let i = 0; i < paragraphs.length; i++) {
        console.log(paragraphs[i]);
    }
});

Opäť sa pozrieme na výstup z konzoly:

Výpis elementov `p` v konzole google Chrome - Základné konštrukcie jazyka JavaScript

Výber podľa CSS selektora

Ukážme si teraz, ako vybrať jeden element pomocou metódy querySelector() a viac elementov metódou querySelectorAll(). Ako selektor môžeme zadať #id, .class pre triedu, atribút v hranatých zátvorkách alebo tag elementu.

V nasledujúcom príklade vyhľadáme element s id greeting, zvýraznený text, obrázok a elementy :

let title = document.querySelector("#greeting");
let text = document.querySelector(".important");
let picture = document.querySelector('[src="img/pastry.jpg"]');
let spans = document.querySelectorAll("span");

console.log(title);
console.log(text);
console.log(picture);

for (let i = 0; i < spans.length; i++) {
    console.log(spans[i]);
}

V JavaScripte môžeme pre zadávanie reťazcov používať jednoduché ('), dvojité ("), alebo spätné (`) úvodzovky. Jednoduché a dvojité úvodzovky sú zameniteľné a môžeme ich používať pre obalenie selektorov alebo hodnôt atribútov, je ale nevyhnutné držať sa rovnakej konvencie v celom kóde. Na výpis textových reťazcov môžeme použiť takzvaný tupý prízvuk (`) namiesto úvodzoviek, čo nám umožní interpoláciu, teda vložiť premenné priamo do reťazca. Problematike úvodzoviek sa venujeme v kapitole Textové reťazce v JavaScripte.

V konzole sa nám zobrazí:

Výber podľa CSS selektora - Základné konštrukcie jazyka JavaScript

Jednotlivé selektory je možné medzi sebou reťaziť. Keby sme chceli vybrať iba elementy , ktoré majú triedu important, upravili by sme metódu querySelectorAll() takto:

document.querySelectorAll("p.important");

Keď sme už schopní vybrať úplne každý element v DOM, môžeme sa pustiť do ich editácie.

Editácia obsahu DOM

Teraz sa zameriame na to, ako manipulovať s obsahom elementov v Document Object Model (DOM). Budeme sa venovať ich vlastnostiam, 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 = "Today we offer:";

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

Home Bakery

home_bakery.com

Vlastnosť textContent funguje podobne ako innerText. Hlavným rozdielom je, že innerText rešpektuje štýlizá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 druhej strane, textContent ignoruje štýlovanie 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 pred obrázkom, ide o druhý výskyt elementu . 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:

Výpis `innerText` a `textContent` v konzole - Základné konštrukcie jazyka JavaScript

Vlastnosť `innerHTML`

Podobne ako innerText funguje aj vlastnosť innerHTML, ktorá reprezentuje HTML obsah elementu. V našom HTML dokumente máme zoznam produktov pomocou <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);

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

Výpis vlastnosti innerHTML odstavca v konzole - Základné konštrukcie jazyka JavaScript

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

let canceledProducts = document.querySelectorAll("li");
canceledProducts[4].innerHTML = "<s>Cakes</s>";

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

Home Bakery

home_bakery.com

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.

Metóda `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 u loga máme vyplnený <alt>:

let logoImage = document.querySelector("#logo");
console.log(logoImage.hasAttribute("alt")); // returns true

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.

Metóda `setAttribute()`

Pre obrázok chleba sme atribút alt neuviedli. Poďme to opraviť. Do kódu vyššie pridáme metódu setAttribute(), ktorá v parametri zadáme jeho názov a hodnotu. Všeobecná syntax je element.setAttribute(attributeName, value);. Ak chceme nastaviť atribút alt, postupujeme nasledovne:

let image = document.querySelector('[src="img/pastry.jpg"]');
image.setAttribute("alt", "Bread");
console.log(image.hasAttribute("alt"));  // now returns true

Pozrime sa na výstup konzoly:

Výpis true v konzole - Základné konštrukcie jazyka JavaScript

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:

Home Bakery

home_bakery.com

Celý kód projektu je opäť k dispozícii v archíve lekcie. Skúste si ho upraviť a vyhľadať alebo zmeniť ďalšie elementy DOM.

V budúcej lekcii, Tvorba elementov a hierarchie DOM v JavaScripte, si popíšeme hierarchiu elementov a naučíme sa vytvoriť nový element a pridať ho do HTML stránky.

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

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 10x (326.34 kB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript

Článok pre vás napísal Michal Žůrek - misaz

Užívateľské hodnotenie:

6 hlasov

Autor se věnuje tvorbě aplikací pro počítače, mobilní telefony, mikroprocesory a tvorbě webových stránek a webových aplikací. Nejraději programuje ve Visual Basicu a TypeScript. Ovládá HTML, CSS, JavaScript, TypeScript, C# a Visual Basic.

Aktivity

Najčastejšie vyhľadávané

17. diel - Manipulácia s DOM v JavaScripte

Výber elementov

Metódy pre výber elementov

HTML dokument pre prácu s DOM

Výber elementov a výpis do konzoly

Výber podľa CSS selektora

Editácia obsahu DOM

Vlastnosti innerText a textContent

Vlastnosť innerHTML

Editácia atribútov DOM

Metóda hasAttribute()

Metóda setAttribute()

Stiahnuť

Vlastnosti `innerText` a `textContent`

Vlastnosť `innerHTML`

Metóda `hasAttribute()`

Metóda `setAttribute()`