Lekce 16 - Manipulace s DOM v JavaScriptu

V minulé lekci, Základy práce s DOM a události v JavaScriptu, jsme začali tou nejčastěji používanou metodou DOMu - getElementById() a řekli jsme si něco o událostech.

Dnešní JavaScript tutoriál bude zaměřen na manipulaci DOM elementů. Ukážeme si 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í metody vyhledáme všechny elementy s uvedeným HTML tagem, například "table".
getElementsByName(name) – Tato další metoda se používá především pro vyhledávání prvků ve formulářích, vrací elementy podle atributu name.
getElementsByTagNameNS(ns, tagName) – Metodu zde uvádíme spíše pro úplnost. Kromě tagu hledaných elementů ji v prvním parametru ještě upřesňujeme tzv. jmenný prostor, na který narazíme v jiných typech dokumentů než je HTML (například XML, SVG, ...).

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 si uvedené metody vyzkoušeli, připravíme si jednoduchý HTML dokument:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Manipulace s DOM</title>
    <script src="js/dom.js"></script>

    <style>
        .highlighted {
            color: red;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <h2>Práce s DOM</h2>
    <p>Odstavec se <span class="highlighted">zvýrazněným</span> textem.</p>
    <div class="registrationForm">
        <label for="username">Jméno:</label>
        <input type="text" id="username" name="username" required>
        <br><br>
        <label for="password">Heslo:</label>
        <input type="password" id="password" name="password">
        <br><br>
        <button type="submit">Potvrdit</button>
    </div>
    <p>Další odstavec se <span class="highlighted">skrytým</span> textem.<span style="display: none;"> Tento text se nezobrazí.</span></p>
</body>

</html>

Vytvořili jsme stránku s jednoduchým formulářem pro registraci uživatele. Na začátku je nadpis <h2> a odstavec se zvýrazněným textem. CSS styl pro zvýraznění jsme pro jednoduchost uvedli v hlavičce dokumentu. Na konci pak máme další odstavec, který má navíc skrytou část textu pomocí atributu style s hodnotou display: none;.

Stránka vypadá takto:

Tvoje stránka

localhost

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

V hlavičce dokumentu máme připravený odkaz na soubor js/dom.js, který do projektu přidáme. Do něj budeme zapisovat metody pro manipulaci s DOM. Nejprve vyhledáme elementy se zvýrazněným textem:

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

Metoda getElementsByClassName() vrací seznam nalezených elementů HTMLCollection, což je kolekce podobná poli, ale poskytuje méně metod a vlastností než klasické pole. Pokud hledanou třídu 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 . Kolekci pomocí cyklu nyní vypíšeme do konzole:

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

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

Po spuštění v prohlížeči si 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 do konzole v Google Chrome - Základní konstrukce jazyka JavaScript

Vidíme zde, že se podařilo vyhledat a vypsat oba zvýrazněné elementy.

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

document.addEventListener("DOMContentLoaded", function() {
    let paragraphs = document.getElementsByTagName("p");

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

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 (například [type=text]) nebo tag elementu.

V následujícím příkladu vyhledáme element s id username, první zvýrazněný text, všechny  elementy a tlačítko s atributem submit:

document.addEventListener("DOMContentLoaded", function() {
    let user = document.querySelector("#username");
    let text = document.querySelector(".highlighted");
    let spans = document.querySelectorAll("span");
    let confirm = document.querySelector("[type=submit]");

    console.log(user);
    console.log(text);
    console.log(confirm);

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

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

document.querySelectorAll("span.highlighted");

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.

Vlastnost `innerHTML`

Nejprve se podíváme na samotný obsah elementů. Jednou z nejzákladnějších vlastností elementů z DOM je vlastnost innerHTML, která reprezentuje HTML obsah elementu. V našem HTML dokumentu máme tento první element :

<p>Odstavec se <span class="highlighted">zvýrazněným</span> textem.</p>

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:

let paragraph = document.querySelector("p");
console.log(paragraph.innerHTML);

V konzoli budeme mít vypsaný nejen text prvního odstavce, ale i obsah tagu :

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:

let paragraph = document.querySelector("p");
paragraph.innerHTML = "<strong>Změněný</strong> text!";
console.log(paragraph.innerHTML);

Vnitřní HTML tagy vlastnosti innerHTML se zpracují. Na stránce se nám v prvním odstavci změní text na:

Tvoje stránka

localhost

Vlastnosti `innerText` a `textContent`

Podobně jako innerHTML funguje i vlastnost innerText. Jediný rozdíl je v tom, že innerText neobsahuje vnořené HTML elementy, ale pouze jejich textový obsah. Bere také v úvahu stylování a text vrací tak, jak je vykreslen na stránce. To znamená, že ignoruje skryté elementy a zachovává vizuální formátování (např. odřádkování).

Upravme předchozí příklad a do konzole vypišme paragraph.innerText:

let paragraph = document.querySelector("p");
paragraph.innerHTML = "<strong>Změněný</strong> text!";
console.log(paragraph.innerText);

V konzoli se nám zobrazí pouze Změněný text! bez tagů .

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 ve druhém odstavci, pojďme si jej nechat pomocí obou vlastností vypsat:

let hiddenText = document.querySelectorAll("p");
console.log(hiddenText[1].innerText); // vypíše: Další odstavec se skrytým textem.
console.log(hiddenText[1].textContent); // vypíše: Další odstavec se skrytým textem. Tento text se nezobrazí.

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 je ve formuláři vyžadováno zadání hesla:

let element = document.querySelector("#password");
console.log(element.hasAttribute("required")); // 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()`

Vidíme, že jsme pro zadání hesla atribut required 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. Pokud chceme například nastavit atribut type="text", zavoláme setAttribute("type", "text"). V případě atributu required však necháme druhý parametr nevyplněný:

let element = document.querySelector("#password");
element.setAttribute("required", "");
console.log(element.hasAttribute("required")); // nyní již vrátí true

Na závěr ještě budeme chtít zvýraznit popisek políčka pro zadání hesla. Ten si tedy pomocí selektoru získáme a nastavíme mu třídu highlighted:

let label = document.querySelector('label[for="password"]');
label.setAttribute("class", "highlighted");

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

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

Uživatelské hodnocení:

820 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

Lekce 16 - 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

Vlastnost innerHTML

Vlastnosti innerText a textContent

Editace atributů DOM

Metoda hasAttribute()

Metoda setAttribute()

Stáhnout

Vlastnost `innerHTML`

Vlastnosti `innerText` a `textContent`

Metoda `hasAttribute()`

Metoda `setAttribute()`