Porozumění modelu DOM (Object Object Model) v podrobnostech

Všichni jsme o tom slyšeli DOM, nebo Objektový model dokumentu, který se občas zmiňuje, týkající se JavaScriptu. DOM je velmi důležitý koncept ve vývoji webu. Bez ní bychom nebyli schopni dynamicky upravovat stránky HTML v prohlížeči.

Učení a pochopení DOM vede k lepšímu způsobu přístupu, změny a monitorování prvky HTML stránky. Také nám může pomoci Model dokumentu omezit zbytečné zvyšování doby provádění skriptů.

Stromy datové struktury

Než začneme mluvit o tom, co je DOM, jak to vzniká, jak existuje a co se děje uvnitř, chci, abyste věděli o stromech. Ne jehličnatého a listnatého druhu, ale o strom struktury dat.

Je mnohem snazší pochopit koncept datových struktur, pokud zjednodušíme jeho definici. Řekl bych, že se jedná o datovou strukturu uspořádání vašich dat. Ano, jen obyčejné staré uspořádání, protože byste si zařídili nábytek ve svém domě nebo knihy v polici nebo ve všech různých skupinách potravin, které máte k jídlu na talíři, aby aby to bylo smysluplné.

Samozřejmě, že to není vše, co je datová struktura, ale to je skoro tam, kde to všechno začíná. Tento “uspořádání” je jádrem všeho. Je to také důležité v DOM. Ale o DOM ještě nemluvíme, tak mě dovedu řídit směrem k datová struktura, kterou můžete znát: pole.

Pole a stromy

Pole mají indexy a délka, oni mohou být multidimenzionální, a mají mnohem více vlastností. Stejně důležité je vědět tyto věci o polích, teď se tím neobtěžujme. Pro nás je pole velmi jednoduché. Je to, když vy uspořádat různé věci v řadě.

Podobně, když přemýšlíme o stromech, řekněme, je to asi dávat věci pod sebe, začátek jen s jednou věcí nahoře.

Teď si můžete vzít jedinou linku kachen z minulosti, otočte ho vzpřímeně, a řekni mi to “teď, každá kachna je pod další kachnou”. Je to strom? to je.

V závislosti na tom, co vaše data jsou nebo jak budete používat, nejvyšší data ve vašem stromu (tzv. vykořenit) může být něco, co je velmi důležité nebo něco, co je jen tam uzavřete další prvky pod ním.

Ať tak či onak, nejvyšší prvek ve stromové struktuře dat dělá něco velmi důležitého. Poskytuje místo začněte hledat informace, které chceme ze stromu extrahovat.

Význam DOM

DOM znamená Objektový model dokumentu. Dokument odkazuje na dokument HTML (XML) který je reprezentován jako objekt. (V JavaScriptu může být vše pouze reprezentováno jako objekt!)

Model je vytvořené prohlížečem který vezme dokument HTML a vytvoří objekt, který jej reprezentuje. K tomuto objektu můžeme přistupovat pomocí JavaScriptu. A protože tento objekt používáme k manipulaci s HTML dokumentem a vytváření vlastních aplikací, DOM je v zásadě API.

Strom DOM

V kódu JavaScriptu je dokument HTML reprezentován jako objekt. Všechna data čtená z tohoto dokumentu jsou také uloženy jako objekty, vnořené pod sebou (protože jak jsem již řekl, v JavaScriptu může být vše jen reprezentováno jako objekty).

Takže toto je v podstatě fyzické uspořádání DOM dat v kódu: všechno je uspořádány jako objekty. Logicky však, je to strom.

Analyzátor DOM

Každý prohlížeč má program nazvaný Analyzátor DOM který je zodpovědný analyzování HTML dokumentu do DOM.

Prohlížeče číst stránku HTML a převést data do objektů, které tvoří DOM. Informace přítomné v těchto objektech JavaScriptu JavaScript jsou logicky uspořádány jako strom datové struktury známý jako strom DOM.

Analyzování dat z HTML do DOM stromu

Vezměte jednoduchý HTML soubor. Má to kořenový prvek . To je dílčích prvků jsou a , každý má mnoho vlastních dětských prvků.

