logo

Pochopení stromu DOM a uzlů

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

DOM je často označován jako strom DOM a skládá se ze stromu objektů nazývaných uzly . V Úvodu do DOM jsme si prošli, co je to Document Object Model (DOM), jak přistupovat k document objekt a upravovat jeho vlastnosti pomocí konzoly a rozdíl mezi zdrojovým kódem HTML a DOM.

V tomto tutoriálu si zopakujeme terminologii HTML, která je nezbytná pro práci s JavaScriptem a DOM, a naučíme se o stromu DOM, co jsou uzly a jak identifikovat nejběžnější typy uzlů. Nakonec se přesuneme za konzoli a vytvoříme program JavaScript pro interaktivní úpravu DOM.

Terminologie HTML

Pochopení terminologie HTML a JavaScriptu je nezbytné pro pochopení toho, jak pracovat s DOM. Pojďme si krátce zopakovat terminologii HTML.

Pro začátek se podívejme na tento HTML element.

<a href="index.html">Home</a>

Zde máme kotevní prvek, což je odkaz na index.html .

  • a je tag
  • href je atribut
  • index.html je hodnota atributu
  • Home je text .

Vše mezi úvodní a závěrečnou značkou dohromady tvoří celý prvek HTML .

Budeme pracovat s index.html z předchozího tutoriálu:

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Learning the DOM</title>
  </head>

  <body>
    <h1>Document Object Model</h1>
  </body>
</html>

Nejjednodušší způsob přístupu k prvku pomocí JavaScriptu je pomocí id atribut. Pojďme přidat odkaz, který máme výše, do našeho index.html soubor s id z nav .

index.html
<a id="nav" href="index.html">Home</a>

Načtěte nebo znovu načtěte stránku v okně prohlížeče a podívejte se na DOM, abyste se ujistili, že byl kód aktualizován.

Budeme používat getElementById() způsob přístupu k celému prvku. V konzole zadejte následující:

document.getElementById('nav');
Konzole
<a id="nav" href="index.html">Home</a>

Získali jsme celý prvek pomocí getElementById() . Nyní místo psaní tohoto objektu a metody pokaždé, když chceme získat přístup k nav odkaz, můžeme prvek umístit do proměnné, abychom s ním snáze pracovali.

let navLink = document.getElementById('nav');

navLink proměnná obsahuje náš kotevní prvek. Odtud můžeme snadno upravovat atributy a hodnoty. Můžeme například změnit umístění odkazu změnou href atribut:

navLink.href = 'https://www.wikipedia.org';

Můžeme také změnit obsah textu změnou přiřazení textContent vlastnost:

navLink.textContent = 'Navigate to Wikipedia';

Nyní, když si prohlížíme náš prvek, buď v konzole, nebo zaškrtnutím Elements tag, můžeme vidět, jak byl prvek aktualizován.

navLink;
<a id="nav" href="https://www.wikipedia.org/">Navigate to Wikipedia</a>

To se také odráží na front-endu webu.

Obnovením stránky se vše vrátí zpět na původní hodnoty.

V tomto bodě byste měli pochopit, jak používat document metoda přístupu k prvku, jak přiřadit prvek k proměnné a jak upravit vlastnosti a hodnoty v prvku.

Strom a uzly DOM

Všechny položky v DOM jsou definovány jako uzly . Existuje mnoho typů uzlů, ale jsou tři hlavní, se kterými pracujeme nejčastěji:

  • Prvek uzly
  • Text uzly
  • Komentář uzly

Když je prvek HTML položkou v modelu DOM, označuje se jako uzel prvku . Jakýkoli osamocený text mimo prvek je textový uzel a komentář HTML je uzel komentáře . Kromě těchto tří typů uzlů je to document sám o sobě je dokument uzel, který je kořenem všech ostatních uzlů.

DOM se skládá ze stromu struktura vnořených uzlů, která je často označována jako strom DOM . Možná znáte rodokmen předků, který se skládá z rodičů, dětí a sourozenců. Uzly v DOM se také označují jako rodiče, děti a sourozenci v závislosti na jejich vztahu k ostatním uzlům.

Pro demonstraci vytvořte nodes.html soubor. Přidáme text, komentář a uzly prvků.

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

  <body>
    <h1>An element node</h1>
    <!-- a comment node -->
    A text node.
  </body>
</html>

