[Powered by Google Translate] [DOM]
[Tommy MacWilliams] [Prifysgol Harvard]
[Mae hyn yn CS50.] [CS50.TV]
Yn y fideo hwn rydym yn mynd i edrych ar y DOM.
Pan fydd porwr lawrlwytho dudalen we, mae angen i gael eu cynrychioli yn y cof rywsut.
Mae'r model gwrthrych ddogfen, neu DOM,
disgrifio sut y mae'r porwr yn cynrychioli tudalen gwe mewn cof.
Yn y fideo, byddwn yn edrych ar y DOM yng nghyd-destun JavaScript,
ond mae DOM yn gysyniad ieithyddol-annibynnol.
Er enghraifft, PHP wedi ei weithredu DOM ei hun yn ogystal.
Fodd bynnag, mae DOM yn cael ei ddefnyddio'n aml gan JavaScript
ers JavaScript yn ein galluogi i newid y cynnwys tudalen we ar y hedfan,
a DOM yn ein galluogi i gael mynediad i rannau o dudalen we.
Gadewch i ni edrych ar enghraifft tudalen we.
Iawn, yn awr gadewch i ni weld sut y bydd y dudalen hon yn cael ei gynrychioli yn y DOM.
Ac mae angen i bob coeden gael nod gwraidd ar y brig.
Ar gyfer y ddogfen hon, mae'r elfen HTML yw'r nod gwraidd
oherwydd ei fod yn yr elfen gyntaf sy'n ymddangos.
Gadewch i ni ychwanegu nod gwraidd i'n goeden.
Gadewch i ni edrych ar y ddogfen HTML eto.
Sylwch fod y tag corff yn nythu tu mewn i'r tag HTML.
Mae hyn yn golygu bod yr elfen corff yn blentyn yr elfen HTML.
Gallwn gynrychioli hyn yn ein goeden DOM gan gorff deilen gwneud
disgyn o HTML.
Gadewch i ni wneud hynny.
Mae gennym gorff o dan HTML.
Nawr gallwn weld y corff hwnnw wedi 2 blant ei hun,
yr elfen h1 a'r elfen ul.
Mae hyn yn golygu y gallwn gysylltu ddau o'r elfennau hynny
at yr elfen corff, felly gadewch i ni wneud hynny.
Mae gennym h1 a ul.
Yn olaf, yr elfen ul Mae 3 fwy o blant,
a bydd hyn yn cwblhau ein goeden DOM, felly gadewch i ni ychwanegu li, li, li.
Mae hyn yn cwblhau ein goeden DOM, a dyma sut y mae'r porwr yn storio eich tudalen we.
Nawr, gadewch i ni edrych ar sut y gallwn tramwyo goeden hwn gan ddefnyddio JavaScript.
Gallwn gael mynediad goeden hon gan ddefnyddio newidyn JavaScript arbennig o'r enw ddogfen.
Un o briodweddau ddogfen hon gwrthrych
yw'r eiddo corff, ac mae hyn yn gwrthrych yn cynrychioli
yr elfen corff mewn 'n enghraifft tudalen we.
Os ydym yn awyddus i gael yr holl o'r plant yr elfen corff,
ac os ydych gofio yw bod tag h1 a'r tag ul,
gallwn ddweud document.body.childNodes.
A fydd hyn yn rhoi i ni yn ôl amrywiaeth sy'n cynnwys yr elfen h1
a'r elfen ul gan eu bod yn blant uniongyrchol y corff.
Os ydym am greu newidyn cynrychioli'r elfen ul
gallwn ddweud vrr ul = yna mae hyn yn cod i fyny yma,
ac yn awr oherwydd, yn syml, childNodes arae
gallwn mynegai i mewn iddo gyda [1] i gael ail elfen o'r rhesi.
Gyda hyn gwrthrych ul newydd gallwn gael mynediad gwahanol nodweddion yr elfen fel ei adnabod.
Os dywedwn ul.id sy'n mynd i fod yn hafal i'r rhestr llinyn
oherwydd dyna beth sydd gennym yn ein tudalen HTML.
Gall Rydym hefyd yn cael ei tagName, sydd, yn yr achos hwn yn mynd i fod
pa fath o elfen ydyw, yn yr achos hwn, ul.
Gall Rydym hefyd yn cael ei riant neu y nod uchod, sydd, yn yr achos hwn
yn mynd i fod yr elfen corff.
Os dywedwn. ParentNode, mae hynny'n mynd i fod yr un fath â document.body.
Wrth gwrs, mae hyn yn ul ​​blant ei hun,
er mwyn i ni dal i ddweud. childNodes ar yr elfen hon,
a dylai amrywiaeth hwn yn awr yn cael hyd 3 gan fod 3 eitem yn ein rhestr.
Yn olaf, efallai yr eiddo mwyaf defnyddiol yn mynd i fod. InnerHTML,
a bydd hyn yn cynnwys gwirioneddol y rhestr, sydd yn ein tudalen enghraifft
oedd y rhai 3 tagiau li.
Wrth gwrs, os oes gennym dogfen fawr, cael gafael ar elfennau
yn y modd hwn yn mynd i fod yn wirioneddol drafferthus oherwydd
yn y pen draw bydd rhaid i ni ddweud pethau fel document.body.childNodes
rhywbeth braced. childNodes braced rhywbeth arall,
ac mae'n mynd i ca 'n sylweddol feichus.
Yn hytrach yr hyn yr ydym wir eisiau ei wneud yw gallu holi y ddogfen,
felly yn union fel rydym yn chwilio am bethau ar y rhyngrwyd drwy ddefnyddio geiriau allweddol
mae gwir angen rhyw ffordd o chwilio ddogfen hon i gryno
cael dim ond yr elfennau yr ydym yn gofalu am yn ôl heb croesi
brig goeden gyfan i'r gwaelod.
Yn ffodus, porwyr modern yn ein galluogi i wneud hyn
gyda swyddogaeth arbennig o'r enw querySelectorAll,
a swyddogaeth hon yn ddadl sengl
hynny yw dewiswr CSS, ac mae'n mynd i ddychwelyd i ni
pob un o'r elfennau sy'n cyfateb i'r dewisydd.
Mae hynny'n golygu nad oes angen i chi ddysgu cystrawen newydd sbon ar gyfer ymholi i'r DOM.
Yn hytrach, gallwch wneud cais i'r wybodaeth yr ydych eisoes yn ei wybod
am ddewiswyr CSS.
Gadewch i ni edrych ar rai enghreifftiau o ymholi y ddogfen.
Os dywedwn querySelectorAll ac yn ei throsglwyddo y llinyn # foo
mae hynny'n mynd i roi i ni yn ôl yr elfen gyda'r ID foo.
Gallwch hefyd ddweud document.getElementByID
ac yn ei throsglwyddo i'r llinyn foo heb y hashtag.
Rydych yn mynd i fynd yn ôl yr un union gwrthrych.
Os yn lle hynny rydym yn llwyddo yn y llinyn. Bar i document.querySelectorAll
rydym yn mynd i fynd yn ôl yr holl elfennau gyda'r bar dosbarth.
Gallwn hefyd gyfuno detholwyr CSS.
Os byddwn yn pasio yn y llinyn # foo img
mae hynny'n mynd i roi i ni yn ôl yr holl elfennau ddelwedd
bod yn blant yr elfen gyda'r ID foo.
Fel y gallwch weld, drwy gyfuno dewiswyr mae gennym rai galluoedd chwilio pwerus iawn.
Ond o dan y cwfl, mae'r DOM mewn gwirionedd yn unig goeden,
a dewiswyr hyn yn ein galluogi i dynnu bod i ffwrdd i ryw raddau
oherwydd nid ydym bob amser yn poeni am y strwythur cyfan y goeden DOM.
A oedd yn drosolwg cyflym o'r DOM, a diolch am ymuno â ni.
[CS50.TV]