[Powered by Google Translate] [DOM]
[Tommy MacWilliams] [Harvard Unibertsitateko]
[Hau da CS50.] [CS50.TV]
Bideo honetan DOM begirada bat hartu behar dugu.
Noiz nabigatzaile bat web orri bat deskargatzen du, memoria egin behar nolabait irudikatzen du.
Dokumentuaren objektu-eredua, edo DOM,
nola nabigatzailea memorian web orrialde bat adierazten du.
Bideo honetan, DOM begirada bat hartuko dugu Javascript testuinguruan,
baina DOM hizkuntza-independentea kontzeptu bat da.
Adibidez, PHP bere DOM ezartzeko ditu baita ere.
Hala ere, maiz DOM Ikusteko Javascript-a erabiltzen
Ikusteko Javascript-a esker, web orri baten edukia aldatzeko gurekin hegan geroztik,
DOM eta aukera ematen du web-orri baten zatiak sartzeko aukera ematen digu.
Ikus dezagun, adibidez web orri bat ikustea.
Ongi da, orain nola utzi orri hau DOM egingo den irudikatzen en ikusi.
Eta zuhaitz bakoitzak erro nodo bat dute goialdean.
Dokumentu honetan, HTML elementu erroko nodoa da
delako lehenengo elementu bat agertuko da.
Dezagun gehitu erro nodo bat gure zuhaitza.
Ikus dezagun HTML dokumentu begirada bat berriro.
Iragarki gorputza etiketa hori HTML etiketa baten barruan habiaratu.
Horrek esan nahi du gorputza elementu hori HTML elementu haur bat da.
Honek adierazten dezakegu gure DOM zuhaitz gorputz hosto bat eginda
HTML beherantz.
Dezagun hori.
Gorputza daukagu ​​HTML azpian.
Orain ikusiko gorputza 2 ditu bere seme-alabak ahal izango dugu,
du H1 elementu eta ul elementua.
Horrek esan nahi du elementu horiek biak dugun konektatu ahal
gorputzaren elementu, beraz, utzi egin dutela.
H1 eta ul bat daukagu.
Azkenik, ul elementu ditu 3 seme-alaba,
eta hau gure DOM zuhaitz osatuko du, eta, beraz dezagun gehitu li, li, li.
Hau da gure DOM zuhaitz osatzen du, eta hau da, nola nabigatzailea zure web da gordetzeko.
Orain dezagun nola Zuhaitz hau JavaScript erabiliz zeharkatzeko aukera izango dugu begirada bat.
Zuhaitz berezia da hau JavaScript aldagai izeneko dokumentua erabiliz sartu ahal izango dugu.
Objektu bat dokumentu honen jabetza
gorputzaren jabetza da, eta objektu honek adierazten
Adibidez, gure web-orrian elementu gorputza.
Nahi izan dugu, gorputza elementu ume guztiak lortu nahi izanez gero,
horrek gogoratu baduzu h1 etiketa eta ul-etiketa da,
document.body.childNodes esan dezakegu.
Eta honetan gurekin emango array bat itzuli bai H1 elementu dauzkan
eta ul elementu Oraindik baitute gorputzaren zuzeneko bi seme-alaba.
Nahi izan dugu aldagai bat ul elementu ordezkari sortzeko bada
esan vrr ul = ondoren, kode hau ezin dugu hemen,
eta orain childNodes da, besterik gabe, delako array bat
sartu indizea [1] array batera duten elementu bigarren lortzeko. dezakegu
Hau ul berriak objektu hainbat elementu ezaugarri bere identifikazio bezala sartu ahal izango dugu.
Esaten dugu ul.id hori kate zerrenda berdina izango bada
hori da gure orria HTML dugulako.
Era berean, ezin dugu lortu bere tagName, kasu honetan izango da
zer elementu mota da, kasu honetan, ul batean.
Era berean, ezin dugu lortu bere guraso edo gainean nodo, kasu honetan
gorputz elementua izango da.
Esaten dugu. ParentNode, hori document.body gisa berdina izango bada.
Jakina, ul honek bere seme-alabak,
beraz, oraindik ere esan dezakegu. childNodes elementu honen gainean,
eta array behar dute luzera 3 daude, 3, gure zerrendako elementuak direlako.
Azkenik, agian erabilgarria jabetza da izango. InnerHTML,
eta zerrenda honen edukia egiazkoa izango da, adibidez, gure orria
ziren 3 li tags.
Jakina, izan badugu handi dokumentu bat, elementu sartzean
era honetan benetan astuna izango delako
azkenean izan document.body.childNodes bezalako gauzak esaten dugu
parentesi zerbait. parentesi beste zerbait childNodes,
astuna eta benetan iritsi da joan.
Horren ordez, zer nahi dugun egin ahal izango da dokumentu galdetzeko,
beraz, besterik gabe, gustuko gauzak bilatuko dugu Interneteko gako-hitzen bidez
benetan behar dugu dokumentu hau bilatzen succinctly modu batzuk
itzuli bakarrik elementuak zaintzeko dugun zeharkatu gabe
zuhaitz osoa goitik behera.
Zorionez, nabigatzaile moderno hau egiteko aukera ematen digu
funtzio berezi bat deitu querySelectorAll batera,
eta funtzio honek argumentu soil bat hartzen du
duten CSS hautatzailea da, eta gurekin itzuliko da joan
elementu bat datozen hautatzaileak duten guztiak.
Horrek esan nahi du, ez duzu berri oso bat sintaxia ikasteko DOM du kontsulta egiteko.
Horren ordez, ezagutza jakin jadanik eska dezakezu
CSS Selectors buruz.
Ikus dezagun dokumentua kontsulta adibide batzuk begirada bat.
Esaten dugu querySelectorAll bada, eta pasatzen da hau kate # foo
hori gurekin itzuli ID foo duen elementua dugu.
Dezakezu ere esan document.getElementByID
eta pasatu da hashtag hori gabe foo katea.
Itzuli berean zehatza objektu duzu.
Ordez document.querySelectorAll bar katea. Pasatzeko badugu
itzuli klase barra elementu guztiak ditugu.
Era berean, ezin dugu konbinatu CSS Selectors.
Katea # foo img gara pasatzen bada
hori gurekin itzuli irudiaren elementu guztiak joan
duten ID foo elementu ume daude.
Ikusten duzun bezala, Selectors konbinatuz batzuk benetan indartsu bilaketa gaitasunak ditugu.
Baina kanpaia azpian, DOM benetan besterik zuhaitz bat,
eta Selectors onartzen abstraktu gurekin urruntzen duten neurri batzuk
ez delako beti DOM zuhaitzaren egitura osoa zaintzeko.
DOM duten ikuspegi orokor bat, eta gurekin atxikitzeko esker izan da.
[CS50.TV]