[Powered by Google Translate] [DOM] [Tommy MacWilliams] [Universiteti i Harvardit] [Kjo është CS50.] [CS50.TV] Në këtë video, ne jemi duke shkuar për të marrë një vështrim në DOM. Kur një browser shkarkon një faqe, ajo duhet të jenë të përfaqësuara në kujtesën disi. Objekti dokument model, ose DOM, përshkruan se si shfletuesi përfaqëson një webpage në kujtesë. Në këtë video, ne do të hedhim një vështrim në DOM në kontekstin e JavaScript, por DOM është një gjuhë e pavarur koncept. Për shembull, PHP ka vet zbatimin e tij DOM si. Megjithatë, DOM është shfrytëzuar shpesh nga JavaScript JavaScript që na lejon për të ndryshuar përmbajtjen e një faqe të fluturojnë, DOM dhe na lejon për të hyrë në pjesët e një webpage. Le të hidhni një sy në një webpage shembull. Mirë, tani le të shohim se si kjo faqe do të përfaqësohet në DOM. Dhe çdo pemë duhet të ketë një nyje rrënjë në krye. Për këtë dokument, elementi HTML është nyja rrënja sepse kjo është elementi i parë që shfaqet. Le të shtoni një nyje rrënjë në trungun tonë. Le të hedhim një vështrim në dokumentin HTML përsëri. Vini re se tag trupi është mbivendosur në brendësi të tag HTML. Kjo do të thotë se elementi i trupit është një fëmijë i HTML element. Ne mund të përfaqësojë këtë në pemë DOM tonë duke e bërë trupin një gjethe duke zbritur nga HTML. Le të bëjmë këtë. Ne kemi trupin nën HTML. Tani ne mund të shohim se trupi ka 2 fëmijët e vet, elementi h1 dhe elementi ul. Kjo do të thotë që ne mund të lidhë të dyja këto elemente në elementin e trupit, kështu që le të bëjmë atë. Ne kemi një h1 dhe një Ul. Së fundi, elementi ul ka 3 fëmijë të tjerë, dhe kjo do të përfundojë pemë DOM tonë, kështu që le të shtoni li, li, li. Kjo kompleton pemë DOM tonë, dhe kjo është se si shfletuesi është ruajtjen faqen tuaj. Tani le të marrin një sy se si ne mund të kaloj nëpër këtë pemë duke përdorur JavaScript. Ne mund të hyni në këtë pemë duke përdorur një variabël të veçantë JavaScript quajtur dokument. Një pronë e këtij objekti dokument është pronë trupit, dhe ky objekt përfaqëson elementi trupi në faqen tonë shembull. Nëse ne të kërkuar për të marrë të gjithë fëmijët e elementit të trupit, e cila në qoftë se ju mbani mend është se tag h1 dhe tag ul, ne mund të themi document.body.childNodes. Dhe kjo do të na japë përsëri një koleksion që përmban edhe elementin h1 dhe elementi ul pasi ata janë të dy fëmijët e drejtpërdrejtë të trupit. Nëse ne të kërkuar për të krijuar një ndryshore që përfaqëson elementin ul ne mund të themi vrr ul = atëherë ky kod deri këtu, dhe tani, sepse childNodes është thjesht një koleksion ne mundemi indeksi në atë me [1] për të marrë elementin e dytë të atij array. Me këtë objekt të ri ul ne mund të hyni në prona të ndryshme të elementit si ID saj. Nëse themi ul.id se do të jetë e barabartë me listën e fijes sepse kjo është ajo që ne kemi në faqen tonë të HTML. Ne gjithashtu mund të merrni tagName e saj, e cila në këtë rast do të jetë çfarë lloji i elementit ajo është, në këtë rast, një UL. Ne gjithashtu mund të merrni prindin e vet ose mbi nyjen e saj, e cila në këtë rast do të jetë elementi trupi. Nëse themi. ParentNode, që do të jetë i njëjtë si document.body. Sigurisht, kjo ka ul bijtë e vet, kështu që ne ende mund të themi. childNodes në këtë element, dhe kjo array tani duhet të ketë gjatësi 3 sepse atje janë 3 artikuj në listën tonë. Së fundi, ndoshta pasuria më e dobishme do të jetë. InnerHTML, dhe kjo do të jetë e përmbajtjes aktuale të listës, e cila në faqen tonë shembull ishin ato 3 tags li. Sigurisht, në qoftë se ne kemi një dokument të madhe, qasjen elemente në këtë mënyrë do të jetë me të vërtetë i rëndë për shkak se përfundimisht ne do të kemi për të thënë gjëra të tilla si document.body.childNodes diçka kllapa. childNodes diçka tjetër parantezë, dhe ajo do të merrni të vërtetë të rëndë. Në vend të kësaj ajo që ne me të vërtetë doni të bëni është të jetë në gjendje për të query dokumentin, Pra, ashtu si kemi kërkuar për gjërat në internet duke përdorur fjalë kyçe ne me të vërtetë nevojë për një mënyrë për të kërkuar që ky dokument shkurtimisht kthehet vetëm elementet ne lidhje me kujdes pa traversing top tërë pema e deri në fund. Për fat të mirë, shfletues moderne na lejojnë ta bëni këtë me një funksion të veçantë të quajtur querySelectorAll, dhe ky funksion merr një argument të vetme se është një përzgjedhës CSS, dhe kjo do të kthehen tek ne të gjithë elementet që ndeshje që selektorin. Kjo do të thotë që ju nuk keni nevojë për të mësuar një sintaksë krejt të re për querying dom. Në vend të kësaj ju mund të aplikoni njohuritë që ju tashmë e dini rreth selectors CSS. Le të marrin një vështrim në disa shembuj të querying dokumentin. Nëse themi querySelectorAll dhe të kalojë atë në këtë string # foo që do të na japë përsëri elementin me foo ID. Ju gjithashtu mund të them document.getElementById dhe të kalojë atë foo string pa atë hashtag. Ju jeni duke shkuar për të marrë përsëri të njëjtin objekt të saktë. Nëse në vend të kësaj ne të kalojë bar varg. Në document.querySelectorAll ne jemi duke shkuar për të marrë përsëri të gjitha elementet me shiritin e klasës. Ne gjithashtu mund të kombinohen selectors CSS. Nëse ne të kalojë në img string # foo që do të na japë përsëri të gjitha elementet e imazhit se janë fëmijë e elementit me foo ID. Siç mund ta shikoni, duke selektorë të kombinuara ne kemi disa kapacitetet të vërtetë e të fuqishme të kërkimit. Por nën kapuç, DOM është me të vërtetë vetëm një pemë, dhe këto Selectors të na lejojë të abstrakte që larg në një farë mase sepse ne nuk gjithmonë kujdeset për të gjithë strukturën e pemë DOM. Kjo ishte një pasqyrë të shpejtë të DOM, dhe faleminderit për t'u bashkuar me ne. [CS50.TV]