Jak procházet DOM

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

Úvod

Předchozí tutoriál v této sérii, Jak získat přístup k prvkům v DOM, popisuje, jak používat vestavěné metody document objekt pro přístup k prvkům HTML podle ID, třídy, názvu značky a selektorů dotazu. Víme, že DOM je strukturován jako strom uzlů s document uzel v kořenu a každý další uzel (včetně prvků, komentářů a textových uzlů) jako různé větve.

Často budete chtít procházet DOM, aniž byste předem specifikovali každý prvek. Naučit se procházet nahoru a dolů ve stromu DOM a přecházet z větve do větve je zásadní pro pochopení toho, jak pracovat s JavaScriptem a HTML.

V tomto tutoriálu si projdeme, jak procházet DOM (také známý jako chůze nebo navigace DOM) s vlastnostmi rodiče, potomka a sourozence.

Nastavení

Pro začátek vytvoříme nový soubor s názvem nodes.html skládající se z následujícího kódu.

<!DOCTYPE html>
<html>
  <head>
    <title>Learning About Nodes</title>

    <style>
      * {
        border: 2px solid #dedede;
        padding: 15px;
        margin: 15px;
      }
      html {
        margin: 0;
        padding: 0;
      }
      body {
        max-width: 600px;
        font-family: sans-serif;
        color: #333;
      }
    </style>
  </head>

  <body>
    <h1>Shark World</h1>
    <p>
      The world's leading source on <strong>shark</strong> related information.
    </p>
    <h2>Types of Sharks</h2>
    <ul>
      <li>Hammerhead</li>
      <li>Tiger</li>
      <li>Great White</li>
    </ul>
  </body>

  <script>
    const h1 = document.getElementsByTagName('h1')[0]
    const p = document.getElementsByTagName('p')[0]
    const ul = document.getElementsByTagName('ul')[0]
  </script>
</html>

Když načteme soubor do webového prohlížeče, uvidíme vykreslení, které vypadá jako následující snímek obrazovky.

V tomto příkladu webu máme dokument HTML s několika prvky. Některé základní CSS byly přidány do style tag, aby byl každý prvek zjevně viditelný, a v script bylo vytvořeno několik proměnných pro snadný přístup k několika prvkům. Protože existuje pouze jeden z každého h1 , p a ul , máme přístup k prvnímu indexu na každém příslušném getElementsByTagName vlastnost.

Kořenové uzly

document objekt je kořenem každého uzlu v DOM. Tento objekt je ve skutečnosti vlastností window objekt, což je globální objekt nejvyšší úrovně představující kartu v prohlížeči. window objekt má přístup k takovým informacím, jako je panel nástrojů, výška a šířka okna, výzvy a výstrahy. document sestává z toho, co je uvnitř vnitřního window .

Níže je tabulka skládající se z kořenových prvků, které bude obsahovat každý dokument. I když je do prohlížeče načten prázdný soubor HTML, tyto tři uzly budou přidány a analyzovány do DOM.

Vlastnost Uzel Typ uzlu
document #document DOCUMENT_NODE
document.documentElement html ELEMENT_NODE
document.head head ELEMENT_NODE
document.body body ELEMENT_NODE

Od html , head a body prvky jsou tak běžné, že mají na document své vlastní vlastnosti .

Otevřete Konzolu v DevTools a otestujte každou z těchto čtyř vlastností jejich odesláním a zobrazením výstupu. Můžete také otestovat h1 , p a ul který vrátí prvky díky proměnným, které jsme přidali do script tag.

Nadřazené uzly

Uzly v DOM se označují jako rodiče, děti a sourozenci v závislosti na jejich vztahu k ostatním uzlům. Rodič libovolného uzlu je uzel, který je o jednu úroveň nad ním nebo blíže k document v hierarchii DOM. Existují dvě vlastnosti pro získání rodiče — parentNode a parentElement .

Vlastnost Získá
parentNode Rodičovský uzel
parentElement Uzel nadřazeného prvku

V našem nodes.html příklad:

  • html je rodičem head , body a script .
  • body je rodič h1 , h2 , p a ul , ale ne li , od li je o dvě úrovně nižší než body .

Můžeme otestovat, co je rodičem našeho p prvek je s parentNode vlastnictví. Tento p proměnná pochází z našeho vlastního document.getElementsByTagName('p')[0] prohlášení.

p.parentNode;
Konzole
<body>
  ...
</body>

Rodič p je body , ale jak můžeme získat prarodiče, který je o dvě úrovně výše? Můžeme to udělat zřetězením vlastností dohromady.

p.parentNode.parentNode;
Konzole
<html>
  ...
</html>

Pomocí parentNode dvakrát jsme získali prarodiče p .

Existují vlastnosti k načtení rodiče uzlu, ale mezi nimi je pouze jeden malý rozdíl, jak ukazuje tento úryvek níže.

// Assign html object to html variable
const html = document.documentElement;

console.log(html.parentNode); // > #document
console.log(html.parentElement); // > null

Rodič téměř jakéhokoli uzlu je uzel prvku, protože text a komentáře nemohou být rodiči jiných uzlů. Nicméně rodič html je uzel dokumentu, tedy parentElement vrátí null . Obecně parentNode se častěji používá při procházení DOM.