Takže v podstatě prohlížeč čte data v dokumentu HTML, něco podobného tomuto:

A, uspořádá je do DOM stromu takhle:

Reprezentace každého elementu HTML (a jeho příslušného obsahu) ve stromu DOM je znám jako a Uzel. kořenový uzel je uzel .

Rozhraní DOM v JavaScriptu dokument (protože to je reprezentace HTML dokumentu). Proto přistupujeme ke stromu DOM dokumentu HTML skrz dokument rozhraní v JavaScriptu.

Nemůžeme mít přístup, ale také manipulovat s dokumentem HTML přes DOM. Můžeme přidat prvky na webovou stránku, odebrat a aktualizovat je. Pokaždé, když změníme nebo aktualizujeme všechny uzly ve stromu DOM se odráží na webové stránce.

Jak jsou uzly navrženy

Už jsem zmínil, že každý kus dat z HTML dokumentu je uložen jako objekt v JavaScriptu. Jak tedy lze data uložená jako objekt logicky uspořádat jako strom?

Uzly stromu DOM mají určité vlastnosti nebo vlastnosti. Téměř každý uzel ve stromu má nadřazený uzel (uzel přímo nad ním), podřízené uzly (uzly pod ním) a sourozenci (ostatní uzly náležející stejnému rodiči). S tímto rodina výše, níže a kolem uzlu je to, co ji kvalifikuje jako část stromu.

Tato rodinná informace každého uzlu je uloženy jako vlastnosti v objektu představujícím tento uzel. Například, děti je vlastnost uzlu, který nese seznam podřízených prvků tohoto uzlu, čímž logicky uspořádá podřízené prvky pod uzel.

Vyhněte se přehánění DOM manipulace

Stejně jako my můžeme najít aktualizaci DOM užitečné (aby bylo možné upravit webovou stránku), tam je taková věc jako přehánění.

Řekněme, že chcete aktualizovat barvu a

na webové stránce pomocí JavaScriptu. Co musíte udělat, je přístup k jeho odpovídajícímu objektu DOM uzlu a aktualizovat vlastnost barvy. To by nemělo mít vliv na zbytek stromu (ostatní uzly ve stromu).

Ale co když chceš odstranit uzel ze stromu nebo přidejte jeden? Celý strom možná bude třeba změnit uspořádání, s uzlem odstraněn nebo přidán do stromu. To je nákladná práce. Trvá čas a zdroj prohlížeče, jak tuto práci udělat.

Řekněme například, že chcete přidejte do tabulky pět dalších řádků. Pro každý řádek, když jsou vytvořeny jeho nové uzly a přidány do DOM, strom je aktualizován pokaždé, celkem 5 aktualizací.

Můžeme se tomu vyhnout pomocí DocumentFragment rozhraní. Přemýšlejte o tom jako o krabici, která by mohla držet všech pět řad a být přidán do stromu. Tímto způsobem je pět řádků jako jeden kus dat a ne jeden po druhém, což vede pouze k jedné aktualizaci ve stromu.

To se nestane pouze tehdy, když odstraníme nebo přidáme prvky, ale změna velikosti prvku může také ovlivnit jiné uzly, protože prvek s upravenou velikostí může potřebovat další prvky upravit jejich velikost. Bude tedy nutné aktualizovat odpovídající uzly všech ostatních prvků a prvky HTML se znovu vykreslit podle nových pravidel..

Podobně, pokud je ovlivněno rozvržení webové stránky jako celku, část nebo celá webová stránka může být znovu vykreslena. Tento proces je známý jako Reflow. V následujících situacích vyhnout se nadměrnému přetavení Ujistěte se, že DOM příliš neměníte. Změny v DOM nejsou jedinou věcí, která může způsobit Reflow na webové stránce. V závislosti na prohlížeči k němu mohou přispět i další faktory.

Balení

Zabalit věci nahoru, DOM je vizualizován jako strom všech prvků nalezených v dokumentu HTML. Fyzicky (tak fyzicky, jak se dá cokoliv digitálního dostat) je to sada vnořených objektů JavaScriptu které vlastnosti a metody uchovávají informace, které umožňují logicky uspořádat do stromu.