[Powered by Google Translate] [DOM] [Tommy MacWilliams] [Harvard University] [Tas ir CS50.] [CS50.TV] Šajā video mēs spēsim veikt apskatīt DOM. Ja pārlūkprogramma lejupielādē mājas lapā, tai ir jābūt pārstāvētai atmiņā kaut kā. Dokumenta objekta modelis, vai DOM, apraksta, kā pārlūkprogramma ir mājas lapu atmiņā. Šajā video, mēs ņemšu apskatīt DOM kontekstā JavaScript, bet DOM ir valodas neatkarīgu koncepciju. Piemēram, PHP ir savs DOM īstenošanu, kā arī. Tomēr DOM bieži izmanto ar JavaScript kopš JavaScript ļauj mainīt saturu lapas par lidot, un DOM ļauj piekļūt daļām lapā. Pieņemsim to apskatīt, piemēram, tīmekļa lapas. Labi, tagad pieņemsim redzēt, kā šī lapa tiks pārstāvētas DOM. Un katrs koks ir jābūt saknes mezglu augšpusē. Par šo dokumentu, HTML elements ir saknes mezglu jo tas ir pirmais elements, kas parādās. Pieņemsim pievienot saknes mezglu, lai mūsu koku. Pieņemsim to apskatīt HTML dokumentā vēlreiz. Ievērojiet, ka ķermenis tag ir ligzdots iekšpusē HTML tag. Tas nozīmē, ka organisms elements ir bērns no HTML elements. Mēs varam pārstāvēt šo mūsu DOM koks, padarot ķermeņa lapa dilstošā no HTML. Darīsim to. Mums ir ķermeņa zem HTML. Tagad mēs varam redzēt, ka ķermenis ir 2 bērni savu, H1 elements un ul elements. Tas nozīmē, ka mēs var savienot gan no minētajiem elementiem uz ķermeņa elementu, tāpēc pieņemsim to darīt. Mums ir H1 un ul. Visbeidzot, ul elements ir 3 vairāk bērnu, un tas tiks pabeigta mūsu DOM koks, tāpēc pieņemsim pievienot li, li, li. Tas papildina mūsu DOM koku, un tas ir kā pārlūkprogramma ir uzglabātu jūsu mājas lapā. Tagad pieņemsim to apskatīt, kā mēs varam traversa šo koku, izmantojot JavaScript. Mēs varam piekļūt šo koku, izmantojot īpašu JavaScript mainīgo sauc dokuments. Viens īpašumā šo dokumentu objekta ir ķermeņa īpašums, un šis objekts ir ķermeņa elements mūsu piemērā mājas lapā. Ja mēs vēlējāmies, lai saņemtu visu par ķermeņa elementu bērniem, kas, ja jūs atceraties, ka H1 tagu un ul tag, mēs varam teikt document.body.childNodes. Un tas dos mums atpakaļ masīvu, kurā gan H1 elements un ul elements, jo viņi abi tiešie bērni organismā. Ja mēs vēlējāmies izveidot mainīgo, kas pārstāv ul elements mēs varam teikt, VRR ul =, tad šo kodu šeit, un tagad, jo childNodes ir vienkārši masīvs mēs varam indekss tajā ar [1], lai iegūtu otro elementu šī masīva. Ar šo jauno ul objektu, mēs varam piekļūt dažādiem īpašības elementa, piemēram, tās ID. Ja mēs sakām, ul.id, kas būs vienāda ar string sarakstam jo tas, kas mums ir mūsu HTML lapu. Mēs arī var iegūt savu tagName, kas šajā gadījumā būs kāda veida elementa tas ir, šajā gadījumā, ul. Mēs varam arī saņemt savu vecāku vai virs tā mezgla, kas šajā gadījumā būs ķermeņa elements. Ja mēs sakām. ParentNode, kas būs tāds pats kā document.body. Protams, tas ul ir bērni savas, tāpēc mēs vēl varam teikt childNodes uz šo elementu., un šis masīvs tagad ir garums 3, jo ir 3 vienības, kas mūsu sarakstā. Visbeidzot, iespējams, visvairāk noderīga manta būs innerHTML. un tas būs faktiskais saturs sarakstā, kas mūsu piemērā lapā bija tie 3 li tagus. Protams, ja mums ir liels dokumentu, piekļūstot elementus Šādā veidā būs ļoti sarežģīta, jo beidzot mums būs teikt lietas, piemēram document.body.childNodes kronšteins kaut ko. childNodes bracket kaut ko citu, un tas notiek, lai iegūtu patiešām apgrūtinoša. Tā vietā, ko mēs patiešām vēlamies darīt, ir jābūt iespējai vaicājumu dokumentu, tāpēc tāpat kā mēs meklējām lietām internetā, izmantojot atslēgvārdus mums tiešām ir nepieciešams kaut kādā veidā, meklējot šo dokumentu kodolīgi saņemt atpakaļ tikai tādi elementi, mēs rūpējamies par bez šķērso visu koku no augšas uz leju. Par laimi, mūsdienu pārlūkprogrammām ļauj mums to darīt ar īpašu funkciju sauc querySelectorAll, un šī funkcija aizņem vienu argumentu tas ir CSS selektoru, un tas notiek, lai atgrieztos pie mums visi elementi, kas atbilst šo selektoru. Tas nozīmē, jums nav nepieciešams, lai uzzinātu pilnīgi jaunu sintakse vaicājumiem DOM. Tā vietā jūs varat izmantot zināšanas, jūs jau zināt par CSS selektori. Pieņemsim to apskatīt dažas no vaicājumiem dokumentu piemēriem. Ja mēs sakām, querySelectorAll un nodot to šādā string # foo kas notiek, lai dotu mums atpakaļ elements ar ID foo. Jūs varat arī teikt document.getElementById un nodot to stīgu foo bez šo hashtag. Jūs esat dodas, lai saņemtu atpakaļ to pašu precīzu objektu. Ja tā vietā mēs caurlaide stīgu. Šķērslis document.querySelectorAll mēs esam gatavojas saņemt atpakaļ visus ar klases bārā elementiem. Mēs varam arī kombinēt CSS selektori. Ja mēs caurlaide stīgu # foo img kas notiek, lai dotu mums atpakaļ visus attēla elementiem ka ir bērni minētā elementa ar ID foo. Kā jūs varat redzēt, apvienojot šķirotāja mums ir daži patiešām spēcīgu meklēšanas iespējas. Bet ar kapuci, DOM ir tiešām tikai koks, un šie selektori ļauj mums abstrakti, ka prom zināmā mērā jo mēs ne vienmēr vienalga par visu struktūru ar DOM koku. Tas bija ātrs pārskats par DOM, un paldies par pievienoties mums. [CS50.TV]