Lekce 18 - Výběr elementů pomocí 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ů.

V dnešním JavaScript tutoriálu si na připravené webové stránce ukážeme další možnosti výběru elementů z HTML stránky.

Výběr elementů

Před tím, než budeme moci s elementy manipulovat, 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. V některých dokumentech totiž ID nemusí být u daných elementů přítomná a ne vždy máme možnost je přidat.

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 si mohli vyzkoušet všechny metody v této lekci, budeme postupně vytvářet jednoduchou stránku pekařství. V nové složce pekarstvi/ si vytvoříme soubory index.html a style.css. Dále v podsložce js/ si vytvoříme prázdný soubor dom.js, do kterého budeme později přidávat jednotlivé JavaScript metody.

`index.html`

Do souboru index.html si vložíme HTML kód obsahující stránku našeho pekařství:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Domácí pekařství</title>
    <script src="js/dom.js" defer></script>
    <link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
    <h1 id="greeting">🥐 Vítejte v našem pekařství</h1>

    <p>V naší prodejně <strong class="important">aktuálně nabízíme:</strong></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><strong 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></strong></p>
</body>
</html>

Jedná se o jednoduchou stránku pekařství. Na začátku je uvítací nadpis <h1> s emoji, následovaný textem v <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;. Spuštění skriptu až po načtení stránky si zajistíme jednoduše atributem defer.

`style.css`

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";
}

h1 {
    padding: 1rem;
    background: #be9853;
    color: white;
    text-align: center;
}

.important {
    color: #71592c;
}

Styl importuje font Poppins, který nastaví celému elementu <body>. Dále nastavujeme vnitřní odsazení, barvu pozadí a textu a zarovnání nadpisu <h1>. Nakonec obarvíme elementy se třídou .important.

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.

Výběr elementů podle třídy

Nejprve vyhledáme elementy se zvýrazněným textem:

let dulezite = document.getElementsByClassName("important");

// Níže budeme postupně doplňovat další JS kód

Metoda vrací kolekci elementů, jelikož tentokrát vybíráme elementy podle třídy a může jich být na stránce více. V našem případě máme na stránce se třídou .important dva elementy <strong>. Ty se oba vloží do proměnné elements. Kolekci pomocí cyklu nyní vypíšeme do konzole. Kód uvedený výše v souboru dom.js doplníme:

for (let element of dulezite) {
    console.log(element);
}

Po otevření webové stránky pekařství v prohlížeči si otevřeme vývojářskou konzoli pomocí klávesy F12 a klikneme na záložku Konzole. Vidíme, že se podařilo vyhledat a vypsat oba elementy, druhý včetně skrytého textu:

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

Metoda getElementsByClassName() vrací seznam nalezených elementů HTMLCollection. To 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ýběr elementů podle názvu tagu

Nyní vybereme a vypíšeme všechny odstavce <p> v dokumentu, použijeme tedy metodu getElementsByTagName(). Za náš kód v dom.js přidáme:

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

for (let odstavec of odstavce) {
    console.log(odstavec);
}

Uložíme a obnovíme stránku. 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 jakýkoli CSS selektor, např. #id pro unikátní element, .class pro třídu, atribut v hranatých závorkách nebo tag elementu.

V následujícím příkladu postupně vyhledáme element s id majícím hodnotu greeting, elementy mající třídu important a elementy <strong>. Opět připisujeme za náš současný kód:

let titulek = document.querySelector("#greeting");
let dulezity = document.querySelector(".important");
let zduraznene = document.querySelectorAll("strong");

console.log(titulek);
console.log(dulezity);

for (let element of zduraznene) {
    console.log(element);
}

Uložíme soubor, obnovíme stránku. 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 <strong>, které mají třídu important, upravili bychom metodu querySelectorAll() takto:

document.querySelectorAll("strong.important");

Úkazali jsme si způsoby, jakými jsme schopni vybrat úplně každý element v DOM.

V příští lekci, Editace obsahu DOM v JavaScriptu, budeme manipulovat s obsahem elementů v DOM. Vysvětlíme si, jak můžeme pomocí vlastností innerText, textContent a innerHTML číst a měnit obsah elementů.

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

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

Uživatelské hodnocení:

1537 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é