[Powered by Google Translate] [DOM]
[Tommy MacWilliams] [Universitato Harvard]
[Ĉi tiu estas CS50.] [CS50.TV]
En ĉi tiu video ni tuj rigardu la DOM.
Kiam retumilo malŝarĝoj de retpaĝo, ĝi bezonas esti reprezentita en la memoro de iu maniero.
La dokumento objekto modelo, aŭ DOM,
priskribas kiel la retumilo reprezentas retpaĝon en memoro.
En ĉi tiu video, ni rigardu la DOM en la kunteksto de JavaScript,
sed DOM estas lingvo-sendependa koncepto.
Ekzemple, PHP havas sian propran DOM efektivigo tiel.
Tamen, DOM estas ofte uzataj de JavaScript
ĉar JavaScript permesas al ni ŝanĝi la enhavon de retpaĝo al la flugo,
kaj DOM nin permesas aliri partojn de retpaĝo.
Ni rigardu ekzemplon retpaĝo.
Okay, nun ni vidu kiel tiu paĝo estos reprezentata en la DOM.
Kaj cxiu arbo bezonas havi radiko nodo ĉe la supro.
Por ĉi tiu dokumento, la HTML-elemento estas la radika vertico
ĉar ĝi estas la unua elemento kiu aperas.
Ni aldonu radika vertico al nia arbo.
Ni rigardu la HTML dokumento denove.
Rimarku ke la korpo etikedo estas anidaba ene de la HTML-etikedo.
Tio signifas, ke la korpo elemento estas infano de la HTML-elemento.
Ni povas reprezenti tion en nia DOM arbo farante korpo folio
malsupreniranta de HTML.
Ni faras tion.
Ni havas korpon sub HTML.
Nun ni povas vidi ke korpo havas 2 infanoj de lia propra,
la h1 elemento kaj la ul elemento.
Tio signifas ke ni povas konekti la du de tiuj elementoj
al la korpo elemento, do ni faru tion.
Ni havas h1 kaj str.
Fine, la ul elemento havas 3 filojn pli,
kaj tio kompletigos nian DOM arbo, do ni aldonos li, li, li.
Ĉi kompletigas nian DOM arbo, kaj tiu estas kiel la TTT-legilo estas stokante via retpaĝo.
Nun ni rigardu kiel ni povas trairi ĉi arbo uzante JavaScript.
Ni povas aliri ĉi arbo uzante speciala JavaScript variablo nomita dokumento.
Unu propraĵo de ĉi tiu dokumento objekto
estas la korpo proprieto, kaj tiu objekto prezentas
la korpo elemento en nia ekzemplo retpaĝo.
Se ni volis atingi ĉiujn filojn de la korpo elemento,
kaj se vi memoras estas ke h1 etikedo kaj la ul etikedo,
ni povas diri document.body.childNodes.
Kaj tio donos al ni reen tabelo enhavas ambaŭ la h1 elemento
kaj la ul elemento ĉar ili ambaŭ estas rektaj idoj de la korpo.
Se ni volis krei variablo kiu reprezentas la ul elemento
ni povas diri vrr ul = tiam tiu kodo tien,
kaj nun ĉar childNodes estas simple tabelo
ni povas indekso en ĝin kun [1] por akiri la dua elemento de tiu tabelo.
Kun tiu nova ul objekto ni povas konsenti diversaj ecoj de la elemento kiel lia ID.
Se ni diras ul.id tiu tuj estos egala al la kordo listo
ĉar tio kion ni havas en nia HTML-paĝo.
Ni povas ankaŭ trovi ĝian tagName, kiu en tiu kazo tuj estos
kio tipo de elemento estas, en ĉi tiu kazo, str.
Ni povas ankaŭ preni lia patro aŭ de la nodo super ĝi, kiu en tiu kazo
tuj estos la korpo elemento.
Se ni diras. ParentNode, ke tuj estos la sama kiel document.body.
Kompreneble, ĉi tiu ul havas filojn de lia propra,
do ni povas ankoraŭ diri. childNodes sur ĉi tiu ero,
kaj ĉi tiu tabelo devus nun havi longo 3 ĉar estas 3 artikoloj en nia listo.
Fine, eble la plej utila propraĵo tuj estos. InnerHTML,
kaj tio estos la efektiva enhavo de la listo, kiuj en nia ekzemplo paĝo
estis tiuj 3 span etikedoj.
Kompreneble, se ni havas grandan dokumenton, alirante elementoj
en ĉi tiu maniero tuj estos vere maloportuna ĉar
fine ni devos diri aĵojn kiel document.body.childNodes
krampo ion. childNodes krampo ion alian,
kaj tuj ricevas vere maloportuna.
Anstataŭ tio, kion ni vere volas fari estas povos konsulti la dokumento,
tiel ĝuste kiel ni serĉis tion en la interreto uzante ŝlosilvortoj
Ni vere bezonas iel de serĉado tiun dokumenton al koncize
reiri nur la elementojn ni zorgas pri sen trairi
la tutan arbon supre sube.
Feliĉe, modernaj foliumiloj permesi al ni fari tion
kun speciala funkcio nomita querySelectorAll,
kaj ĉi tiu funkcio prenas sola argumento
kiu estas la CSS selector, kaj gxi tuj revenos al ni
ĉiuj elementoj kiuj kongruas ke selector.
Tio signifas ke vi ne bezonas lerni tute novan sintakson por informpeti la DOM.
Anstataŭe vi povas apliki la konojn vi jam scias,
pri CSS selectores.
Ni rigardu kelkajn ekzemplojn de informpeti la dokumento.
Se ni diras querySelectorAll kaj fordoni ĉi string # foo
ke tuj doni al ni redonis la elemento kun la ID foo.
Vi povas ankaŭ diri document.getElementByID
kaj fordoni la kordo foo sen tiu etiketo.
Vi tuj reiros la sama ĝusta objekto.
Se anstataŭe ni pasas la kordoj. Riglilon document.querySelectorAll
Ni tuj reiri ĉiu el la elementoj de la klaso trinkejo.
Ni povas ankaŭ kombini CSS selectores.
Se ni pasas en la kordo # foo img
ke tuj doni al ni ĉiuj revenis de la bildo elementoj
ke estas filoj de la elemento kun la ID foo.
Kiel vi povas vidi, kombinante selectores ni havas iujn vere potenca serĉo kapablojn.
Sed sub la kapuĉo, la DOM estas vere nur arbo,
kaj ĉi tiuj selectores ni permesos abstrakta ol transkuri al iu grado
ĉar ni ne ĉiam zorgas pri la tuta strukturo de la DOM arbo.
Tio estis rapidan superrigardon de la DOM, kaj dankon pro aliĝo al ni.
[CS50.TV]