[Powered by Google Translate] [DOM] [Tommy MacWilliams] [Harvard University] [To je CS50.] [CS50.TV] V tomto videu budeme sa pozrieť na DOM. Keď prehliadač stiahne webovú stránku, musí byť zastúpený v pamäti nejako. Document Object Model, alebo DOM, opisuje, ako prehliadač predstavuje webovú stránku v pamäti. V tomto videu, budeme sa pozrieť na DOM v kontexte JavaScript, ale DOM je jazykovo nezávislý koncept. Napríklad, PHP má svoj vlastnú implementáciu DOM rovnako. Avšak, DOM často využíva JavaScript pretože JavaScript nám umožní zmeniť obsah webovej stránky v reálnom čase, a DOM umožňuje prístup k časti webovej stránky. Poďme sa pozrieť na príklad webové stránky. Dobre, teraz poďme pozrieť, ako táto stránka bude zastúpený v DOM. A každý strom musí mať koreňový uzol v hornej časti. V tomto dokumente, element HTML je koreňový uzol pretože to je prvý prvok, ktorý sa objaví. Poďme pridať koreňový uzol nášho stromu. Poďme sa pozrieť na HTML dokument znovu. Všimnite si, že telo tag je vnorená vnútri značky HTML. To znamená, že telo prvok je podriadeným prvku HTML. Môžeme reprezentovať to v našom DOM stromu orgánom list zostupne od HTML. Poďme to urobiť. Máme telo pod HTML. Teraz vidíme, že telo má dve deti vlastné, H1 teleso a ul element. To znamená, že sa môžeme spojiť oba tieto prvky do elementu body, tak sa poďme to urobiť. Máme H1 a UL. Konečne, ul prvok má tri ďalšie deti, a to bude dokončenie nášho DOM stromu, takže dodajme ak, ak, ak. To dopĺňa našu DOM stromu, a to je to, ako je prehliadač ukladanie svoje webové stránky. Teraz sa poďme pozrieť na to, ako môžeme prechádzať tento strom pomocou JavaScript. Môžeme pristupovať k tomuto stromu pomocou špeciálneho JavaScript premennú s názvom dokumentu. Jedna vlastnosť tohto objektu dokumentu je telo majetok, a tento objekt predstavuje Telo prvok v našom príklade webovej stránky. Ak by sme chceli získať všetky deti elementu body, ktoré, ak si spomeniete, že h1 tag a tag ul, môžeme povedať document.body.childNodes. A to sa nám späť pole obsahujúce h1 prvok a ul prvok, pretože sú obaja priame potomkov tela. Ak by sme chceli vytvoriť premennú reprezentujúcu ul prvok môžeme povedať, ul VRR = potom tento kód sem, a teraz, pretože je jednoducho childNodes pole môžeme index do toho s [1], aby sa druhý prvok tohto poľa. S týmto novým ul objektu môžeme prístup rôzne vlastnosti prvku, ako je jeho ID. Ak hovoríme, ul.id, že sa to rovná zoznamu reťazcov pretože to je to, čo máme v HTML stránke. Môžeme tiež získať jeho názov značky, ktorá je v tomto prípade bude , Aký typ prvku, je v tomto prípade, ul. Môžeme tiež získať jeho rodičia alebo uzol nad ňou, čo v tomto prípade bude telo prvok. Ak hovoríme. ParentNode, že to bude rovnaké ako document.body. Samozrejme, že to má ul deti vlastné, takže môžeme ešte povedať. childNodes na tento prvok, a toto pole mali mať dĺžku 3, pretože tam sú 3 položky v našom zozname. Nakoniec, snáď najužitočnejšie vlastnosť bude. InnerHTML, a to bude aktuálny obsah zoznamu, čo je v našom príklade stránku boli tie 3 Li tagy. Samozrejme, ak máme veľký dokument, prístup k prvkom týmto spôsobom sa bude naozaj náročný, pretože nakoniec budeme musieť hovoriť veci ako document.body.childNodes Držiak niečo. ChildNodes držiak niečo iné, a to bude naozaj náročný. Namiesto toho, to, čo naozaj chcete urobiť, je byť schopný dotaz dokument, takže rovnako ako sme hľadali, čo na internete pomocou kľúčových slov Naozaj potrebujeme nejaký spôsob, ako hľadať tento dokument stručne vrátiť iba prvky Staráme sa o bez pojazdu celý strom zhora nadol. Našťastie moderné prehliadače umožní nám to špeciálna funkcia nazýva querySelectorAll, a táto funkcia má jediný argument to je CSS selektor, a bude to k nám vráti všetky prvky, ktoré zodpovedajú, že volič. To znamená, že sa nemusíte učiť celú novú syntax pre dotazovanie DOM. Namiesto toho môžete použiť vedomosti, ktoré už poznáte o selektorov CSS. Poďme sa pozrieť na niektoré príklady dopytovania dokument. Ak hovoríme, querySelectorAll a odovzdať tento reťazec foo # , Čo sa deje, aby nám vrátiť prvok s ID foo. Môžete tiež povedať document.getElementById a odovzdať reťazec foo bez tohto hashtag. Budeš sa dostať späť presne rovnaký objekt. Ak namiesto toho sme sa prejsť reťazca. Pruh document.querySelectorAll budeme dostať späť všetky prvky s triednou baru. Môžeme tiež kombinovať selektorov CSS. Ak neberieme do úvahy v reťazci # foo img , Čo sa deje, aby nám späť všetky obrazových prvkov že sú deti prvku s ID foo. Ako môžete vidieť, tým, že kombinuje selektory máme nejaké naozaj mocné vyhľadávacie schopnosti. Ale pod kapotou, DOM je naozaj len strom, a tieto polia umožňujú nám abstraktné, ktorá ďaleko do určitej miery pretože nie vždy starať o celej štruktúre stromu DOM. To bolo rýchly prehľad o DOM, a vďaka za nami. [CS50.TV]