[Powered by Google Translate] [DOM] [Tommy MacWilliams] [Harvard University] [See on CS50.] [CS50.TV] Selles videos me vaatleme DOM. Kui brauser laeb veebileht, siis tuleb esindatud mälu kuidagi. Dokumendi objekti mudeli või DOM, kirjeldab, kuidas brauser näitab veebilehe mälu. Selles videos me võtame pilk DOM kontekstis JavaScript, kuid DOM on keelest sõltumatu mõiste. Näiteks PHP on oma DOM rakendamise samuti. Kuid DOM on sageli kasutanud JavaScript alates JavaScript võimaldab meil muuta sisu veebilehe lennult, ja DOM võimaldab meil ligipääs osade veebilehel. Võtame pilk näiteks veebilehel. Okei, nüüd vaatame, kuidas see leht on esindatud DOM. Ja iga puu peab olema root sõlme ülaosas. Selle dokumendi HTML element on juurtipust sest see on esimene element, mis ilmub. Lisame juurtipust meie puu. Võtame pilk HTML dokument uuesti. Pange tähele, et keha tag pesitses sees HTML tag. See tähendab, et keha element on laps HTML element. Me ei esinda see meie DOM puu, muutes keha lehed laskuvat HTML. Teeme seda. Meil on keha all HTML. Nüüd näeme, et keha on 2 last oma, h1 element ja ul element. See tähendab, et saame ühendada nii need elemendid, et keha element, nii et teeme seda. Meil on h1 ja ul. Lõpuks ul element on 3 rohkem lapsi, ja see viib lõpule meie DOM puu, seega lisame li, li, li. See lõpetab meie DOM puu, ja see on see, kuidas brauser on hoidmiseks oma kodulehel. Nüüd vaatleme, kuidas me saame läbida seda puud kasutades JavaScript. Me saame kasutada seda puu kasutades spetsiaalset JavaScript muutuja nimega dokumenti. Üks vara käesoleva dokumendi eesmärk on keha vara, ja see objekt esindab keha element meie näites kodulehte. Kui me tahame, et saada kõik laste keha element, mis siis, kui sa mäletad, on see, et h1 tag ja ul tag, saame öelda document.body.childNodes. Ja see annab meile tagasi array mis sisaldab nii h1 element ja ul element, sest need on nii otsene laste organismis. Kui me tahtsime luua muutuja esindab ul element saame öelda VRR ul = siis see kood siin, ja nüüd, sest childNodes on lihtsalt massiivi saame indeks seda [1], et saada teine ​​osa, et massiivi. Mis see uus ul objekti suudame erinevate omadustega element nagu tema ID. Kui me ütleme, ul.id et see saab olema võrdne stringide nimekirja sest see, mida oleme meie HTML leht. Meil saab ka oma Muutujanimede, mis sel juhul saab olema millist tüüpi element on, et käesolevas asjas, ul. Meil saab ka tema vanema või sõlme kohale, mis antud juhul saab olema keha element. Kui me ütleme. OmanikObjekt, et see saab olema sama document.body. Muidugi, see ul on laste oma, nii et me saame veel öelda. childNodes selle element, ja see massiiv peaks nüüd olema pikkus 3, sest seal on 3 toodet meie nimekirjast. Lõpuks võibolla kõige kasulikum vara saab olema. InnerHTML, ja see on tegelik nimekirja sisu, mis meie näites leht olid 3 li sildid. Muidugi, kui meil on suur dokument, tutvumise elemendid Sel viisil saab olema tõesti tülikas, sest lõpuks me peame ütlema asju, nagu document.body.childNodes sulg midagi. childNodes sulg midagi muud, ja see läheb tõesti tülikas. Selle asemel, mida me tõesti tahame teha, on võimalik teha päringuid dokumendi nii nagu meiegi otsinud asju internetis märksõnade abil meil on tõesti vaja mõned viis otsides selles dokumendis lühidalt saada tagasi ainult elemendid me hoolime ilma liiklevad kogu puu ülevalt alla. Õnneks kaasaegsete brauseritega võimaldab meil seda teha spetsiaalne funktsioon nimega querySelectorAll, ja see funktsioon võtab ühe argument mis on CSS valijat, ja see läheb meile tagasi kõik elemendid, mis sobivad valijat. See tähendab, et sa ei pea õppima täiesti uut süntaks päringute DOM. Selle asemel saate rakendada teadmisi, mida juba teame umbes CSS valijad. Võtame pilk mõned näited päringu dokumendi. Kui me ütleme, querySelectorAll ja sinna see string # foo mis läheb meile tagasi elemendi ID suva. Võite öelda document.getElementById ja andke seda string foo ilma et hashtag. Sa lähed, et saada tagasi täpselt sama objekti. Kui selle asemel võtame string. Baari document.querySelectorAll me lähme, et saada tagasi kõik elemendid koos klassi baar. Me võime ühendada ka CSS valijad. Kui me liigu string # foo img mis läheb meile tagasi kõik pildi osad et lapsed elemendi ID suva. Nagu näete, ühendades valijad on meil mõned väga võimas otsing võimalustele. Aga kapoti alla, DOM on tõesti ainult puu, ja need lülitid võimaldavad meil abstraktne, et ära mingil määral sest me ei ole alati hoolivad kogu struktuuri DOM puu. See oli kiire ülevaade DOM ja Täname meiega. [CS50.TV]