Turinys
Pirmoje šios pamokos dalyje mes matėme, kaip DOM yra struktūrizuotas ir kaip jis veikia, ir toliau dirbsime su juo, kad išplėstume jo funkcijas ir galėtume manipuliuoti visais mūsų HTML dokumento elementais.Darbas su DOM
Norėdami pasiekti dokumento objektą, naudojame visuotinį dokumento kintamąjį; Šis kintamasis yra vienas iš pagrindinių objektų, kuriuos mums sukuria naršyklė, nes būtent per šį dokumento objektą galime pasiekti visą dokumento informaciją ir suteikia mums individualią prieigą prie kiekvieno dokumento objekto.
Kaip visada, pažiūrėkime pavyzdį, su kuriuo galime suderinti žinomą teoriją su tuo, kaip ji taikoma realybėje.
PavyzdysYra daug įvairių vaisių - vien tik bananų yra daugiau nei 500 veislių. Kai pridėsime daugybę obuolių, apelsinų ir kitų gerai žinomų vaisių rūšių, susidursime su tūkstančiais pasirinkimų.
Vienas iš įdomiausių vaisių aspektų yra kiekvienoje šalyje prieinama įvairovė. Aš gyvenu netoli Londono, rajone, kuris yra žinomas dėl savo obuolių.
Kodas, su kuriuo mes naudojame SAULĖ Tai gana trumpas ir paprastas, tačiau jis atspindi įvairius naudojimo būdus, kuriuos galime suteikti, mes iš dalies paaiškinsime kodą, kad pamatytume, kaip panaudojome objektus.
Vienas iš pagrindinių veiksmų, kuriuos galime naudoti, yra gauti informaciją iš HTML dokumento, su kuriuo dirbame, todėl pirmoji eilutė, kurią įdėjome į savo kodą, tai daro ir mes galime tai pamatyti:
document.writeln ("
URL: "+ document.URL);
Šiuo atveju mes skaitome turto vertę dokumentas.URL, kuris grąžina dabartinio dokumento URL, tai yra URL, kurį naršyklė naudojo įkeliant dokumentą, kuriame turime kodą.
Mes taip pat matome, kaip naudojame rašymo metodą:
document.writeln ("
URL: "+ document.URL);
Šis metodas tiesiog prideda turinio prie mūsų HTML dokumento pabaigos, šiuo konkrečiu atveju mes pradedame pridedant žymą
ir tada URL nuosavybę, šiuo būdu jau pakeitėme DOM struktūrą ir turinį.
Kitas dalykas, kurį mes padarėme, buvo pasirinkti visus elementus, kurių dokumente yra p žyma, tam naudojame šią eilutę:
var elems = document.getElementsByTagName ("p");
Kaip mes matome metodą getElementsByTagName Tai yra tas, kuris tarnauja mūsų tikslui, tuo pačiu metu viską, ką renka šis metodas, priskiriame kintamiesiems elementams.
Kitoje eilutėje kartojame kintamąjį elems, gaudami priskirtus objektus, prie kiekvieno, kurį kartosime, pridėsime eilutę teksto su jo ID ir vėliau pakeisime jo atributus, kad pakeistume jo išvaizdą .
for (var i = 0; i <elems.length; i ++) {document.writeln ("Elemento ID:" +elems [i] .id); elems [i] .style.border = "vidutinis dvigubas juodas"; elems [i] .style.padding = "4px"; }
Kaip matome, prie kiekvieno elemento, kurį išsaugojome kintamuose elementuose, pridedame kraštinę ir papildomai pridedame užpildą.
Po viso to pagaliau pažiūrėkime, kaip visa tai atrodo naršyklėje:
DIDELIS
Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką 
