NOVINKA! E-learningové kurzy umělé inteligence. Nyní AI za nejlepší ceny. Zjisti více:
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!

Lekce 17 - Manipulace s DOM v JavaScriptu

V minulé lekci, Zpracování událostí DOM pomocí posluchačů v JavaScriptu, jsme se naučili pracovat s událostmi pomocí posluchačů a lépe strukturovat naše aplikace s využitím externích souborů.

Dnešní JavaScript tutoriál bude zaměřen na manipulaci DOM elementů. Ukážeme si na připravené webové stránce 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 atributem class) uvedeném v jejím parametru.
  • getElementsByTagName(tagName) – Pomocí této metody vyhledáme všechny elementy s uvedeným HTML tagem.
  • getElementsByName(name) – Tato další metoda se používá především pro vyhledávání prvků ve formulářích, vrací elementy podle atributu name.

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 mohli vyzkoušet všechny metody v této lekci, budeme využívat jednoduché stránky pekařství, které máme k dispozici v archivu dole pod lekcí v souboru s názvem soubor_pro_praci. Jsou zde níže popsané soubory HTML a CSS, složka img/ se dvěma obrázky a složka js/ s prázdným souborem dom.js, do kterého budeme postupně přidávat jednotlivé metody.

Ukažme si náš HTML dokument obsahující stránku pekařství:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Domácí pekařství</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="Logo pekařství">
        <h1 id="greeting">Vítejte v našem pekařství</h1>
    </header>
    <p>V naší prodejně<span class="important"> aktuálně nabízíme:</span></p>
    <ul>
        <li>Čerstvý chléb</li>
        <li>Pečivo</li>
        <li>Koláče</li>
        <li>Moučníky</li>
        <li>Dorty</li>
    </ul>
    <p class="important">Čerstvé křupavé pečivo a lahodné dezerty z naší pekárny denně na váš stůl!<span style="display: none;"> Aktuálně nabízíme i objednávky na vánoční cukroví.</span></p>
    <img src="img/pastry.jpg" alt="">
</body>
</html>

Jedná se o jednoduchou stránku pekařství. Na začátku je logo s uvítacím nadpisem <h1>, následované textem <p>. Ten uvádí aktuální nabídku, která je formátována jako neuspořádaný seznam za pomoci elementu <ul>. Dále je zde druhý element <p> s textem, který má navíc skrytou část textu pomocí atributu style s hodnotou display: none;. Na konci je pak obrázek.

V samostatném souboru style.css máme jednoduchý CSS styl, který je nalinkován do hlavičky HTML souboru:

@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 vypadá v prohlížeči takto:

Domácí pekařství
domaci_pekarstvi.cz

Výběr elementů a výpis do konzole

V hlavičce dokumentu máme odkaz na soubor js/dom.js. Do něj budeme postupně zapisovat metody pro manipulaci s DOM. Nejprve vyhledáme elementy se zvýrazněným textem:

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

    // Sem budeme postupně doplňovat další js kód
});

Metoda getElementsByClassName() vrací seznam nalezených elementů HTMLCollection, což je kolekce podobná poli, ale poskytuje méně metod a vlastností než klasické pole. Pokud hledaná třída 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: <p> a <span>. Kolekci pomocí cyklu nyní vypíšeme do konzole, uděláme to tak, že kód uvedený výše v souboru dom.js doplníme:

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

Tento kód a veškeré další ukázky budou uvnitř anonymní funkce, ve které čekáme na načtení dokumentu.

Dále si po spuštění webové stránky pekařství v prohlížeči otevřeme vývojářskou konzoli pomocí klávesy F12 a klikneme na záložku Konzole. V Google Chrome vypadá konzole takto:

Výpis v konzoli google Chrome - Základní konstrukce jazyka JavaScript

Vidíme zde, že se podařilo vyhledat a vypsat oba elementy, druhý včetně skrytého textu.

Nyní vybereme a vypíšeme všechny odstavce v dokumentu, použijeme tedy metodu getElementsByTagName():

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

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

Opět se podíváme na výstup z konzole:

Výpis elementů `p` v konzoli google Chrome - Základní konstrukce jazyka JavaScript

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 v hranatých závorkách nebo tag elementu.

V následující ukázce použijeme v kódu mřížku #. Ta se na české klávesnici píše pomocí Pravého Alt a klávesy X:

Hashtag - Základní konstrukce jazyka JavaScript

V následujícím příkladu vyhledáme element s id greeting, zvýrazněný text, obrázek a elementy <span>:

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 JavaScriptu můžeme pro zadávání řetězců používat jednoduché ('), dvojité ("), nebo zpětné (`) uvozovky. Jednoduché a dvojité uvozovky jsou zaměnitelné a můžeme je používat pro obalení selektorů nebo hodnot atributů, je ale nezbytné držet se stejné konvence v celém kódu. Na výpis textových řetězců můžeme použít takzvaný tupý přízvuk (`) namísto uvozovek, což nám umožní interpolaci, tedy vložení proměnné přímo do řetězce. Problematice uvozovek se věnujeme v kapitole Textové řetězce v JavaScriptu.

V konzoli se nám zobrazí:

Výběr podle CSS selektoru - Základní konstrukce jazyka JavaScript

Jednotlivé selektory lze mezi sebou řetězit. Kdybychom chtěli vybrat pouze elementy <p>, které mají třídu important, upravili bychom metodu querySelectorAll() takto:

document.querySelectorAll("p.important");

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.

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 paragraph = document.querySelector("p");
paragraph.innerText = "Dnes máme v nabídce:";

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

Domácí pekařství
domaci_pekarstvi.cz

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 před obrázkem, jde o druhý výskyt elementu <p>. Pojďme si jej nechat pomocí obou vlastností vypsat:

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

V konzoli vidíme:

Výpis `innerText` a `textContent` v konzoli - Základní konstrukce jazyka JavaScript

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 products = document.querySelectorAll("li");
let fifthItem = products[4];
console.log(fifthItem.innerText);

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:

Výpis vlastnosti innerHTML odstavce v konzoli - Základní konstrukce jazyka JavaScript

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

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

Domácí pekařství
domaci_pekarstvi.cz

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 loga máme vyplněný <alt>:

let logoImage = document.querySelector("#logo");
console.log(logoImage.hasAttribute("alt")); // Vrátí true

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()

Pro obrázek chleba jsme atribut alt 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. Obecná syntaxe je:

element.setAttribute(attributeName, value);

Pokud chceme nastavit atribut alt, postupujeme následovně:

let image = document.querySelector('[src="img/pastry.jpg"]');
image.setAttribute("alt", "Chléb");
console.log(image.hasAttribute("alt"));  // Nyní vrátí true

Podívejme se na výstup konzole:

Výpis true v konzoli - Základní konstrukce jazyka JavaScript

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

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

Domácí pekařství
domaci_pekarstvi.cz

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 320x (328.15 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

Předchozí článek
Zpracování událostí DOM pomocí posluchačů v JavaScriptu
Všechny články v sekci
Základní konstrukce jazyka JavaScript
Přeskočit článek
(nedoporučujeme)
Tvorba elementů a hierarchie DOM v JavaScriptu
Článek pro vás napsal Michal Žůrek - misaz
Avatar
Uživatelské hodnocení:
1077 hlasů
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