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