DOM Flashcards
kaj je dom
DOM je standard konzorcija W3C (World Wide Web Consortium) za dostop do
dokumentov.
Je od platforme in programskega jezika neodvisen standardni objektni model
za predstavitev HTML, XML in podobnih podatkovnih zapisov
Spletni brskalnik ne potrebuje DOM, da bi lahko prikazal spletno stran
DOM potrebuje JavaScript, da lahko bere in spreminja vrednosti HTML elementov.
Brskalnik ob nalaganju spletnega mesta ustvari objektni model dokumenta (DOM).
kaj je DOM
V DOM-u se HTML elementi obravnavajo kot objekti.
Lastnosti HTML elementov so lastnosti teh DOM objektov.
S pomočjo JavaScripta lahko lastnosti in vsebino HTML objektov dinamično
spreminjamo.
DOM da vsakemu odstavku, vsaki podobi, tudi vsakemu posameznemu členu v
dokumentu različno, individualno entiteto z možnostjo naslavljanja, manipuliranja ali celo kompletne zamenjave kadarkoli in kakorkoli želimo.
Objekti so individualni delčki, ki tvorijo spletno stran.
Kaj je DOM drevo
Drevo ima vozlišča (node) za elemente, ki predstavljajo oznake HTML in določajo strukturo dokumenta. Standard je zasnovan tako, da najprej ustvarimo vozlišče, nato mu dodamo otroka in lastnosti otroka.
JavaScript lahko dostopa do DOM ter spreminja elemente in lastnosti na strani
HTML.
DOM je standard, ki vsebuje informacije o tem, kako pridemo do elementov HTML, kako jih spreminjamo, dodajamo ali brišemo v dokumentih HTML. DOM uporablja metode za dostop do elementov HTML in izvajanje dejanj na njih.
navigacija po DOM
Vozlišča v drevesu vozlišč so hierarhično povezana, kar pomeni, da ima vsako vozlišče natanko enega starša, razen prvega vozlišča, ki nima starša. Vozlišče ima lahko več otrok. Sorodna vozlišča pa so vozlišča z istim staršem.
Lastnost childNodes[0] je enaka lastnosti firstChild. Vsebuje objekt, podoben polju, z lastnostjo length, s katero dostopa do podrejenih vozlišč.
značilnosti DOM
Omogoča navigacijo v vse smeri (naprej, nazaj)
Omogoča poljubno spreminjanje vsebine strani
Posledica je, da mora v pomnilniku hraniti vsaj del, če ne celotnega dokumenta
Uporaba je smiselna za:
-Manjše dokumente
-Algoritme, kjer dostopamo do elementov dokumenta v nepovezanem vrstnem redu
javascript in dom
HTML DOM je objektni model za HTML. Definirane ima:
HTML elemente kot objekte.
Lastnosti za vse HTML elemente.
Lastnosti DOM so vrednosti elementov HTML, ki jih nastavljamo ali spreminjamo.
Nekaj primerov DOM lastnosti:
– innerHTML - notranja besedilna predstavitev HTML elementa
– nodeName - ime elementa
– nodeValue - vrednost elementa
Metode za vse HTML elemente.
Z metodami DOM lahko izvajamo dejanja na elementih HTML.
Nekaj primerov DOM metod:
– getElementById(id) – vrne element s specifično vrednostjo atributa id
– getElementsByTagName(ime) – vrne vse elemente z določenim imenom
– appendChild(vozlišče) –vozlišču doda otroka
– removeChild(vozlišče) – elementu odstrani otroka
Dogodke za vse HTML elemente.
Dom in objekti na spletni strani
Window, Document, History, Image, Navigator, Location, Frame, Form
Form: Button, Checkbox, FileUpload, Hidden, Password, Radio, Reset, Select, Submit, Text, Textarea
razred document
Dokument (ali tudi vsebina znotraj enega okvirja, če je stran sestavljena iz okvirjev), ki ga prikazuje brskalnik, JavaScript vidi kot poseben objekt z imenom document.
metode razreda document
- document.open()- odpremo nov dokument za pisanje
- document.close() -zapremo dokument
- document.write(vrednost) -v dokument napišemo dano vrednost in še znak za novo vrstico
- document.writeln(vrednost)
- document.getElementsByName(ime)- vrne zbirko vseh elementov z danim imenom (name)
- document.getElementById(id) -vrne element z dano oznako (id)
- document.getElementsByTagName(ime značke HTML) -vrne zbirko vseh HTML elementov z danim imenom njihove značke
- document.getElementsByClassName(ime značke HTML) -vrne zbirko vseh HTML razredov z danim imenom njihove značke
- document.createElement(ime)- ustvari nov element dane vrste (parameter ime je ime značke)
- document.createTextNode(besedilo) -ustvari novo besedilo
- document.appendChild(element) -doda podrejen element HTML
- insertBefore(novo, obstoječe)-vstavi podrejeno vozlišče pred obstoječe podrejeno vozlišče.
- document.replaceChild(new, old)- zamenja podrejen element HTML
- document.removeChild(element)- odstrani podrejen element HTML
- remove()- Odstrani element iz dokumenta. Nima parametrov.
document-delo z zbirkami
Zbirke elementov (slik, programčkov, povezav, obrazcev) so podobne poljem.
Elementi so indeksirani v takem vrstnem redu, kot se pojavljajo v datoteki HTML.
Če element v datoteki HTML še poimenujemo, lahko dostopamo do njega tudi preko imena.
Dodatno pa lahko do poimenovanih elementov pridemo kar preko lastnosti
objekta document (ime lastnosti je kar ime elementa).
vozlišča DOM
Vsi elementi HTML, njihovi atributi in besedila so vozlišča. Nekateri elementi
vsebujejo druga vozlišča.
Tukaj je primer, kako lahko dostopamo do vrednosti vozlišč.
<p>To je prvi odstavek.</p>
Element <p> vsebuje besedilno vozlišče z vrednostjo “To je prvi odstavek.” Do
vrednosti besedila lahko dostopamo z lastnostjo innerHTML vozlišča:
textFromParagraph = document.getElementById(‘paragraph’).innerHTML;
Enako lahko storimo z dostopom do nodeValue:
textFromParagraph= document.getElementById(‘p’).childNodes[0].nodeValue;
window
Objekt razreda Window predstavlja okno brskalnika, če pa je dokument razdeljen na okvirje, potem je vsak okvir spet objekt razreda Window.
Do vseh lastnosti in metod okna, ki pripada našemu dokumentu lahko dostopamo neposredno.
Do okna, ki pripada kakšnemu drugemu odprtemu dokumentu (bodisi v drugem okvirju, bodisi v drugem oknu brskalnika) pa moramo dostopati preko ustreznih lastnosti.
metode window
-window.alert(sporočilo)- Prikaže opozorilno okno z danim sporočilom. Počaka, da uporabnik zapre okno.
- window.confirm(vprašanje) - Prikaže potrditveno okno z danim sporočilom ali vprašanjem. Počaka, da uporabnik odgovori. Vrne true, če je uporabnik pritisnil gumb za potrditev, sicer pa false.
-window.prompt(vprašanje, odgovor)-
Prikaže vnosno okno z danim vprašanjem in poljem za vnos odgovora, kjer je že vpisan
privzet odgovor. Ta odgovor lahko uporabnik spremeni, nato pa odgovori pritrdilno
(metoda vrne vpisani odgovor), ali pa prekliče vnos podatka (metoda vrne null).
-window.setTimeout(ukaz, ms)-Nastavi uro,ki po ms milisekundah izvrši dani ukaz.Ukaz mora biti podan kot zaporedje stavkov, zapisanih v nizu.
-window.close()- Zapre okno.
-window.open(url, ime, nastavitve)
Odpre novo okno:
* url - naslov spletne strani.Če je ta parameter prazen niz, odpre novo prazno okno.
* ime - določa ime okna, preko katerega lahko dostopamo do njega.
* nastavitve - niz,ki vsebuje seznam nastavitev za novo okno.Posamezne nastavitve v nizu ločimo z vejico. S temi nastavitvami lahko določamo:
* kateri deli okna naj se prikažejo (menubar, toolbar,location,directories,status, scrollbars),
* kako veliko naj bo okno (width, height)
* ali mu lahko velikost spremenimo (resizable)
pogovorna okna
-Opozorilno pogovorno okno alert(sporočilo)
-Potrditveno pogovorno okno
odgovor = confirm(vprašanje)
-Vnosno pogovorno okno
odgovor = prompt(vprašanje, vrednost)
opozorilno pogovorno okno
Opozorilno pogovorno okno alert(sporočilo)
-preprosto okno, v katerem lahko prikažemo poljubno sporočilo.
-Okno je običajno opremljeno z opozorilno sličico ob strani.
-Ima en sam gumb, s katerim zapremo okno.
-Okno odpremo z ukazom alert, ki mu damo za parameter sporočilo, ki ga želimo prikazati.
