Turinys
The SAULĖ kuris nurodo Dokumento objekto modelisTai ne kas kita, kaip mūsų HTML dokumente esančių elementų objekto atvaizdavimas, todėl galime užmegzti gilesnį ryšį su „Javascript“ ir jis pasiekia labai įdomių efektų; Tačiau, kad pasiektume tokį lygį, pirmiausia turime labai gerai žinoti, kaip elgtis DOM jo įgyvendinimui ir naudojimui.DOM supratimas
Išplėsdami sąvoką SAULĖ Taip pat galime pridurti, kad tai objektų kolekcija, vaizduojanti HTML Dokumente jo pavadinime matome, kas yra modelis, o raktinis žodis, kurį jis atstovauja, yra reprezentatyvus HTML dokumento modelis.
DOM yra pagrindinis WEB kūrimo įrankis, nes jis suteikia tiltą tarp struktūros ir turinio tarp mūsų HTML ir „Javascript“ dokumentų.
Modelį, apie kurį mes kalbame, sukuria naršyklė, aiškindama HTML kodą, pagrindinę DOM struktūrą galima pamatyti taip, kaip parodyta paveikslėlyje:
DOM testavimas
Atliksime keletą paprastų mūsų dokumento bandymų, kad priprastume, kaip galite su juo dirbti. SAULĖ, vienas iš pirmųjų bandymų, kurį galime atlikti, yra patikrinti, ar dokumente yra funkcijų, pažiūrėkime šiame kode:
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ų.
Čia mes ką tik padarėme paprastą, pirmiausia patikriname, ar metodas egzistuoja querySelectorAll, jei jis egzistuoja, tada kintamajam priskiriame visų elementų turinį img jie turi ID paratekstas, kai tikriname, ar nepavyksta, mes naudojame tuos pačius duomenis kitu būdu, šiuo atveju tai yra getElementById ir vėliau getElementByTagNameGalų gale, tiesiog naudodami mūsų apibrėžtą kintamąjį, kartojame jo turinį ir keičiame jų CSS savybes.
Galbūt čia matome neigiamą faktą, kad jei turėsime daug patikrinimų, mūsų kodas gali tapti sudėtingas ir neįskaitomas, viskas priklauso nuo kompromisų tarp to, ko norime pasiekti, ir būdo, kaip tai pasiekti, tokiu būdu mes galime gauti savo rezultatus.
Kitoje šios pamokos dalyje apžvelgsime keletą tobulesnių pavyzdžių, kaip toliau dirbti su DOM.Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką
