[Powered by Google Translate] [DOM] [Tommy MacWilliams] [Ollscoil Harvard] [Tá sé seo CS50.] [CS50.TV] Sa físeán seo, táimid ag dul a ghlacadh le breathnú ar an DOM. Nuair íosluchtú an bhrabhsálaí leathanach gréasáin, ní mór é a léiriú i gcuimhne ar bhealach. An tsamhail réad doiciméad, nó DOM, cur síos ar conas a dhéanann ionadaíocht ar an bhrabhsálaí ar leathanach gréasáin i gcuimhne. Sa físeán seo, beidh orainn a chur le breathnú ar an DOM i gcomhthéacs JavaScript, ach tá DOM coincheap atá neamhspleách ar theanga. Mar shampla, tá PHP a chur i bhfeidhm DOM féin chomh maith. Mar sin féin, tá DOM úsáid go minic ag JavaScript go dtugann sé deis dúinn JavaScript a athrú an t-ábhar ar leathanach gréasáin ar an eitilt, agus ligeann DOM dúinn teacht ar chodanna de leathanach gréasáin. A ligean ar ghlacadh le breathnú ar an leathanach gréasáin mar shampla. Maith go leor, anois a ligean ar a fheiceáil conas a rachaidh an leathanach seo a léiriú sa DOM. Agus ní mór gach crann a bheith acu nód fréimhe ag an mbarr. Chun doiciméad seo, is é an ghné HTML an nód fréimhe mar tá sé ar an chéad eilimint gur dealraitheach. A ligean ar nód fréimhe a chur ar ár crann. A ligean ar ghlacadh le breathnú ar an doiciméad HTML arís. Fógra go bhfuil an chlib comhlacht neadaithe taobh istigh de an chlib HTML. Ciallaíonn sé seo go bhfuil gné comhlacht leanbh leis an eilimint HTML. Is féidir linn a seo a léiriú inár crann DOM trí chomhlacht duille a dhéanamh tuirlingt de HTML. A ligean ar é sin a dhéanamh. Táimid tar éis comhlacht thíos HTML. Anois is féidir linn a fheiceáil go bhfuil 2 leanbh dá chuid féin gcomhlacht sin, an ghné h1 agus an eilimint ul. Ciallaíonn sé seo gur féidir linn a nascadh dá cheann de na heilimintí leis an eilimint gcomhlacht, mar sin a ligean a dhéanamh. Ní mór dúinn h1 agus ul. Ar deireadh, tá an ghné ul 3 leanbh níos mó, agus beidh sé seo i gcrích ár crann DOM, mar sin a ligean ar chur li, li, li. Críochnaíonn sé seo ár n-crann DOM, agus tá sé seo conas an brabhsálaí stóráil do leathanach gréasáin. Anois, a ligean ar ghlacadh le breathnú ar conas is féidir linn a Traverse crann seo ag baint úsáide as JavaScript. Is féidir linn a rochtain crann seo ag baint úsáide as athróg JavaScript speisialta ar a dtugtar doiciméad. Airí amháin den doiciméad seo réad Is é an mhaoin gcomhlacht, agus is ionann an réad seo an eilimint comhlacht in ár mar shampla leathanach gréasáin. Má bhíomar ag iarraidh a fháil ar gach ceann de na páistí an ghné chomhlachta, agus má tá tú ag cuimhneamh go bhfuil chlib H1 agus an chlib ul, is féidir linn a rá document.body.childNodes. Agus beidh sé seo a thabhairt dúinn ar ais le sraith ina eilimint araon h1 agus an ghné ul ó tá siad dá leanaí díreach an chomhlachta. Má bhíomar ag iarraidh a chruthú athróg ionadaíonn an ghné ul is féidir linn a rá vrr ul = ansin an cód seo suas anseo, agus anois toisc go bhfuil childNodes ach le sraith is féidir linn innéacs isteach é le [1] a fháil ar an dara gné den eagar. Leis an réad ul nua is féidir linn rochtain a fháil ar airíonna éagsúla an eilimint mhaith a ID. Má deirimid ul.id go bhfuil dul chun bheith comhionann leis an liosta teaghrán toisc go bhfuil an méid atá againn in ár leathanach HTML. Is féidir linn a fháil chomh maith a tagName, atá sa chás seo ag dul a bheith cén cineál eilimint go bhfuil sé, sa chás seo, ar ul. Is féidir linn a fháil chomh maith a mháthairchuideachta nó an nód os a chionn, atá sa chás seo ag dul a bheith ar an eilimint gcomhlacht. Má deirimid. ParentNode, go bhfuil dul chun bheith mar an gcéanna document.body. Ar ndóigh, tá sé seo ul leanaí dá chuid féin, ionas gur féidir linn a rá go fóill. childNodes ar ngné seo, agus ba chóir é seo a bheith eagar fad 3 anois mar gheall go bhfuil 3 míreanna in ár liosta. Ar deireadh, b'fhéidir go bhfuil an mhaoin is úsáidí ag dul a bheith. InnerHTML, agus beidh sé seo an t-ábhar iarbhír an liosta, atá in ár leathanach shampla iad siúd 3 clibeanna li. Ar ndóigh, má táimid tar éis doiciméad mór, gnéithe rochtain a fháil ar ar an mbealach seo ag dul a bheith i ndáiríre cumbersome mar gheall ar ar deireadh thiar beidh orainn a rá rudaí cosúil le document.body.childNodes childNodes rud lúibín. éigin lúibín eile, agus tá sé ag dul a fháil i ndáiríre cumbersome. Ina áit sin cad ba mhaith linn i ndáiríre a dhéanamh ná a bheith in ann an doiciméad a fhiosrú, mar sin díreach cosúil chuardach againn le haghaidh rudaí ar an idirlíon ag baint úsáide as eochairfhocail ní mór dúinn i ndáiríre ar bhealach éigin a chuardach doiciméad seo go gonta a fháil ar ais ach na heilimintí cúram againn faoi gan traversing an barr crann ar fad go dtí an bun. Luckily, a cheadú brabhsálaithe nua-aimseartha linn seo a dhéanamh le feidhm speisialta ar a dtugtar querySelectorAll, agus tógann an fheidhm seo le hargóint aonair, go bhfuil roghnóir CSS, agus é ag dul ar ais chugainn gach ceann de na heilimintí sin a mheaitseáil go roghnóir. Ciallaíonn sé sin nach gá duit a fhoghlaim a error iomlán nua chun ceistiú an DOM. Ina ionad sin is féidir leat an t-eolas a fhios agat cheana féin faoi ​​unused CSS. A ligean ar ghlacadh le breathnú ar roinnt samplaí de ag ceistiú an doiciméad. Má deirimid querySelectorAll agus pas é seo teaghrán # foo go bhfuil ag dul a thabhairt dúinn ar ais ar an eilimint leis an ID foo. Is féidir leat a rá freisin document.getElementByID agus pas a fháil sé an foo teaghrán gan an hashtag. Tá tú ag dul a fháil ar ais ar an réad céanna cruinn. Más rud é in ionad muid pas a fháil sa teaghrán. Barra chun document.querySelectorAll táimid ag dul a fháil ar ais gach ceann de na heilimintí leis an barra ranga. Is féidir linn a chur le chéile freisin unused CSS. Má éiríonn linn sa téad # foo img go bhfuil ag dul a thabhairt dúinn ar ais go léir de na heilimintí íomhá go bhfuil leanaí ar an eilimint leis an ID foo. Mar is féidir leat a fheiceáil, ag roghnóirí le chéile ní mór dúinn roinnt cumais cuardaigh ndáiríre cumhachtach. Ach faoi na cochall, tá an DOM i ndáiríre ach le crann, agus na roghnóirí ar ár gcumas teibí go shiúl go pointe áirithe toisc nach féidir linn cúram i gcónaí mar gheall ar an struchtúr iomlán an crann DOM. Ba é sin forbhreathnú tapa ar an DOM, agus go raibh maith agat as bheith linn. [CS50.TV]