logo

Jak získat přístup k prvkům v DOM

Tento článek byl původně napsán pro DigitalOcean .

Úvod

V Porozumění stromu a uzlům DOM jsme prošli, jak je DOM strukturován jako strom objektů nazývaných uzly a že uzly mohou být text, komentáře nebo prvky. Obvykle, když přistupujeme k obsahu v DOM, bude to prostřednictvím uzlu prvku HTML.

Abyste byli zběhlí v přístupu k prvkům v DOM, je nutné mít pracovní znalost selektorů CSS, syntaxe a terminologie a také rozumět prvkům HTML. V tomto tutoriálu si projdeme několik způsobů přístupu k prvkům v DOM:pomocí ID, třídy, tagu a selektorů dotazů.

Přehled

Zde je tabulkový přehled pěti metod, kterými se budeme v tomto tutoriálu zabývat.

Získává Syntaxe selektoru Metoda
ID #demo getElementById()
Třída .demo getElementsByClassName()
Značka demo getElementsByTagName()
Výběr (jeden) querySelector()
Výběr (vše) querySelectorAll()

Při studiu DOM je důležité psát příklady na svém počítači, abyste se ujistili, že rozumíte a uchováte si informace, které se naučíte.

Tento soubor HTML, access.html, můžete uložit , na svůj vlastní projekt, abyste prošli příklady spolu s tímto článkem. Pokud si nejste jisti, jak pracovat s JavaScriptem a HTML lokálně, přečtěte si náš návod Jak přidat JavaScript do HTML.

