[Powered by Google Translate] [DOM]
[Tommy MacWilliams] [Harvard University]
[Þetta er CS50.] [CS50.TV]
Í þessu myndbandi sem við erum að fara að taka a líta á the DOM.
Þegar vafrinn niðurhal vefsíðu, það þarf að eiga fulltrúa í minni einhvern veginn.
The mótmæla skjal líkan eða DOM,
lýsir því hvernig vafrinn táknar vefsíðu í minni.
Í þetta myndband, munum við taka a líta á the DOM í tengslum við Javascript,
en DOM er tungumál óháð hugtak.
Til dæmis, PHP hefur eigin DOM framkvæmd hennar eins og heilbrigður.
Hins vegar er DOM oft notuð með JavaScript
síðan JavaScript gerir okkur kleift að breyta innihaldi vefsíðu á flugu,
og DOM gerir okkur kleift að nálgast hluta af vefsíðu.
Láta 'taka a líta á dæmi síðunni.
Jæja, nú skulum sjá hvernig þetta síða mun eiga fulltrúa í DOM.
Og hvert það tré, þarf að hafa rót hnút efst.
Fyrir þessu skjali, HTML þátturinn er rót hnút
því það er fyrsti þáttur sem birtist.
Skulum bæta rót hnút í tré okkar.
Skulum taka a líta á HTML skjalinu aftur.
Takið eftir að líkaminn tag er hreiður inni í HTML merki.
Þetta þýðir að líkami þátturinn er barn af HTML frumefni.
Við getum táknað þetta í DOM tré okkar með því að gera líkama blaða
lækkandi frá HTML.
Við skulum gera það.
Við höfum líkama undir HTML.
Nú getum við séð að líkami hefur 2 börn eigin,
H1 frumefni og ul frumefni.
Þetta þýðir að við getum tengst báðum þessum þáttum
að líkamanum frumefni, þannig að við skulum gera það.
Við höfum H1 og ul.
Loks ul þátturinn hefur 3 fleiri börn,
og þetta mun ljúka DOM tré okkar, þannig að við skulum bæta lí, lí, lí.
Þetta lýkur DOM tré okkar, og þetta er hvernig vafrinn er sögufrægur vefsíðuna þína.
Nú skulum taka a líta á hvernig við getum fara þetta tré með JavaScript.
Við getum nálgast þetta tré með sérstaka JavaScript breytu sem heitir skjal.
One eign þessu skjali hlut
er líkami eign, og þessi hlutur táknar
líkaminn þáttur í vefsíðuna okkar dæmi.
Ef við vildum fá öll börn líkamanum frumefni,
sem ef þú muna er að h1 tag og ul tag,
við getum sagt document.body.childNodes.
Og þetta mun gefa okkur aftur fylki sem inniheldur bæði H1 þátturinn
og ul þáttur þar sem þeir eru bæði bein börn líkamans.
Ef við vildum að búa til breytu fulltrúi ul frumefni
við getum sagt vrr ul = þá er þetta númer upp hér,
og nú vegna childNodes er einfaldlega fylki
við getum vísitölu í það með [1] til að fá annað þáttur þeirrar fylking.
Með þessu nýja ul hlut getum við aðgang að ýmsum eiginleikum viðkomandi frumefnis eins ID hennar.
Ef við segjum ul.id sem er að fara að vera jafn band lista
því það er það sem við höfum í HTML síðu okkar.
Við getum einnig fá tagName sína, sem í þessu tilfelli er að fara að vera
hvaða tegund af frumefni og það er, í þessu tilfelli, ul.
Við getum einnig fá foreldri sitt eða hnút ofan það, sem í þessu tilfelli
er að fara til vera the líkami þáttur.
Ef við segjum. ParentNode, sem er að fara til vera the sami eins document.body.
Auðvitað, þetta ul hefur börn eigin,
svo við getum samt sagt. childNodes á þennan þátt,
og þetta array ættir nú að hafa lengd 3 því það eru 3 hlutir í lista okkar.
Að lokum, ef til vill the gagnlegur eign er að fara til vera. InnerHTML,
og þetta mun vera raunverulegt innihald listanum, sem á síðu okkar dæmi
voru þessir 3 li tags.
Auðvitað, ef við höfum stórt skjal, aðgangur þætti
með þessum hætti er að fara að vera mjög fyrirferðarmikill vegna
lokum við verðum að segja hlutina eins document.body.childNodes
krappi eitthvað. childNodes krappi eitthvað annað,
og það er að fara að fá mjög fyrirferðarmikill.
Stað þess að það sem við viljum í raun að gera er að vera fær um að fyrirspurn skjalið,
svo bara eins og við að leita að hlutum á netinu því að nota leitarorð
við þurfum virkilega sumir leið til að leita þetta skjal til succinctly
komast aftur aðeins þá þætti sem við þykir vænt um án þess að fara yfir
allt tré toppur til botn.
Til allrar hamingju, leyfa nútíma vafrar okkur að gera þetta
með sérstakri aðgerð sem kallast querySelectorAll,
og þessi aðgerð tekur einn rök
sem er CSS val, og það er að fara að fara aftur til okkar
alla þá þætti sem samsvara þeim val.
Það þýðir að þú þarft ekki að læra alveg nýja setningafræði til samskipta DOM.
Stað þess að þú getur sótt þá þekkingu sem þú veist nú þegar
um CSS selectors.
Skulum taka a líta á nokkur dæmi um fyrirspurn skjalið.
Ef við segjum querySelectorAll og fara framhjá það þetta band # foo
það er að fara að gefa okkur til baka þáttur með ID foo.
Þú getur líka sagt document.getElementById
og gefa það í streng foo án þess hashtag.
Þú ert að fara að fá aftur sama nákvæmlega hlut.
Ef í staðinn við framhjá band. Bar til document.querySelectorAll
við erum að fara að fá aftur alla þá þætti með bekknum bar.
Við getum einnig sameina CSS selectors.
Ef við fara í band # foo IMG
það er að fara að gefa okkur aftur alla ímynd þætti
sem eru börn frumefni með ID foo.
Eins og þú sérð, með því að sameina selectors við höfum nokkrar mjög öflugar leita hæfileiki.
En undir hetta, the DOM er í raun bara tré,
og þessar selectors leyfa okkur að ágrip það í burtu að einhverju leyti
vegna þess að við gerum ekki alltaf sama um allt uppbyggingu DOM tré.
Það var fljótur yfirlit yfir DOM, og takk fyrir að taka þátt okkur.
[CS50.TV]