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 . 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  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:  a . 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 :

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

Článek pro vás napsal Michal Žůrek - misaz

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

Nejčastěji vyhledáváné

Lekce 17 - Manipulace s DOM v JavaScriptu

Výběr elementů

Metody pro výběr elementů

HTML dokument pro práci s DOM

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

Výběr podle CSS selektoru

Editace obsahu DOM

Vlastnosti innerText a textContent

Vlastnost innerHTML

Editace atributů DOM

Metoda hasAttribute()

Metoda setAttribute()

Stáhnout

Vlastnosti `innerText` a `textContent`

Vlastnost `innerHTML`

Metoda `hasAttribute()`

Metoda `setAttribute()`