Jak vybrat prvky DOM pomocí JavaScriptu

Document Object Model (DOM) je programovací rozhraní pro HTML a XML dokumenty vytvořené prohlížečem po načtení dokumentu. Webová stránka je v podstatě dokument reprezentovaný DOM jako uzly a objekty. Umožňuje programům manipulovat s obsahem, strukturou a styly dokumentu.

V tomto tutoriálu se naučíme, jak používat JavaScript pro přístup k různým uzlům (prvkům HTML) v DOM. Začněme první metodou:získání prvku podle ID.

Získat prvek podle ID

document 's getElementById() metoda bere ID prvku jako vstup a vrací Element objekt představující prvek DOM. Zde je příklad:

<div id="unicorn">🦄</div>

Zde je návod, jak můžeme získat výše uvedený <div> prvku pomocí jeho ID:

const unicorn = document.getElementById('unicorn');

ID rozlišuje malá a velká písmena a jedinečné v celém HTML dokumentu. Tato metoda tedy vždy vrací jeden prvek. Pokud není nalezen žádný odpovídající prvek, vrátí null .

Získat prvky podle názvu značky

getElementsByTagName() metoda se používá pro přístup k více prvkům. Vezme název značky jako vstup a vrátí všechny prvky DOM, které odpovídají názvu značky, jako HTMLCollection :

<p>🐱</p>
<p>🐰</p>
<p>🐯</p>
<p>🐧</p>

JavaScript kód pro přístup ke všem <p> prvky:

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

Tato metoda prohledává vždy pouze jeden název značky. Ale pokud předáte * jako název značky získáte všechny prvky v DOM:

const allNodes = document.getElementsByTagName('*');

Získat prvky podle názvu

getElementsByName() metoda se používá k získání kolekce prvků podle jejich name atribut a vrátí objekt NodeList:

<input type="text" name="email">
<input type="tel" name="phone">
<input type="date" name="dob">

Získáme všechny prvky s názvem email :

const emails = document.getElementsByName('email');

Získat prvky podle názvu třídy

Chcete použít class atribut získat seznam odpovídajících prvků? Můžete použít getElementsByClassName() metoda, stačí jí předat název třídy (bez . ) a vrátí HTMLCollection všech prvků DOM, které mají daný název třídy:

<div class="bird owl">🦉</div>
<div class="bird">🐦</div>
<div class="bird eagle">🦅</div>
<div class="animal cat">🐱</div>

Pojďme získat všechny bird 's:

const birds = document.getElementsByClassName('bird');

Tato metoda také přijímá více názvů tříd oddělených mezerami. Získejte všechny prvky, které mají obě bird a eagle třídy:

const eagle = document.getElementsByClassName('bird eagle');

Výběr dotazů

querySelector() metoda je jednou ze dvou moderních metod JavaScriptu, které umožňují získat prvky z DOM na základě selektorů CSS. Stačí zadat selektor CSS a získáte první prvek, který odpovídá zadanému selektoru. Pokud neexistují žádné shody, vrátí null . Zde je příklad:

const email = document.querySelector('#signup input[name="email"]');

Výběr všech dotazů

Chcete vybrat seznam prvků, které odpovídají zadaným selektorům? Použijte querySelectorAll() místo toho. Tato metoda bere jako vstup více selektorů CSS a vrací NodeList – seznam prvků DOM, které odpovídají daným selektorům. Vyberme všechny prvky s třídou buď bird nebo animal z výše uvedeného označení HTML:

const elems = document.querySelectorAll('.bird, .animal');
console.log(elems.length); // 4

Řezení funkcí

Můžete také zřetězit více funkcí dohromady a hledat prvky v jiném prvku. Nejprve musíte vybrat jeden prvek pomocí buď getElementById() nebo querySelector() a poté zřetězení další funkce pro vyhledávání v:

<form id="signup">
    <input type="text" name="email">
    <input type="tel" name="phone">
    <input type="date" name="date-of-birth">
</form>

Získejte všech input prvků uvnitř prvku, který má ID signup :

const inputs = document.getElementById('signup').getElementsByTagName('input');
// OR
const inputs = document.querySelector('#signup').querySelectorAll('input');

Procházení HTMLCollection a NodeList

Většina metod, které jsme probrali výše (kromě getElementById() a querySelector() ) vrátí více prvků buď jako HTMLCollection nebo NodeList .

HTMLCollection není pole, ale obecná sbírka prvků. Není tedy možné přes něj iterovat pomocí forEach() nebo map() . Můžeme jej však převést na skutečné pole a poté iterovat pomocí Array.from() metoda:

const inputs = document.getElementById('signup').getElementsByTagName('input');
// iterate over HTMLCollection
Array.from(inputs).forEach(element => {
    console.log(element);
});

Ačkoli NodeList také není pole, ale poskytuje forEach() metoda iterace přes prvky:

const inputs = document.querySelector('#signup').querySelectorAll('input');
//iterate over NodeList
inputs.forEach(element => {
    console.log(element);
});

Závěr

To je vše pro získání prvků DOM pomocí JavaScriptu. Naučili jsme se tolik různých metod přístupu k prvkům DOM:pomocí id atribut, název značky HTML, name atribut, class selektory atributů a CSS. Také jsme diskutovali o způsobech iterace přes obecnou kolekci prvků vrácených těmito metodami.