Vyhledávání elementů v DOM

JavaScript umožňuje programátorům pracovat s HTML elementy na stránce a manipulovat s nimi. Vyhledávání (nebo selektování, vybírání) DOM elementů je nejdůležitější operace, kterou je třeba umět.

Můžeme vybírat elementy na stránce například podle těchto kriterii,

• podle toho zda obsahují konkrétní třídu, ID nebo atribut
• podle tagu
• co obsahují určitý text

V závislosti na velikosti dokumentu a počtu prvků na stránce, které chcete vyhledat, můžeme volit metodu podle toho, která je efektivnější nebo vhodnější pro naše potřeby. V článku si jednotlivé způsoby rozebereme.

Vyhledání dotazem (query)

Programotorsky asi nejpohodlnějším a neojobecnějším způsobem jak vybrat elementy je přes query selectory - tzn. pomocí dotazu. Funkce querySelector() a querySelectorAll() fungují tak, že jim jako parametr předáte řetězec obsahující výraz podobný CSS selektoru, funkce projde DOM a najde DOM nody definované tímto výrazem.

Hlavní rozdíl mezi nimi je, že querySelector vrací pouze první element a nemusí tedy procházet celou stránku a funkce querySelectorAll vrací všechny elementy, které odpovídají selektoru.

const element = document.querySelector('#myId');
const elements = document.querySelectorAll('.myClass');

Vpodstatě byste si mohli vystačit jen s těmito selectory, protože zvládnou to stejné jako funkce getElement*, které si následně popíšeme. Nicméně ty jsou stále užitečné pro rychlý výběr prvků.

Využití atributů

Elementy mívají různé atributy. Například atribut class umožňuje elementu přiřadit jednu nebo více tříd, které mohou být použity ke stylování elementu pomocí CSS. Atribut id umožňuje HTML tagu přiřadit unikátní identifikátor (unikátní textový řetězec), který pak lze použít k vyhledání tohoto konkrétního elementu. Například element div s id

<div id="myId"></div>

Elementy s atributem id

Z hlediska výkonnosti je getElementById nejrychlejší z metod pro hledání elementu na stránce. Tato funkce přijímá jeden argument, kterým je unikátní identifikátor elementu. Funkce vrací vždy pouze jeden element a očekává se, že takový element bude na stánce jen jeden. Pokud je na stránce několik elementů se stejným identifikátorem, funkce vrátí pouze první element, který najde.

const element = document.getElementById('myId');

Elementy s atributem class

Jeho efektivita spočívá v tom, že se totiž dokument neprohledává, ale rovnou se vrací prvek z interní tabulky prohlížeče na základě odpovídajícího identifikátoru. Další způsob je hledání pomocí getElementsByClassName metody, která vrací pole (či kolekci) prvků s daným jménem třídy (nastaveným class atributem). Tento přístup je pomalejší než getElementById, protože prohledává celý dokument a vrací všechny prvky se zadaným názvem třídy.

const elements = document.getElementsByClassName('myClass');

Vyhledání podle tagů

Metoda getElementsByTagName vrací pole elementů které odpovídají zadanému HTML tag, který je argumentem funkce. Parametr funkce je vždy převeden na malé znaky.

Tato metoda prohledává celý dokument a vrací všechny prvky které vyhovují pravidlu.

const elements = document.getElementsByTagName('p');

Prohledávat v určitém kontextu

Všechny tyto metody jsou dostupné přes objekt document, který představuje celý DOM HTML stránky. Můžeme však použít tyto selectory k vyhledávání elementů pouze jen v určité části stránky, místo procházení celého dokumentu.

Pro použití selectorů na jiném elementu než na documentu, použijeme metodu querySelector na daném elementu.

Příklad

V tomto příkladu nejprve vyhledáme element formuláře pomocí funkce getElementById() a uložili jsme si ho do proměnné myForm. Poté jsme použili metodu querySelectorAll() na tomto elementu, abychom vyhledali všechny vstupní prvky (input) s atributem type nastaveným na "text". Výsledkem je kolekce prvků, kterou jsme uložili do proměnné inputs.

<form id="my-form">
  <label>
    Jméno:
    <input type="text" name="name">
  </label>
  <label>
    Heslo:
    <input type="password" name="password">
  </label>
  <button type="submit">Odeslat</button>
</form>

const myForm = document.getElementById('my-form');
const inputs = myForm.querySelectorAll('input[type="text"]');

console.log(inputs);
// Vypíše kolekci inputů s typem "text"