Dětské uzly

děti uzlu jsou uzly, které jsou o jednu úroveň pod ním. Jakékoli uzly přesahující jednu úroveň vnoření se obvykle označují jako potomci.

Vlastnost Získá
childNodes Podřízené uzly
firstChild První podřízený uzel
lastChild Poslední podřízený uzel
children Podřízené uzly prvku
firstElementChild Uzel prvního podřízeného prvku
lastElementChild Uzel posledního podřízeného prvku

childNodes property vrátí aktuální seznam každého potomka uzlu. Můžete očekávat ul prvek, abyste získali tři li Prvky. Pojďme otestovat, co to načte.

ul.childNodes;
Konzole
;(7)[(text, li, text, li, text, li, text)]

Kromě tří li prvků, získá také čtyři textové uzly. Je to proto, že jsme napsali vlastní HTML (nevygeneroval JavaScript) a odsazení mezi prvky se v DOM počítá jako textové uzly. Toto není intuitivní, jako u prvků záložka DevTools odstraní prázdné uzly.

Pokud jsme se pokusili změnit barvu pozadí prvního podřízeného uzlu pomocí firstChild vlastnost, by selhal, protože první uzel je text.

ul.firstChild.style.background = 'yellow';
Konzole
Uncaught TypeError: Cannot set property 'background' of undefined

children , firstElementChild a lastElementChild V těchto typech situací existují vlastnosti pro načtení pouze uzlů prvků. ul.children vrátí pouze tři li prvky.

Pomocí firstElementChild , můžeme změnit barvu pozadí prvního li v ul .

ul.firstElementChild.style.background = 'yellow';

Když spustíte výše uvedený kód, vaše webová stránka bude aktualizována, aby upravila barvu pozadí.

Při provádění základní manipulace s DOM, jako je tomu v tomto příkladu, jsou vlastnosti specifické pro prvek mimořádně užitečné. Ve webových aplikacích generovaných JavaScriptem se pravděpodobněji použijí vlastnosti, které vybírají všechny uzly, protože v tomto případě nebudou existovat prázdné řádky a odsazení.

A for...of smyčku lze použít k iteraci všech children prvky.

for (let element of ul.children) {
  element.style.background = 'yellow';
}

Nyní bude mít každý podřízený prvek žluté pozadí.

Od našeho p element obsahuje text i prvky uvnitř, childNodes vlastnost je užitečná pro přístup k těmto informacím.

for (let element of p.childNodes) {
  console.log(element);
}
Konzole
"The world's leading source on "
<strong>​shark​</strong>​
" related information."

childNodes a children nevrací pole se všemi vlastnostmi a metodami Array, ale objevují se a chovají se podobně jako pole JavaScript. K uzlům můžete přistupovat podle čísla indexu nebo najít jejich length vlastnost.

document.body.children[3].lastElementChild.style.background = 'fuchsia';

Výše uvedený kód najde poslední podřízený prvek (li ) čtvrtého podřízeného prvku (ul ) z body a použijte styl.

Pomocí rodičovských a podřízených vlastností můžete načíst jakýkoli uzel v DOM.

Sourozenecké uzly

sourozenci uzlu jsou všechny uzly na stejné úrovni stromu v DOM. Sourozenci nemusí být stejného typu uzlů – textové, elementové a komentáře mohou být všechny sourozenci.

Vlastnost Získá
previousSibling Předchozí uzel sourozence
nextSibling Další sourozenecký uzel
previousElementSibling Předchozí uzel sourozeneckého prvku
nextElementSibling Další uzel sourozeneckého prvku

Sourozenecké vlastnosti fungují stejným způsobem jako podřízené uzly v tom, že existuje sada vlastností pro procházení všemi uzly a sada vlastností pouze pro uzly prvků. previousSibling a nextSibling získá další uzel, který bezprostředně předchází nebo následuje zadaný uzel, a previousElementSibling a nextElementSibling získá pouze uzly prvků.

V našem nodes.html například vyberte prostřední prvek ul .

const tiger = ul.children[1];

Vzhledem k tomu, že jsme vytvořili náš DOM od nuly a ne jako webovou aplikaci v JavaScriptu, budeme muset použít vlastnosti sourozeneckého prvku pro přístup k uzlům předchozího a dalšího prvku, protože v DOM je prázdné místo.

tiger.nextElementSibling.style.background = 'coral';
tiger.previousElementSibling.style.background = 'aquamarine';

Spuštěním tohoto kódu by se mělo použít coral na pozadí Hammerhead a aquamarine na pozadí Great White .

Sourozenecké vlastnosti mohou být zřetězeny, stejně jako rodičovské vlastnosti a vlastnosti uzlu.

Závěr

V tomto tutoriálu jsme se zabývali tím, jak přistupovat ke kořenovým uzlům každého dokumentu HTML a jak procházet stromem DOM prostřednictvím rodičovských, podřízených a sourozeneckých vlastností.

S tím, co jste se naučili v Jak získat přístup k prvkům v DOM a v tomto tutoriálu, byste měli být schopni s jistotou přistupovat k jakémukoli uzlu v DOM jakékoli webové stránky.