[Powered by Google Translate] [DOM] [Tommy MacWilliams] [Harvardo universiteto] [Tai CS50.] [CS50.TV] Šiame video mes ketiname pažvelgti į DOM išvaizdą. Kai naršyklė parsisiųsti tinklalapį, ji turi būti atstovaujama atminties kažkaip. Objektinis modelis dokumento arba DOM, aprašoma, kaip naršyklė atstovauja atmintyje tinklalapį. Šiame vaizdo, mes pažvelgti į DOM pažvelgti į "JavaScript" kontekste, bet DOM kalbos nepriklausomas koncepcija. Pavyzdžiui, PHP turi savo DOM įgyvendinimą, taip pat. Tačiau DOM dažnai naudojamus JavaScript nuo Javaskriptą leidžia mums pakeisti tinklalapio turinį skristi, ir DOM leidžia mums pasiekti dalys tinklalapį. Paimkime bent pavyzdžiui tinklalapio išvaizdą. Gerai, dabar pažiūrėkime, kaip šis puslapis bus atstovaujama DOM. Ir kiekvienas medis turi turėti šaknų mazgas viršuje. Dėl šio dokumento HTML elementas yra šakninis mazgas nes tai pirmasis elementas, kuris pasirodo. Pridėkime šaknų mazgas mūsų medžiu. Leiskite pažvelgti į HTML dokumento išvaizdą dar kartą. Atkreipkite dėmesį, kad kūno tegus yra įdėtos viduje HTML žymės. Tai reiškia, kad kūno elementas yra HTML vaikas elemento. Mes galime atstovauti tai mūsų DOM medžio darant kūno lapas leistis nuo HTML. Leiskite tai padaryti. Mes turime kūną po HTML. Dabar matome, kad kūnas turi 2 vaikus savo, H1 elementas ir ul elementas. Tai reiškia, kad mes galime sujungti abu šiuos elementus prie kūno elementas, todėl galime tai padaryti. Turime h1 ir ul. Galiausiai, ul elementas yra 3 daugiau vaikų, ir tai bus užbaigti mūsų DOM medį, todėl galime pridėti Li, Li Li. Tai užbaigia mūsų DOM medį, ir tai, kaip naršyklė saugoti savo tinklalapį. Dabar galime pažvelgti kaip mes galime neigia šį medį, naudojant "JavaScript" išvaizdą. Mes galime pasiekti šį medį, naudojant specialų JavaScript kintamąjį vadinamą dokumentą. Vienas nuosavybė šio dokumento objektas yra organizacijos nuosavybė, ir šis objektas yra kūno elementas mūsų pavyzdyje tinklalapį. Jei mes norėjome gauti visus iš kūno elementas vaikams kuri, jei pamenate, kad H1 tegus ir ul žymeles, mes galime pasakyti, document.body.childNodes. Ir tai duos mums atgal masyvą, kuriame tiek h1 elementas ir ul elementas, nes jie tiek tiesioginio vaikai organizme. Jei mes norėjome sukurti kintamąjį atstovaujantis ul elementas mes galime pasakyti, VRR ul = tai kodas čia, ir dabar, nes ChildNodes tiesiog masyvas mes galime puslapis į jį su [1] gauti antrojo požymio tos masyvo. Su šios naujos ul objekto galime pasiekti įvairias savybes elemento kaip ir jo ID. Jei mes sakome ul.id tai bus lygi styginių sąrašo nes tai, ką mes turime mūsų puslapio HTML. Mes taip pat galime gauti savo tagName, kuri šiuo atveju bus kokio tipo elementą tai, šiuo atveju, ul. Mes taip pat galime gauti savo tėvų ar virš jo mazgą, kuris šiuo atveju bus kūno elementas. Jei mes sakome. ParentNode, kad tai bus kaip document.body pats. Žinoma, tai UL vaikus savo, todėl mes vis dar galime pasakyti. ChildNodes apie šio elemento, ir tai masyvas dabar turėtų ilgis 3, nes yra 3 prekės mūsų sąrašą. Galiausiai, galbūt labiausiai naudinga savybė bus. InnerHTML, ir tai bus tikrasis turinys sąrašą, iš kurio mūsų puslapio pavyzdys buvo tie 3 li žymės. Žinoma, jei mes turime didelį dokumentą, susipažinimo elementai tokiu būdu bus tikrai sudėtingas, nes galiausiai mes turime pasakyti dalykų, pavyzdžiui, document.body.childNodes laikiklis kažką. ChildNodes laikiklis kažkas, ir jis ketina gauti tikrai sudėtinga. Vietoj to, ką mes tikrai norime padaryti, tai galės užklausą dokumentą, taip kaip mes ieškoti dalykų internete naudodami raktinius žodžius mes tikrai reikia kai ieško šį dokumentą glaustai būdas grįžti tik tie elementai, mums rūpi be važiuojantiems Visas medis iš viršaus į apačią. Laimei, šiuolaikinių naršyklių leidžia mums tai padaryti su specialia funkcija vadinama querySelectorAll, ir ši funkcija trunka vieną argumentą tai CSS selektorių, ir jis ketina grįžti į mus visus elementus, kurie atitinka šį selektorių. Tai reiškia, kad jums nereikia mokytis visiškai naują sintaksę užklausų DOM. Vietoj to, galite taikyti žinias, jūs jau žinote, apie CSS selektoriai. Leiskite pažvelgti į kai kurių užklausų dokumentą pavyzdžių išvaizdą. Jei mes sakome querySelectorAll ir perduoti jį šiuo styginių # foo kad ketina duoti mums atgal su ID foo elementas. Taip pat galite sakyti document.getElementById ir perduoti jį eilutę foo be to hashtag. Jūs ketinate grįžti tą patį tiksliai objektą. Jei vietoj mes pereiname eilutę. Baras prie document.querySelectorAll mes ketiname grįžti visi su klasės baro elementais. Mes taip pat galime derinti CSS selektorius. Jei mes pereiti į styginių # foo img kad ketina duoti mums atgal visus vaizdo elementų kad yra vaikai su ID foo elementas. Kaip matote, derinant selektoriai turime tikrai galingą paieškos galimybes. Tačiau po gaubtu, DOM tikrai tik medis, ir šių selektoriai leidžia mums abstraktus, kad toli iki tam tikro laipsnio nes mes ne visada rūpi visos struktūros DOM medį. Tai buvo trumpa apžvalga DOM, ir ačiū, kad sutikote su mumis. [CS50.TV]