[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]