html element uzel je nadřazený uzel. head a body jsou sourozenci, děti html . body obsahuje tři podřízené uzly, což jsou všichni sourozenci – typ uzlu nemění úroveň, na které je vnořen.

Identifikace typu uzlu

Každý uzel v dokumentu má typ uzlu , ke kterému se přistupuje přes nodeType vlastnictví. Mozilla Developer Network má aktuální seznam všech konstant typu uzlů. Níže je tabulka nejběžnějších typů uzlů, se kterými pracujeme v tomto tutoriálu.

Typ uzlu Hodnota Příklad
ELEMENT_NODE 1 <body> prvek
TEXT_NODE 3 Text, který není součástí prvku
COMMENT_NODE 8 <!-- an HTML comment -->

V části Prvky na kartě Vývojářské nástroje si můžete všimnout, že kdykoli kliknete na libovolný řádek v DOM a zvýrazníte jej, hodnota == $0 se objeví vedle něj. Toto je velmi praktický způsob, jak získat přístup k aktuálně aktivnímu prvku v Nástrojích pro vývojáře zadáním $0 .

V konzole nodes.html , klikněte na první prvek v body , což je h1 prvek.

V konzole získejte typ uzlu aktuálně vybraného uzlu s nodeType vlastnost.

$0.nodeType;
Konzole
1

Pomocí h1 vybraný prvek, uvidíte 1 jako výstup, který můžeme vidět, koreluje s ELEMENT_NODE . Udělejte totéž pro text a komentář a vygenerují 3 a 8 respektive.

Když víte, jak přistupovat k prvku, můžete vidět typ uzlu, aniž byste prvek zvýraznili v DOM.

document.body.nodeType;
Konzole
1

Kromě nodeType , můžete také použít nodeValue vlastnost k získání hodnoty textu nebo uzlu komentáře a nodeName získat název tagu prvku.

Úprava modelu DOM pomocí událostí

Doposud jsme viděli, jak upravit DOM v konzole, což, jak jsme viděli, je dočasné; při každém obnovení stránky se změny ztratí. V úvodu do kurzu DOM jsme použili konzoli k aktualizaci barvy pozadí těla. Můžeme zkombinovat to, co jsme se naučili v tomto tutoriálu, a vytvořit interaktivní tlačítko, které to udělá po kliknutí.

Vraťme se k našemu index.html a přidejte button prvek s id . Také přidáme odkaz na nový soubor v novém js adresář js/scripts.js .

index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Learning the DOM</title>
  </head>

  <body>
    <h1>Document Object Model</h1>
    <button id="changeBackground">Change Background Color</button>

    <script src="js/script.js"></script>
  </body>
</html>

Událost v JavaScriptu je akce, kterou uživatel provedl. Když uživatel najede myší na prvek, klikne na prvek nebo stiskne určitou klávesu na klávesnici, jedná se o všechny typy událostí. V tomto konkrétním případě chceme, aby naše tlačítko poslouchalo a bylo připraveno provést akci, když na něj uživatel klikne. Toho lze dosáhnout přidáním posluchače událostí na naše tlačítko.

Vytvořte scripts.js a uložte jej do nového js adresář. V souboru nejprve najdeme button element a přiřadit jej k proměnné.

scripts.js
let button = document.getElementById('changeBackground')

Pomocí addEventListener() způsob, řekneme tlačítku, aby poslouchalo kliknutí a po kliknutí provedlo funkci.

scripts.js
button.addEventListener('click', () => {
  // action will go here
})

Nakonec uvnitř funkce napíšeme stejný kód z předchozího tutoriálu, abychom změnili barvu pozadí na fuchsia .

scripts.js
document.body.style.backgroundColor = 'fuchsia'

Zde je celý náš skript:

scripts.js
let button = document.getElementById('changeBackground')

button.addEventListener('click', () => {
  document.body.style.backgroundColor = 'fuchsia'
})

Po uložení tohoto souboru obnovte index.html v prohlížeči. Klikněte na tlačítko a událost se spustí.

Barva pozadí stránky se změnila na fuchsiovou kvůli události JavaScriptu.

Závěr

V tomto tutoriálu jsme si prošli terminologii, která nám umožní porozumět a upravit DOM. Zjistili jsme, jak je DOM strukturován jako strom uzlů, které budou obvykle tvořit prvky HTML, text nebo komentáře, a vytvořili jsme skript, který umožní uživateli upravit web, aniž by musel ručně zadávat kód do vývojářské konzole.