[Powered by Google Translate] [DOM]
[Tommy MacWilliams] [Chuo Kikuu cha Harvard]
[Hii ni CS50.] [CS50.TV]
Katika video hii tunakwenda kuangalia DOM.
Wakati browser downloads webpage, inahitaji kuwa na kuwakilishwa katika kumbukumbu ya namna fulani.
kitu hati mfano, au DOM,
inaeleza jinsi browser inawakilisha webpage katika kumbukumbu.
Katika video hii, tutaweza kuangalia DOM katika mazingira ya JavaScript,
lakini DOM ni dhana ya lugha-huru.
Kwa mfano, PHP ina DOM yake mwenyewe utekelezaji pia.
Hata hivyo, DOM ni mara nyingi itatumika kwa JavaScript
tangu JavaScript inaruhusu sisi kubadilisha yaliyomo ya tovuti juu ya kuruka,
na DOM inaruhusu sisi kupata sehemu ya tovuti.
Hebu tuangalie mfano webpage.
Sawa, sasa hebu angalia jinsi ukurasa huu itakuwa kuwakilishwa katika DOM.
Na kila mti anahitaji kuwa na nodi mizizi kwa juu.
Kwa waraka huu, kipengele HTML ni nodi mizizi
sababu ni kipengele kwanza kwamba inaonekana.
Hebu kuongeza nodi mizizi ya mti wetu.
Hebu tuangalie hati HTML tena.
Taarifa kwamba tag mwili ni Furushi ndani ya tag HTML.
Hii ina maana kwamba kipengele mwili ni mtoto wa kipengele HTML.
Tunaweza kuwakilisha jambo hili katika mti wetu DOM kwa kufanya mwili jani
akishuka kutoka HTML.
Hebu kufanya hivyo.
Tuna mwili chini ya HTML.
Sasa tunaweza kuona mwili kwamba ana watoto 2 wa peke yake,
kipengele h1 na kipengele ul.
Hii ina maana kwamba tunaweza kuungana wote wa mambo hayo
kwa kipengele mwili, hivyo hebu kufanya hivyo.
Tuna h1 na ul.
Mwisho, kipengele ul ina 3 watoto zaidi,
na hii itaendelea kukamilisha wetu DOM mti, hebu kuongeza li, li, li.
Hii tamati mti wetu DOM, na hii ni jinsi browser ni hifadhi ya tovuti yako.
Sasa hebu tuangalie jinsi tunaweza tembeeni mti huu kwa kutumia JavaScript.
Tuweze kupata mti huu kwa kutumia maalum JavaScript variable kuitwa hati.
Moja mali ya kitu hati hii
ni mali ya mwili, na kitu hii inawakilisha
kipengele mwili katika mfano tovuti yetu.
Kama sisi alitaka kupata wote wa wana wa kipengele mwili,
ambayo kama wewe kukumbuka ni kwamba tag h1 na tag ul,
tunaweza kusema document.body.childNodes.
Na hii kutoa yetu nyuma safu zenye wawili kipengele h1
na kipengele ul tangu wao ni wa moja kwa moja watoto wa mwili.
Kama sisi alitaka kujenga kutofautiana anayewakilisha kipengele ul
tunaweza kusema vrr ul = basi hii kanuni hapa juu,
na sasa kwa sababu childNodes ni tu safu
tunaweza index ndani yake na [1] kupata kipengele pili wa safu hiyo.
Na kitu hii mpya ul tuweze kupata mali mbalimbali ya kipengele kama ID yake.
Tukisema ul.id kwamba kinaendelea kuwa sawa na orodha kamba
kwa sababu hiyo ni nini sisi katika ukurasa wetu HTML.
Tunaweza pia kupata tagName yake, ambayo katika kesi hii ni kwenda kuwa
ni aina gani ya kipengele ni, katika kesi hii, ul.
Tunaweza pia kupata mzazi wake au nodi juu ya hayo, ambayo katika kesi hii
ni kwenda kuwa kipengele mwili.
Kama sisi kusema. ParentNode, kwamba kinaendelea kuwa sawa kama document.body.
Bila shaka, ul hii ina watoto wa peke yake,
hivyo bado tunaweza kusema childNodes. juu ya kipengele hiki,
na safu hii lazima sasa kuwa na urefu 3 kwa sababu kuna vitu 3 katika orodha yetu.
Hatimaye, labda mali muhimu zaidi ni kwenda kuwa innerHTML.,
na hii itakuwa yaliyomo halisi ya orodha, ambayo katika mfano ukurasa wetu
walikuwa wale 3 li vitambulisho.
Bila shaka, kama tuna hati kubwa, kupata huduma ya vipengele
kwa namna hii ni kwenda kuwa mbaya kweli kwa sababu
hatimaye tutaweza kuwa na kusema mambo kama document.body.childNodes
bracket kitu. childNodes mabano kitu kingine,
na ni kwenda kupata kweli mbaya.
Badala yake nini sisi kweli unataka kufanya ni kuwa na uwezo wa swala hati,
hivyo tu kama sisi searched kwa ajili ya mambo ya mtandao kwa kutumia maneno
kweli tunahitaji baadhi ya njia ya kutafuta hati hii kwa ufupi
kupata nyuma tu mambo ya sisi huduma ya juu bila apitaye
nzima mti juu hadi chini.
Kwa bahati, browsers kisasa kuruhusu sisi kufanya hivyo
na kazi maalum iitwayo querySelectorAll,
na kazi hii inachukua hoja moja
kwamba ni selector CSS, na ni kwenda na kurudi kwetu
wote wa mambo wanaofanana kwamba selector.
Hiyo ina maana huna haja ya kujifunza nzima mwezi syntax kwa querying DOM.
Badala yake unaweza kutumia maarifa tayari kujua
kuhusu CSS selectors.
Hebu tuangalie baadhi ya mifano ya querying hati.
Tukisema querySelectorAll na kuupitisha hii kamba # foo
hiyo ni kwenda kutupa nyuma kipengele na foo ID.
Unaweza pia kusema document.getElementByID
na kuupitisha foo kamba bila hashtag kwamba.
Wewe ni kwenda kupata nyuma huo halisi kitu.
Kama badala ya sisi kupita bar kamba. Kwa document.querySelectorAll
tunakwenda kupata nyuma wote wa mambo na bar darasa.
Tunaweza pia kuchanganya selectors CSS.
Kama sisi kupita katika kamba # foo img
hiyo ni kwenda kutupa nyuma wote wa mambo ya picha
kwamba ni watoto wa kipengele na foo ID.
Kama unaweza kuona, kwa selectors kuchanganya tuna baadhi ya uwezo wa kutafuta kweli nguvu.
Lakini chini ya Hood, DOM ni kweli tu mti,
na hizi selectors kuruhusu sisi abstract kuwa mbali na baadhi ya shahada
kwa sababu sisi wala daima huduma kuhusu mfumo mzima wa mti DOM.
Hiyo ilikuwa ni maelezo ya haraka ya DOM, na shukrani kwa ajili ya kujiunga nasi.
[CS50.TV]