Korištenje DOM elemenata kroz JavaScript getElementById

Izrada dinamičkih stranica uključuje izravan pristup postojećim elementima, stvaranje novih i promjene u njihovim svojstvima. Pomoću javascript.getElementById javascript metode možete pronaći element stranice s navedenim identifikatorom i promijeniti njegova svojstva.

[thumb] http://hi-news.pp.ua/uploads/posts/2017-11/vikoristannya-elementv-dom-cherez-javascript-getelementbyid_961.jpeg [/thumb]
Metoda je primjenjiva na sve HTML oznake koje imaju jedinstveni identifikator. Uglavnom se koristi za promjenu svojstava i sadržaja oznaka "div".

Elementi stranice

Hipertekstualni format HTML-a omogućuje vam opisivanje jedinstvenih elemenata i elemenata razreda. Po definiciji, jedinstveni element je uvijek jedan na stranici, a elementi razreda mogu se postaviti.


Kada se stranica učita, pretvara se u DOM stablo u kojem svaki element zauzima svoje mjesto. Postoji mnogo načina za pomicanje stabla elemenata, ali kada ispunite stranicu s informacijama i promijenite svojstva njezinih elemenata, često je dovoljno pozvati se na jedinstveni element njegovim brojem.

Primjer opisa jedinstvenih elemenata

U tablici CSS izrađeni su opisi tri djevice: zaglavlja stranice, sadržaj stranica i njegova obuća (podrum). Prema tome, imena identifikatora: scHeader, scContent i scFooter.
[thumb] http://hi-news.pp.ua/uploads/posts/2017-11/vikoristannya-elementv-dom-cherez-javascript-getelementbyid_342.jpeg
U odjeljku tijela "Umetnuo je opis varijabli javascripta: iLoadHeight, iLoadWidth i svako čudo njegovih koordinata duž Y-osi i vertikalnih dimenzija. Koordinate duž osi X su nula, a veličina te osijednaka je širini prozora preglednika. Neobavezne varijable za pristup stavkama: dHeader, dContent i dFooter.
[thumb] http://hi-news.pp.ua/uploads/posts/2017-11/vikoristannya-elementv-dom-cherez-javascript-getelementbyid_923.jpeg
Korištenje javascript metode getElementById, dHeader, dContent i dFooter varijable primile su stvarne vrijednosti i korištene su za pozicioniranje trenutne veličine prozora preglednika. U kontekstu ovog primjera, prisutnost varijabli u zaglavlju, sadržaju i podnožju omogućuje vam da promijenite njihova svojstva na takav način da su uvijek na pravom mjestu i da imaju ispravne dimenzije prilikom promjene veličine prozora preglednika.


Osnovna svojstva elemenata

Glavna svrha javascripta getElementById metode je promijeniti sadržaj i svojstva elementa. Prvo se u pravilu izvršava izrazom dodjele:
  • dHeader.innerHTML = 'Start: Y =' + iHeaderCooY + '; H = '+ iHeaderSizeY;
  • dContent.innerHTML = 'Početak: Y =' + iContentCooY + '; H = '+ iContentSizeY;
  • dFooter.innerHTML = 'Start: Y =' + iFooterCooY + '; H = '+ iFooterSizeY;
  • Ove tri izjave ispunjavaju sadržaj oznaka informacijama o tome što su dobile koordinatu Y i koja je njihova visina vertikalno. Svojstvo innerHTML vam omogućuje da stavite bilo koje druge oznake u oznaku, to jest, možete stvoriti proizvoljno složeno unutarnje oblikovanje bilo kojeg jedinstvenog elementa stranice. Konkretno, u bilo kojem trenutku možete formatirati zaglavlje, sadržaj stranice i podnožje prema potrebi. Umetanjem drugih oznaka unutar ovih oznaka, možete se pozvati na klase i druge ididifikatore opisane u CSS pravilima.[thumb] http://hi-news.pp.ua/uploads/posts/2017-11/vikoristannya-elementv-dom-cherez-javascript-getelementbyid_374.jpegČesta primjena metodejavascript getElementById - promjena svojstava elemenata. U tom kontekstu shvaća se dinamička promjena pravila CSS-a. Ova pravila su dostupna kroz opće svojstvo "stila", koji uključuje gotovo sva svojstva (pravila) CSS-a. U gornjem primjeru korištena su pravila "style.top", "style.left". Slično tome, možete promijeniti druga pravila elemenata stranice. Treći put da je javascript getElementById metoda uvelike pojednostavljuje rad developera: grupiranje i rastavljanje oznaka u određeni jedinstveni element. Na primjer, u odjeljku sadržaja stranice postavlja se tablica s informacijama, koja se izvodi u obliku oznaka, koja se na određeni način naziva po redovima i stupcima. Sve treba čitati i obrađivati, zadržavajući izvorni položaj i dizajn.

    Povezane publikacije

    CSS efekti: zaokruživanje uglova elemenata HTML: događaji i oblik elemenata Kako odrediti broj elemenata u nizu PHP-a? Svojstvo CSS margine: vanjski uvjeti elemenata Metoda AppendTo u jQuery: umetanje elemenata Kroz enkripciju: opis i primjena