[Powered by Google Translate] [DOM]
[Tommy MacWilliams] [Harvard University]
[To je CS50.] [CS50.TV]
V tem videu bomo oglejte DOM.
Ko brskalnik naloži spletno stran, mora biti zastopana v spomin nekako.
Objektni model dokumenta ali DOM,
Opisuje, kako brskalnik predstavlja spletno stran v spomin.
V tem videu bomo si oglejte DOM v okviru JavaScript,
ampak DOM je jezik neodvisen koncept.
Na primer, PHP ima svojo lastno izvajanje DOM tudi.
Vendar pa je DOM pogosto jih uporablja JavaScript
ker Javascript nam omogoča, da spremeni vsebino spletne strani na letenje,
in DOM nam omogoča dostop do delov spletne strani.
Oglejmo si primer spletne strani.
Ok, zdaj pa poglejmo, kako se bo ta stran zastopana v DOM.
In vsako drevo mora imeti korensko vozlišče na vrhu.
Iz tega dokumenta je element HTML je root vozlišča
ker je prvi element, ki se pojavi.
Dodajmo korensko vozlišče za naše drevo.
Naj še enkrat si oglejte dokument HTML.
Obvestilo, da je telo tag ugnezdena znotraj oznake HTML.
To pomeni, da je telo element otrok HTML elementa.
To lahko predstavlja v našem DOM drevo, tako da telo listov
padajoči iz HTML.
Naredimo to.
Imamo telo pod HTML.
Zdaj lahko vidimo, da telo ima 2 otroka lastne,
H1 element in element ul.
To pomeni, da se lahko povežete obeh teh elementov
na telesno element, tako da je to naredil.
Imamo h1 in ul.
Končno, ul element ima 3 več otrok,
in to bo dopolnil našo DOM drevo, tako da je dodajanje li, li, li.
To dopolnjuje našo DOM drevo, in to je, kako brskalnik shranjevanje vaše spletne strani.
Zdaj pa si oglejte, kako lahko prečkala to drevo z uporabo JavaScript.
Mi lahko dostopate to drevo s posebno spremenljivko JavaScript imenovano dokument.
Ena lastnost tega dokumenta predmeta
je telo premoženje, in to predmet predstavlja
Telo element v našem primeru spletne strani.
Če smo želeli, da bi dobili vse otroke telesa elementa,
ki je, če se spomnimo, da je h1 tag ter ul tag,
lahko rečemo document.body.childNodes.
In nam bo to spet matriko, ki vsebuje tako h1 element
in ul element, ker oni so tako neposredna otroci telesa.
Če bomo želeli ustvariti spremenljivko, ki predstavlja ul element
bomo lahko VRR ul = potem je ta številka pravijo tukaj,
in zdaj, ker childNodes je preprosto niz
smo lahko kazalo na to s [1], da bi dobili drugi element te matrike.
S tem novim ul objekta lahko dostopate do različnih lastnosti elementa, kot je njegovo ID.
Če rečemo, ul.id da se dogaja, da je enak seznamu niz
ker to je tisto, kar jih imamo v našem HTML strani.
Lahko tudi dobila ime oznake, ki je v tem primeru se bo
kakšno vrsto elementa je v tem primeru, ul.
Mi lahko tudi dobili svoje starše ali vozlišče nad njim, ki je v tem primeru
se bo telo elementa.
Če rečemo. ParentNode, da se dogaja, da se enako kot document.body.
Seveda, to ul ima otroke svoje,
tako da bomo lahko še rečem. childNodes na ta element,
in ta niz bi zdaj morala dolžino 3, ker obstajajo 3 postavke v našem seznamu.
Končno, morda najbolj uporabna lastnost se bo. InnerHTML,
in to bo dejanska vsebina seznama, ki je v našem primeru strani
so bili ti 3 li oznake.
Seveda, če imamo veliko dokument, dostop elemente
na ta način se bo res nerodno, ker
na koncu bomo morali reči stvari, kot document.body.childNodes
Nosilec nekaj. childNodes nosilec nekaj drugega,
in to se dogaja, da se res nerodno.
Namesto tega, kaj si resnično želite storiti, je lahko za poizvedbo dokumenta,
tako da, tako kot smo iskali stvari na internetu s pomočjo ključnih besed
res potrebujemo nek način iščejo ta dokument jedrnato
priti nazaj samo elementi Skrbimo brez vozili
celotno drevo od vrha do dna.
Na srečo, sodobnih brskalnikov nam omogočajo, da to storijo
s posebno funkcijo, imenovano querySelectorAll,
in ta funkcija traja en argument
da je selektor CSS, in da se bo vrnil k nam
vse elemente, ki se ujemajo, da je selektor.
To pomeni, da vam ni treba naučiti celotno novo sintakso za poizvedovanje DOM.
Namesto tega lahko uporabite znanje že veste,
o CSS selektorje.
Oglejmo si nekaj primerov poizvedovanje dokument.
Če rečemo, querySelectorAll in ji mimo tega niza # foo
da se dogaja, da nam vrne element z ID foo.
Prav tako lahko rekli document.getElementById
in to mimo niz foo brez tega hashtag.
Boš dobil nazaj točno isto predmet.
Če bi namesto peljemo bar do document.querySelectorAll niz.
bomo dobili nazaj vse elemente z barom razreda.
Mi lahko kombinirate tudi CSS selektorjev.
Če se peljemo v nizu # foo img
da se dogaja, da nam spet vse slike elementov
da so otroci elementa z ID foo.
Kot lahko vidite, s kombiniranjem selektorji imamo nekaj zelo zmogljive možnosti iskanja.
Ampak pod pokrovom, DOM je res samo drevo,
in ti selektorji nam omogočajo, da abstraktna, da stran do neke mere
, ker ne bomo vedno skrbi celotni strukturi DOM drevesu.
To je bil hiter pregled DOM, in hvala za nam pridružili.
[CS50.TV]