[Powered by Google Translate] [DOM]
[Tommy MacWilliams] [Harvard University]
[To je CS50.] [CS50.TV]
V tomto videu jdeme se podívat na DOM.
Když prohlížeč stáhne webovou stránku, musí být zastoupen v paměti nějak.
Document Object Model, nebo DOM,
popisuje, jak prohlížeč představuje webovou stránku v paměti.
V tomto videu, budeme se podívat na DOM v kontextu JavaScript,
ale DOM je jazykově nezávislý koncept.
Například, PHP má svůj vlastní implementaci DOM stejně.
Nicméně, DOM často využívá JavaScript
protože JavaScript nám umožní změnit obsah webové stránky v reálném čase,
a DOM umožňuje přístup k části webové stránky.
Pojďme se podívat na příklad webové stránky.
Dobře, teď pojďme podívat, jak tato stránka bude zastoupen v DOM.
A každý strom musí mít kořenový uzel v horní části.
V tomto dokumentu, element HTML je kořenový uzel
protože to je první prvek, který se objeví.
Pojďme přidat kořenový uzel našeho stromu.
Pojďme se podívat na HTML dokument znovu.
Všimněte si, že tělo tag je vnořená uvnitř značky HTML.
To znamená, že tělo prvek je podřízeným prvku HTML.
Můžeme reprezentovat to v našem DOM stromu orgánem list
sestupně od HTML.
Pojďme to udělat.
Máme tělo pod HTML.
Nyní vidíme, že tělo má dvě děti vlastní,
h1 element a ul element.
To znamená, že se můžeme spojit oba tyto prvky
do elementu body, tak se pojďme to udělat.
Máme H1 a UL.
Konečně, ul. prvek má tři další děti,
a to bude dokončení našeho DOM stromu, takže dodejme li, li, li.
To doplňuje naši DOM stromu, a to je to, jak je prohlížeč ukládání své webové stránky.
Nyní se pojďme podívat na to, jak můžeme procházet tento strom pomocí JavaScript.
Můžeme přistupovat k tomuto stromu pomocí speciálního JavaScript proměnnou s názvem dokumentu.
Jedna vlastnost tohoto objektu dokumentu
je tělo majetek, a tento objekt představuje
Tělo prvek v našem příkladu webové stránky.
Pokud bychom chtěli získat všechny děti elementu body,
které, pokud si vzpomenete, že h1 tag a tag ul,
můžeme říci document.body.childNodes.
A to se nám zpět pole obsahující jak h1 prvek
a ul prvek, protože jsou oba přímé potomky těla.
Pokud bychom chtěli vytvořit proměnnou reprezentující ul. prvek
můžeme říci, ul. VRR = pak tento kód sem,
a teď, protože je prostě childNodes pole
můžeme index do toho s [1], aby se druhý prvek tohoto pole.
S touto novou ul objektu můžeme přístup různé vlastnosti, jako je prvek, jeho ID.
Říkáme-li, ul.id, že se to rovná seznamu řetězců
protože to je to, co máme v HTML stránce.
Můžeme také získat jeho název značky, která je v tomto případě bude
, jaký typ prvku, je v tomto případě, ul..
Můžeme také získat jeho rodiče nebo uzel nad ní, což v tomto případě
bude tělo prvek.
Pokud říkáme. ParentNode, že to bude stejné jako document.body.
Samozřejmě, že to má ul. děti vlastní,
takže můžeme ještě říci. childNodes na tento prvek,
a toto pole měli mít délku 3, protože tam jsou 3 položky v našem seznamu.
Nakonec, možná nejužitečnější vlastnost bude. InnerHTML,
a to bude aktuální obsah seznamu, což je v našem příkladu stránce
byly ty 3 Li tagy.
Samozřejmě, pokud máme velký dokument, přístup k prvkům
tímto způsobem se bude opravdu náročný, protože
nakonec budeme muset říkat věci jako document.body.childNodes
Držák něco. childNodes držák něco jiného,
a to bude opravdu náročný.
Místo toho, to, co opravdu chcete udělat, je být schopen dotaz dokument,
takže stejně jako jsme hledali, co na internetu pomocí klíčových slov
Opravdu potřebujeme nějaký způsob, jak hledat tento dokument stručně
vrátit pouze prvky Staráme se o bez pojezdu
celý strom shora dolů.
Naštěstí moderní prohlížeče umožní nám to
speciální funkce nazývá querySelectorAll,
a tato funkce má jediný argument
to je CSS selektor, a bude to k nám vrátí
všechny prvky, které odpovídají, že volič.
To znamená, že se nemusíte učit celou novou syntaxi pro dotazování DOM.
Místo toho můžete použít znalosti, které už znáte
o selektorů CSS.
Pojďme se podívat na některé příklady dotazování dokument.
Říkáme-li, querySelectorAll a předat tento řetězec foo #
, co se děje, aby nám vrátit prvek s ID foo.
Můžete také říci document.getElementById
a předat řetězec foo bez tohoto hashtag.
Budeš se dostat zpět přesně stejný objekt.
Pokud místo toho jsme se projít řetězce. Pruh document.querySelectorAll
budeme dostat zpět všechny prvky s třídní baru.
Můžeme také kombinovat selektorů CSS.
Pomineme-li v řetězci # foo img
, co se děje, aby nám zpět všechny obrazových prvků
že jsou děti prvku s ID foo.
Jak můžete vidět, tím, že kombinuje selektory máme nějaké opravdu mocné vyhledávací schopnosti.
Ale pod kapotou, DOM je opravdu jen strom,
a tato pole umožňují nám abstraktní, která daleko do určité míry
protože ne vždy starat o celé struktuře stromu DOM.
To bylo rychlý přehled o DOM, a díky za námi.
[CS50.TV]