[Powered by Google Translate] [Dom]
[Tommy MacWilliams] [Inivèsite Harvard]
[Sa a se CS50.] [CS50.TV]
Nan videyo sa a nou pral pran yon gade nan Dom la.
Lè yon navigatè downloads yon Paj Web, li bezwen yo dwe reprezante nan memwa yon jan kanmenm.
Modèl la objè dokiman, oswa Dom,
dekri kijan navigatè a reprezante yon Paj Web nan memwa.
Nan videyo sa a, nou pral pran yon gade nan Dom a nan yon kontèks la nan JavaScript,
men Dom se yon konsèp lang-endepandan.
Pou egzanp, PHP li gen pwòp Dom aplikasyon kòm byen.
Sepandan, Dom se souvan itilize pa JavaScript
depi JavaScript pèmèt nou chanje sa ki nan yon Paj Web sou vole a,
ak Dom pèmèt nou gen aksè a pati nan yon Paj Web.
Ann pran yon gade nan yon Paj Web egzanp.
Okay, kounye a kite a wè ki jan yo pral paj sa a dwe reprezante nan Dom la.
Men, tout pyebwa ki bezwen gen yon ne rasin nan tèt la.
Pou dokiman sa a, eleman ki HTML se ne a rasin
paske li nan eleman an premye ki parèt.
Se pou yo ajoute yon ne rasin pyebwa nou yo.
Ann pran yon gade nan dokiman an HTML ankò.
Remake se tag nan kò nich andedan nan tag nan HTML.
Sa vle di ke eleman nan kò se yon timoun nan eleman nan HTML.
Nou ka reprezante sa a nan pye bwa Dom nou an pa fè kò yon fèy
desann sot nan HTML.
Se pou yo fè sa.
Nou gen kò anba HTML.
Koulye a, nou ka wè ke kò a gen 2 timoun nan pwòp li yo,
H1 eleman an ak eleman nan ul.
Sa vle di ke nou ka konekte tou de nan sa yo eleman
eleman nan kò, se konsa kite a fè sa.
Nou gen yon H1 ak UL yon.
Finalman, eleman ki UL gen 3 plis timoun,
ak sa a pral konplete pyebwa Dom nou an, kidonk kite a ajoute Li, Li, Li.
Sa a konplete pyebwa Dom nou an, ak sa a se ki jan navigatè a se estoke Paj Web ou.
Koulye a, kite a pran yon gade nan ki jan nou ka Traverse pye bwa sa a lè l sèvi avèk JavaScript.
Nou kapab jwenn aksè pye bwa sa a lè l sèvi avèk yon varyab JavaScript espesyal ki rele dokiman.
Yon pwopriyete nan sa a objè dokiman
se pwopriyete a kò, ak sa a objè reprezante
kò eleman an nan Paj Web egzanp nou an.
Si nou te vle jwenn tout timoun yo nan eleman nan kò,
ki si ou sonje se ke tag H1 ak tag a UL,
nou ka di document.body.childNodes.
Lè sa a pral ban nou tounen yon etalaj ki gen tou de H1 eleman nan
ak eleman ki UL depi yo ap tou de timoun yo dirèk nan kò a.
Si nou te vle kreye yon varyab ki reprezante eleman ki UL
nou ka di vrr UL = Lè sa a, sa a Kòd moute isit la,
e kounye a, paske childNodes se tou senpleman yon etalaj
nou kapab endèks nan li ak [1] jwenn eleman an dezyèm nan ki etalaj.
Avèk sa a objè UL nouvo nou ka gen aksè nan pwopriyete divès kalite eleman ki tankou ID li yo.
Si nou di ul.id ki k ap pase yo dwe egal a lis la fisèl
paske se sa ki nou genyen nan paj HTML nou an.
Nou kapab tou jwenn tagName li yo, ki nan ka sa a ki pral yo dwe
ki kalite eleman li se, nan ka sa a, yon ul.
Nou kapab tou jwenn paran li yo oswa ne ki pi wo a li, ki nan ka sa a
a pwal eleman nan kò.
Si nou di. ParentNode, ki k ap pase yo dwe menm bagay la tou kòm document.body.
Natirèlman, sa a UL gen timoun nan pwòp li yo,
pou nou ka toujou di. childNodes sou sa a eleman,
ak sa a etalaj yo ta dwe kounye a gen longè 3 paske gen 3 atik nan lis nou an.
Finalman, petèt pwopriyete a pi itil a pwal. InnerHTML,
ak sa a pral sa ki aktyèl la nan lis la, ki nan paj egzanp nou an
se te sila yo 3 Tags Li.
Natirèlman, si nou gen yon dokiman gwo, rantre nan eleman
nan fason sa a ki pral yo dwe reyèlman ankonbran paske
evantyèlman nou pral gen yo di bagay sa yo tankou document.body.childNodes
yon bagay bracket. childNodes yon bagay bracket lòt moun,
ak li pral jwenn vrèman ankonbran.
Olye de sa ki sa nou reyèlman vle fè se kapab sijè rechèch dokiman an,
Se konsa, jis renmen nou fouye pou bagay sa yo sou entènèt la lè l sèvi avèk mo kle
nou reyèlman bezwen kèk fason pou chèche dokiman sa a suksen
jwenn tounen sèlman eleman yo nou pran swen sou san yo pa Travelers
tèt la pye bwa tout jouk anba.
Chans, navigatè modèn pèmèt nou fè sa
ak yon fonksyon espesyal ki rele querySelectorAll,
ak fonksyon sa a pran yon agiman yon sèl
ki se yon seleksyon CSS, epi li k ap pase pou li retounen nan nou
tout nan eleman yo ki matche ak ki fè seleksyon yo.
Sa vle di ou pa bezwen aprann yon antye sentaks nouvo pou rekèt Dom la.
Olye de sa ou ka aplike konesans nan ou deja konnen
sou CSS seleksyon.
Ann pran yon gade nan kèk egzanp sou rekèt dokiman an.
Si nou di querySelectorAll epi yo pase li sa a fil # foo
ki nan pral bay nou tounen eleman an ak ID foo la.
Ou kapab tou di document.getElementByID
epi yo pase li foo nan fisèl san yo pa ki hashtag.
W ap ale nan jwenn tounen menm objè a egzak.
Si olye nou pase ba a fisèl. Document.querySelectorAll
nou pral jwenn tounen tout nan eleman yo ak ba a nan klas la.
Nou kapab tou konbine seleksyon CSS.
Si nou pase nan fisèl # foo img la
ki nan pral bay nou tounen tout nan eleman yo imaj
ki se pitit eleman an ak ID foo la.
Kòm ou ka wè, pa mete ansanm seleksyon nou gen kèk kapasite rechèch vrèman pwisan.
Men, anba kapo a, Dom a se vrèman jis yon pye bwa,
ak sa yo seleksyon pèmèt nou abstrè ki ale nan kèk degre
paske nou pa toujou pran swen sou estrikti a tout antye nan pye bwa a Dom.
Se te yon BECA rapid nan Dom la, ak mèsi pou rantre nan nou.
[CS50.TV]