access.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Accessing Elements in the DOM</title>

    <style>
      html {
        font-family: sans-serif;
        color: #333;
      }
      body {
        max-width: 500px;
        margin: 0 auto;
        padding: 0 15px;
      }
      div,
      article {
        padding: 10px;
        margin: 5px;
        border: 1px solid #dedede;
      }
    </style>
  </head>

  <body>
    <h1>Accessing Elements in the DOM</h1>

    <h2>ID (#demo)</h2>
    <div id="demo">Access me by ID</div>

    <h2>Class (.demo)</h2>
    <div class="demo">Access me by class (1)</div>
    <div class="demo">Access me by class (2)</div>

    <h2>Tag (article)</h2>
    <article>Access me by tag (1)</article>
    <article>Access me by tag (2)</article>

    <h2>Query Selector</h2>
    <div id="demo-query">Access me by query</div>

    <h2>Query Selector All</h2>
    <div class="demo-query-all">Access me by query all (1)</div>
    <div class="demo-query-all">Access me by query all (2)</div>
  </body>
</html>

V tomto HTML souboru máme mnoho prvků, ke kterým budeme přistupovat s různými document metody. Když vykreslíme soubor v prohlížeči, bude vypadat podobně jako toto:

K přístupu k dostupným prvkům v souboru použijeme různé metody, které jsme nastínili v Přehledu výše.

Přístup k prvkům podle ID

Nejjednodušší způsob, jak získat přístup k jednomu prvku v DOM, je pomocí jeho jedinečného ID. Můžeme zachytit prvek podle ID pomocí getElementById() metoda document objekt.

document.getElementById()

Aby byl prvek HTML zpřístupněn pomocí ID, musí mít id atribut. Máme div prvek s ID demo .

<div id="demo">Access me by ID</div>

V Konzoli , získáme prvek a přiřadíme jej k demoId proměnná.

const demoId = document.getElementById('demo');

Protokolování demoId do konzole vrátí celý náš HTML element.

console.log(demoId);
Konzole
<div id="demo">Access me by ID</div>

Změnou border si můžeme být jisti, že přistupujeme ke správnému prvku vlastnost na purple .

demoId.style.border = '1px solid purple';

Jakmile tak učiníme, naše aktivní stránka bude vypadat takto:

Přístup k prvku pomocí ID je efektivní způsob, jak rychle získat prvek v DOM. Má však nevýhody; ID musí být pro stránku vždy jedinečné, a proto budete mít vždy přístup pouze k jednomu prvku najednou pomocí getElementById() metoda. Pokud byste chtěli přidat funkci k mnoha prvkům na stránce, váš kód by se rychle stal opakujícím se.

Přístup k prvkům podle třídy

Atribut třídy se používá pro přístup k jednomu nebo více konkrétním prvkům v DOM. Všechny prvky s daným názvem třídy můžeme získat pomocí getElementsByClassName() metoda.

document.getElementsByClassName()

Nyní chceme přistupovat k více než jednomu prvku a v našem příkladu máme dva prvky s demo třída.

<div class="demo">Access me by class (1)</div>
<div class="demo">Access me by class (2)</div>

Pojďme k našim prvkům v Konzoli a vložte je do proměnné s názvem demoClass .

const demoClass = document.getElementsByClassName('demo');

V tomto okamžiku si můžete myslet, že můžete upravit prvky stejným způsobem, jako jste to udělali v příkladu ID. Pokud se však pokusíme spustit následující kód a změnit border vlastnost demo prvků třídy na oranžovou, dostaneme chybu.

demoClass.style.border = '1px solid orange';
Konzole
Uncaught TypeError: Cannot set property 'border' of undefined

Důvod, proč to nefunguje, je ten, že místo pouhého získání jednoho prvku máme objekt prvků podobný poli.

console.log(demoClass);
Konzole
(2) [div.demo, div.demo]

Pole JavaScriptu musí být přístupné s číslem indexu. Můžeme tedy změnit první prvek tohoto pole pomocí indexu 0 .

demoClass[0].style.border = '1px solid orange';

Obecně při přístupu k prvkům podle třídy chceme použít změnu na všechny prvky v dokumentu s touto konkrétní třídou, ne pouze na jednu. Můžeme to udělat vytvořením for smyčka a procházení každé položky v poli.

for (i = 0; i < demoClass.length; i++) {
  demoClass[i].style.border = '1px solid orange';
}

Když spustíme tento kód, naše aktivní stránka se vykreslí takto:

Nyní jsme vybrali každý prvek na stránce, který má demo třídu a změnil border vlastnost na orange .

Přístup k prvkům podle značky

Méně specifickým způsobem přístupu k více prvkům na stránce by byl název značky HTML. K prvku přistupujeme po značce s getElementsByTagName() metoda.

document.getElementsByTagName()

V našem příkladu značky používáme article prvky.

<article>Access me by tag (1)</article>
<article>Access me by tag (2)</article>

Stejně jako při přístupu k prvku pomocí jeho třídy getElementsByTagName() vrátí objekt prvků podobný poli a každou značku v dokumentu můžeme upravit pomocí for smyčka.

const demoTag = document.getElementsByTagName('article');

for (i = 0; i < demoTag.length; i++) {
  demoTag[i].style.border = '1px solid blue';
}

Po spuštění kódu bude aktivní stránka upravena takto:

Smyčka změnila border vlastnost všech article prvků na blue .

Výběry dotazů

Pokud máte nějaké zkušenosti s jQuery API, možná znáte metodu jQuery pro přístup k DOM pomocí CSS selektorů.

$('#demo') // returns the demo ID element in jQuery

Totéž můžeme udělat v prostém JavaScriptu s querySelector() a querySelectorAll() metody.

document.querySelector()
document.querySelectorAll()

Pro přístup k jednomu prvku použijeme querySelector() metoda. V našem souboru HTML máme demo-query prvek

<div id="demo-query">Access me by query</div>

Selektor pro id atribut je symbol hash (# ). Prvku můžeme přiřadit pomocí demo-query id na demoQuery proměnná.

const demoQuery = document.querySelector('#demo-query');

V případě selektoru s více prvky, jako je třída nebo značka, querySelector() vrátí první prvek, který odpovídá dotazu. Můžeme použít querySelectorAll() metoda pro shromáždění všech prvků, které odpovídají konkrétnímu dotazu.

V našem vzorovém souboru máme dva prvky s demo-query-all třída, která se na ně vztahuje.

<div class="demo-query-all">Access me by query all (1)</div>
<div class="demo-query-all">Access me by query all (2)</div>

Selektor pro class atribut je tečka nebo tečka (. ), takže ke třídě můžeme přistupovat pomocí .demo-query-all .

const demoQueryAll = document.querySelectorAll('.demo-query-all');

Pomocí forEach() můžeme použít barvu green na border vlastnost všech odpovídajících prvků.

demoQueryAll.forEach(query => {
  query.style.border = '1px solid green';
});

S querySelector() , hodnoty oddělené čárkami fungují jako operátor OR. Například querySelector('div, article') bude odpovídat div nebo article , podle toho, co se v dokumentu objeví jako první. S querySelectorAll() , hodnoty oddělené čárkami fungují jako operátor AND a querySelectorAll('div, article') bude odpovídat všem div a article hodnoty v dokumentu.

Použití metod selektoru dotazů je extrémně výkonné, protože můžete přistupovat k jakémukoli prvku nebo skupině prvků v DOM stejným způsobem jako v souboru CSS. Úplný seznam selektorů naleznete v části Selektory CSS na Mozilla Developer Network.

Úplný kód JavaScript

Níže je kompletní scénář práce, kterou jsme provedli výše. Můžete jej použít pro přístup ke všem prvkům na naší vzorové stránce. Uložte soubor jako access.js a načtěte jej do souboru HTML těsně před závěrečnou body tag.

access.html
// Assign all elements
const demoId = document.getElementById('demo')
const demoClass = document.getElementsByClassName('demo')
const demoTag = document.getElementsByTagName('article')
const demoQuery = document.querySelector('#demo-query')
const demoQueryAll = document.querySelectorAll('.demo-query-all')

// Change border of ID demo to purple
demoId.style.border = '1px solid purple'

// Change border of class demo to orange
for (i = 0; i < demoClass.length; i++) {
  demoClass[i].style.border = '1px solid orange'
}

// Change border of tag demo to blue
for (i = 0; i < demoTag.length; i++) {
  demoTag[i].style.border = '1px solid blue'
}

// Change border of ID demo-query to red
demoQuery.style.border = '1px solid red'

// Change border of class query-all to green
demoQueryAll.forEach((query) => {
  query.style.border = '1px solid green'
})

Můžete pokračovat v práci na těchto souborech šablon a provést další změny pomocí přístupu k prvkům HTML.

Závěr

V tomto tutoriálu jsme prošli 5 způsoby přístupu k prvkům HTML v DOM – podle ID, třídy, názvu značky HTML a selektoru. Metoda, kterou použijete k získání prvku nebo skupiny prvků, bude záviset na podpoře prohlížeče a na tom, s kolika prvky budete manipulovat. Nyní byste měli mít jistotu přístupu k jakémukoli prvku HTML v dokumentu s JavaScriptem prostřednictvím DOM.