logo

Úvod do DOM

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

Úvod

Objektový model dokumentu , obvykle označovaný jako DOM , je nezbytnou součástí vytváření interaktivních webových stránek. Jedná se o rozhraní, které umožňuje programovacímu jazyku manipulovat s obsahem, strukturou a stylem webové stránky. JavaScript je skriptovací jazyk na straně klienta, který se připojuje k DOM v internetovém prohlížeči.

Téměř kdykoli webová stránka provede nějakou akci, jako je rotace mezi prezentací obrázků, zobrazení chyby, když se uživatel pokusí odeslat neúplný formulář, nebo přepnutí navigační nabídky, je to výsledek přístupu JavaScriptu a manipulace s DOM. V tomto článku se dozvíme, co je DOM, jak pracovat s document objekt a rozdíl mezi zdrojovým kódem HTML a DOM.

Předpoklady

Aby bylo možné efektivně porozumět DOM a jeho vztahu k práci s webem, je nutné mít stávající znalosti HTML a CSS. Je také užitečné znát základní syntaxi JavaScriptu a strukturu kódu.

Co je DOM?

Na nejzákladnější úrovni se webová stránka skládá z dokumentu HTML. Prohlížeč, který používáte k prohlížení webu, je program, který interpretuje HTML a CSS a vykresluje styl, obsah a strukturu stránky, kterou vidíte.

Kromě analýzy stylu a struktury HTML a CSS vytváří prohlížeč reprezentaci dokumentu známou jako Document Object Model. Tento model umožňuje JavaScriptu přístup k textovému obsahu a prvkům dokumentu webu jako objekty .

JavaScript je interaktivní jazyk a je snazší porozumět novým konceptům. Pojďme vytvořit velmi jednoduchý web. Vytvořte index.html a uložte jej do nového adresáře projektu.

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

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

Tento kód je známým zdrojem HTML nové kostry webu. Obsahuje absolutně nejpodstatnější aspekty webového dokumentu – doctype a html tag s head a body vnořeno uvnitř.

Otevřete index.html s vámi zvoleným prohlížečem. Uvidíte jednoduchou webovou stránku s naším záhlavím zobrazujícím „Objektový model dokumentu“. Klikněte pravým tlačítkem kamkoli na stránku a vyberte „Zkontrolovat“. Tím otevřete Nástroje pro vývojáře.

V části Prvky kartu, uvidíte DOM.

V tomto případě vypadá úplně stejně jako zdrojový kód HTML, který jsme právě napsali – doctype a několik dalších HTML tagů, které jsme přidali. Umístěním kurzoru na každý prvek zvýrazníte příslušný prvek na vykresleném webu. Malé šipky nalevo od prvků HTML umožňují přepínat zobrazení vnořených prvků.

Objekt dokumentu

document objekt je vestavěný objekt, který má mnoho vlastností a metody které můžeme použít k přístupu a úpravě webových stránek. Abyste pochopili, jak pracovat s DOM, musíte pochopit, jak objekty fungují v JavaScriptu. Pokud se necítíte dobře s konceptem objektů, projděte si porozumění objektům v JavaScriptu.

V Nástrojích pro vývojáře na index.html , přejděte do Konzole tab. Zadejte document do konzole a stiskněte ENTER . Uvidíte, že výstup je stejný jako to, co vidíte v Prvcích kartu.

document;
Konzole
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Learning the DOM</title>
  </head>

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

Zadáním document a jinak práce přímo v konzole není něco, co byste obvykle dělali mimo ladění, ale pomáhá to upevnit přesně to, co document objekt je a jak jej upravit, jak zjistíme níže.

Jaký je rozdíl mezi zdrojovým kódem DOM a HTML?

V současné době se v tomto příkladu zdá, že zdrojový kód HTML a DOM jsou přesně to samé. Existují dva případy, kdy se DOM vygenerovaný prohlížečem bude lišit od zdrojového kódu HTML:

  • DOM je upraven JavaScriptem na straně klienta
  • Prohlížeč automaticky opravuje chyby ve zdrojovém kódu

Pojďme si ukázat, jak lze upravit DOM pomocí JavaScriptu na straně klienta. Do konzoly zadejte následující:

document.body;

Konzole odpoví tímto výstupem:

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

document je objekt, body je vlastnost tohoto objektu, ke které jsme přistupovali pomocí tečkové notace. Odesílání document.body do konzole vypíše body prvek a vše v něm.

V konzoli můžeme změnit některé živé vlastnosti body objekt na tomto webu. Upravíme style atribut, změní barvu pozadí na fuchsia . Zadejte toto do konzoly:

document.body.style.backgroundColor = 'fuchsia';

Po zadání a odeslání výše uvedeného kódu uvidíte aktuální aktualizaci webu se změnou barvy pozadí.

Přepnutí na Prvky tab nebo zadáním document.body znovu do konzole, uvidíte, že se DOM změnil.

Konzole
<body style="background-color: fuchsia;">
  <h1>Document Object Model</h1>
</body>

Kód JavaScript, který jsme zadali, s přiřazením fuchsia na barvu pozadí body , je nyní součástí DOM.

Klikněte však na stránku pravým tlačítkem a vyberte „Zobrazit zdrojový kód stránky“. Všimnete si, že zdroj webu není obsahovat nový atribut stylu, který jsme přidali prostřednictvím JavaScriptu. Zdroj webu se nezmění a nikdy nebude ovlivněn JavaScriptem na straně klienta. Pokud stránku obnovíte, nový kód, který jsme přidali do konzole, zmizí.

Dalším případem, kdy DOM může mít jiný výstup než zdrojový kód HTML, je chyba ve zdrojovém kódu. Jedním z běžných příkladů je table tag - tbody značka je vyžadována uvnitř table , ale vývojáři jej často do svého HTML nezahrnou. Prohlížeč automaticky chybu opraví a přidá tbody , upravující DOM. DOM také opraví značky, které nebyly uzavřeny.

Závěr

V tomto tutoriálu jsme definovali DOM, přistoupili k document objekt, použil JavaScript a konzoli k aktualizaci vlastnosti document objekt a prošel rozdíl mezi zdrojovým kódem HTML a DOM. Podrobnější informace o DOM najdete na stránce Document Object Model (DOM) na Mozilla Developer Network.

V dalším tutoriálu si zopakujeme důležitou terminologii HTML, seznámíme se se stromem DOM, zjistíme, co jsou to uzly, seznámíme se s nejběžnějšími typy uzlů a začneme vytvářet interaktivní skripty pomocí JavaScriptu.