Satura rādītājs
Šīs apmācības pirmajā daļā mēs redzējām, kā DOM ir strukturēts un kā tas darbojas, tāpēc mēs turpināsim ar to strādāt, lai paplašinātu tā funkcionalitāti un spētu manipulēt ar visiem mūsu HTML dokumenta elementiem.Darbs ar DOM
Lai piekļūtu dokumenta objektam, mēs izmantojam globālu dokumenta mainīgo; Šis mainīgais ir viens no galvenajiem objektiem, ko pārlūks mums rada, jo tieši caur šo dokumenta objektu mēs varam piekļūt dokumenta informācijai kopumā un tas dod mums individuālu piekļuvi katram dokumenta objektam.
Kā vienmēr, aplūkosim piemēru, ar kuru mēs varam saskaņot zināmo teoriju ar veidu, kā tā tiek piemērota realitātē.
PiemērsIr daudz dažādu augļu veidu - vien ir vairāk nekā 500 banānu šķirņu. Kad mēs pievienojam neskaitāmus ābolu, apelsīnu un citu plaši pazīstamu augļu veidus, mēs esam tūkstošiem izvēles priekšā.
Viens no interesantākajiem augļu aspektiem ir katrā valstī pieejamā šķirne. Es dzīvoju netālu no Londonas, rajonā, kas ir pazīstams ar saviem āboliem.
Kods, ar kuru mēs izmantojam SAULE Tas ir diezgan īss un vienkāršs, tomēr tajā ir atspoguļoti dažādi izmantošanas veidi, ko mēs varam tam piešķirt, mēs pa daļai izskaidrosim kodu, lai redzētu, kā esam izmantojuši objektus.
Viena no vissvarīgākajām darbībām, ko mēs varam izmantot, ir iegūt informāciju no HTML dokumenta, ar kuru mēs strādājam, tāpēc pirmā rinda, ko esam ievietojuši savā kodā, to dara, un mēs to varam redzēt:
document.writeln ("
URL: "+ document.URL);
Šajā gadījumā mēs nolasām īpašuma vērtību dokuments.URL, kas atgriež pašreizējā dokumenta URL, tas ir, URL, ko pārlūkprogramma izmantoja, lai ielādētu dokumentu, kurā mums ir kods.
Mēs arī redzam, kā mēs izmantojam rakstīšanas metodi:
document.writeln ("
URL: "+ document.URL);
Šī metode vienkārši pievieno saturu mūsu HTML dokumenta beigām, šajā konkrētajā gadījumā mēs sākam, pievienojot tagu
un pēc tam URL rekvizītu, ar to mēs jau esam mainījuši DOM struktūru un saturu.
Tagad nākamā lieta, ko mēs darījām, bija atlasīt visus elementus, kuriem dokumentā ir atzīme p, šim nolūkam mēs izmantojam šādu rindu:
var elems = document.getElementsByTagName ("p");
Kā mēs redzam metodi getElementsByTagName Tas ir tas, kas kalpo mūsu mērķim, tajā pašā laikā visu, ko šī metode apkopo, mēs piešķiram mainīgajiem elementiem.
Nākamajā rindā mēs veicam iterāciju pār mainīgo elementu, iegūstot piešķirtos objektus. Katram atkārtotajam mēs pievienosim teksta rindiņu ar tās ID un vēlāk mainīsim tā atribūtus, lai mainītu tā izskatu .
for (var i = 0; i <elems.length; i ++) {document.writeln ("Elementa ID:" +elems [i] .id); elems [i] .style.border = "vidēji dubultmelna"; elems [i] .style.padding = "4px"; }
Kā redzam, katram elementam, ko esam saglabājuši mainīgajos elementos, mēs pievienojam apmali un papildus pievienojam polsterējumu.
Pēc visa šī, beidzot redzēsim, kā tas viss izskatās pārlūkprogrammā:
PALIELINĀT
Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu
