„DOM“ je termín, který se hodně používá při návrhu a vývoji webového rozhraní. Zkratka znamená „Document Object Model“ a je to základní součást webových stránek.
Jakkoli je DOM důležitý, mnoho lidí mu nerozumí. Ve skutečnosti můžete webové stránky programovat roky, aniž byste se o tom hodně dozvěděli. S pokrokem front-endové technologie je ale pochopení modelu DOM stále důležitější.
Porozumění smlouvě DOM
V objektově orientovaném programování existuje konstrukce nazývaná rozhraní. Rozhraní samo o sobě nic nedělá. Místo toho vytváří smlouvu. Říká, že cokoli může interagovat s čímkoli jiným, pokud dodržuje pravidla smlouvy o rozhraní.
Mít rozhraní umožňuje jakékoli části programu interagovat s jakoukoli jinou částí programu kontrolovaným a předvídatelným způsobem. Rozhraní také umožňuje jedné části programu pracovat s jakoukoli jinou částí, i když neví nic o části programu na druhé straně rozhraní.
Rozhraní je jako elektrická zásuvka ve zdi. Vaše zařízení nemusí vědět, odkud pochází energie, pokud je napětí správné. Transformátor na rohu nemusí vědět, co napájí. Je jen potřeba poslat do vašeho domu elektřinu se správným napětím.
DOM je vrstva rozhraní mezi webovou stránkou a kódem, který ji vytváří a mění. Když navštívíte web, uvidíte, jak prohlížeč vykreslí DOM daného webu. Když píšete HTML, programujete ve skutečnosti pomocí rozhraní API (programovací rozhraní) DOM.
Standard DOM udržuje organizace s názvem konsorcium World Wide Webnebo W3C. Vytvořili velmi podrobná dokumentace definující DOM Standard.
V tomto okamžiku si možná myslíte, že nedělají příliš dobrou práci. Koneckonců, existuje tolik problémů způsobených problémy s kompatibilitou mezi prohlížeči.
Problém není se standardem. Je to se samotnými prohlížeči. Mnoho prohlížečů přidalo do své implementace DOM funkce, které neodpovídají standardům W3C. Někdy se tato funkce stává populární a implementuje se do standardu DOM, což nutí ostatní prohlížeče dohnat to.
Dalším problémem je, že někteří lidé stále používají starší verze prohlížečů, které nemají zabudovaný nejnovější standard DOM. Prohlížeče někdy standard neimplementují správně.
Jak je DOM strukturován
Na DOM můžete myslet jako na strom. The prvek je kmen a všechny prvky uvnitř jsou větve. Když vnoříte prvky HTML do nadřazeného prvku, vytváříte ve skutečnosti větve mimo tuto větev. Správný termín pro každou větev je „uzel“.
Stromová struktura vytváří logické vztahy mezi uzly, jako je rodokmen. Každý uzel může mít rodiče a předky, ze kterých se větví. Mohou mít sourozence. A uzly mohou mít děti a potomky. Přemýšlení v těchto termínech velmi pomáhá při interakci s DOM pomocí JavaScriptu a CSS.
Jak HTML interaguje s DOM
DOM je definován vytvořením objektu dokumentu s rozhraním dokumentu. Váš HTML kód je nejpřímější způsob, jak vytvořit dokument. HTML vám poskytuje jednoduchý způsob, jak definovat dokument, aniž byste museli provádět tradiční programování.
Pokud s HTML teprve začínáte, zde jsou pět tipů, jak se s ním seznámit.
HTML je páteří každé webové stránky. Pokud jste začátečník, projdeme vás základními kroky k porozumění HTML.
HTML je jednodušší a shovívavější než tradiční programovací jazyky. Interakce s DOM je pro začínající webové designéry snadná.
Jak CSS interaguje s DOM
Jakmile váš HTML strukturuje dokument DOM, může CSS tento dokument upravit. Aby to bylo možné, musí být schopen najít prvky, které chcete stylovat. Dělá to několika způsoby.
K uzlům dokumentu můžete přistupovat odkazem na prvky podle názvu, například a. CSS mohou také přistupovat k prvkům přímo odkazem třída a id jména. Styl třídy bude aplikován na několik prvků, takže je můžete stylovat všechny najednou. Naopak styling id aplikuje změny pouze na jeden prvek.
Ke struktuře rodokmenu můžete také přistupovat pomocí CSS a doladit přístup pro větší kontrolu. Selektory CSS vám umožňují vybrat více prvků a nabízí vám balíček triků, jak je najít. Můžete hledat děti podle jejich předků, kombinací tříd a mnohem více.
Jak JavaScript komunikuje s DOM
JavaScript má nad dokumentem největší kontrolu, protože JavaScript je skutečný programovací jazyk s objekty, řízením toku, proměnnými atd. DOM poskytuje několik rozhraní, která umožňují JavaScriptu schopnost manipulovat s dokumentem, prvky a dalšími uzly.
Příbuzný: Co je JavaScript?
JavaScript může přidávat a odebírat uzly a měnit jejich styl. A JavaScript může sledovat události v dokumentu, jako je najetí myší nad prvek, kliknutí a stisknutí kláves.
JavaScript může vyhledávat a procházet strom dokumentů velmi podobným způsobem jako CSS. Je schopen najít prvky podle id a třídy. Může načítat seznamy podřízených prvků jako pole.
Budoucnost vývoje webu a DOM
Internet se od počátků hodně změnil. V počátcích se JavaScript většinou používal pro speciální efekty a jednoduché zobrazování dat. Většina webových stránek nebyla nic jiného než digitální brožury. AJAX to všechno změnil.
AJAX umožňuje webům aktualizovat data zobrazená ze serveru za běhu bez opětovného načtení stránky. Před AJAX byla každá změna dat viditelná pouze při opětovném načtení stránky nebo při přechodu uživatele na jinou stránku.
Po AJAXu byly webové aplikace stále populárnější. Internet již není sbírkou jednoduchých statických webů a několika vysoce funkčních aplikací, jako je eBay. Internet je nyní téměř druhým operačním systémem plným vysoce funkčních aplikací.
Jak rostou očekávání uživatelů, musí technologie držet krok. JavaScript není nejvýkonnějším nebo nejrychlejším jazykem. Také trpí několika problémy, jako jsou chyby s plovoucí desetinnou čárkou, díky nimž je pro vývojáře méně žádoucí. Tady přichází WebAssembly.
WebAssembly přináší do prohlížeče mnoho výhod nativního kódu, včetně vyšší rychlosti a lepšího přístupu k hardwaru. Umožní programátorům používat jiné jazyky k vytváření webů jako C ++ a Rust.
Ale i s obrovskými vylepšeními, která WebAssembly přinese, DOM tam stále bude a poskytuje konzistentní rozhraní mezi kódem a tím, co se zobrazuje v prohlížeči.
Snižte namáhání očí a prodlužte výdrž baterie přepnutím aplikace Microsoft Outlook do tmavého režimu.
- Programování
- HTML
- CSS
- Model objektu dokumentu
Lee je nomád na plný úvazek a polymatik s mnoha vášněmi a zájmy. Některé z těchto vášní se točí kolem produktivity, osobního rozvoje a psaní.
Přihlaste se k odběru našeho zpravodaje
Připojte se k našemu zpravodaji s technickými tipy, recenzemi, bezplatnými elektronickými knihami a exkluzivními nabídkami!
Ještě jeden krok…!
V e-mailu, který jsme vám právě poslali, potvrďte svou e-mailovou adresu.
