1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [DOM]

2
00:00:02,000 --> 00:00:04,000
[Tommy MacWilliams] [Harvard University]

3
00:00:04,000 --> 00:00:07,000
[To je CS50.] [CS50.TV]

4
00:00:07,000 --> 00:00:10,000
V tem videu bomo oglejte DOM.

5
00:00:10,000 --> 00:00:14,000
Ko brskalnik naloži spletno stran, mora biti zastopana v spomin nekako.

6
00:00:14,000 --> 00:00:17,000
Objektni model dokumenta ali DOM,

7
00:00:17,000 --> 00:00:20,000
Opisuje, kako brskalnik predstavlja spletno stran v spomin.

8
00:00:20,000 --> 00:00:24,000
V tem videu bomo si oglejte DOM v okviru JavaScript,

9
00:00:24,000 --> 00:00:26,000
ampak DOM je jezik neodvisen koncept.

10
00:00:26,000 --> 00:00:30,000
Na primer, PHP ima svojo lastno izvajanje DOM tudi.

11
00:00:30,000 --> 00:00:32,000
Vendar pa je DOM pogosto jih uporablja JavaScript

12
00:00:32,000 --> 00:00:36,000
ker Javascript nam omogoča, da spremeni vsebino spletne strani na letenje,

13
00:00:36,000 --> 00:00:39,000
in DOM nam omogoča dostop do delov spletne strani.

14
00:00:39,000 --> 00:00:43,000
Oglejmo si primer spletne strani.

15
00:00:43,000 --> 00:00:48,000
Ok, zdaj pa poglejmo, kako se bo ta stran zastopana v DOM.

16
00:00:48,000 --> 00:00:51,000
In vsako drevo mora imeti korensko vozlišče na vrhu.

17
00:00:51,000 --> 00:00:54,000
Iz tega dokumenta je element HTML je root vozlišča

18
00:00:54,000 --> 00:00:56,000
ker je prvi element, ki se pojavi.

19
00:00:56,000 --> 00:01:00,000
Dodajmo korensko vozlišče za naše drevo.

20
00:01:00,000 --> 00:01:03,000
Naj še enkrat si oglejte dokument HTML.

21
00:01:03,000 --> 00:01:09,000
Obvestilo, da je telo tag ugnezdena znotraj oznake HTML.

22
00:01:09,000 --> 00:01:14,000
To pomeni, da je telo element otrok HTML elementa.

23
00:01:14,000 --> 00:01:17,000
To lahko predstavlja v našem DOM drevo, tako da telo listov

24
00:01:17,000 --> 00:01:20,000
padajoči iz HTML.

25
00:01:20,000 --> 00:01:22,000
Naredimo to.

26
00:01:22,000 --> 00:01:24,000
Imamo telo pod HTML.

27
00:01:24,000 --> 00:01:28,000
Zdaj lahko vidimo, da telo ima 2 otroka lastne,

28
00:01:28,000 --> 00:01:31,000
H1 element in element ul.

29
00:01:31,000 --> 00:01:34,000
To pomeni, da se lahko povežete obeh teh elementov

30
00:01:34,000 --> 00:01:36,000
na telesno element, tako da je to naredil.

31
00:01:36,000 --> 00:01:40,000
Imamo h1 in ul.

32
00:01:40,000 --> 00:01:43,000
Končno, ul element ima 3 več otrok,

33
00:01:43,000 --> 00:01:50,000
in to bo dopolnil našo DOM drevo, tako da je dodajanje li, li, li.

34
00:01:50,000 --> 00:01:56,000
To dopolnjuje našo DOM drevo, in to je, kako brskalnik shranjevanje vaše spletne strani.

35
00:01:56,000 --> 00:02:02,000
Zdaj pa si oglejte, kako lahko prečkala to drevo z uporabo JavaScript.

36
00:02:02,000 --> 00:02:10,000
Mi lahko dostopate to drevo s posebno spremenljivko JavaScript imenovano dokument.

37
00:02:10,000 --> 00:02:13,000
Ena lastnost tega dokumenta predmeta

38
00:02:13,000 --> 00:02:16,000
je telo premoženje, in to predmet predstavlja

39
00:02:16,000 --> 00:02:19,000
Telo element v našem primeru spletne strani.

40
00:02:19,000 --> 00:02:23,000
Če smo želeli, da bi dobili vse otroke telesa elementa,

41
00:02:23,000 --> 00:02:26,000
ki je, če se spomnimo, da je h1 tag ter ul tag,

42
00:02:26,000 --> 00:02:37,000
lahko rečemo document.body.childNodes.

43
00:02:37,000 --> 00:02:41,000
In nam bo to spet matriko, ki vsebuje tako h1 element

44
00:02:41,000 --> 00:02:46,000
in ul element, ker oni so tako neposredna otroci telesa.

45
00:02:46,000 --> 00:02:50,000
Če bomo želeli ustvariti spremenljivko, ki predstavlja ul element

46
00:02:50,000 --> 00:02:57,000
bomo lahko VRR ul = potem je ta številka pravijo tukaj,

47
00:02:57,000 --> 00:03:00,000
in zdaj, ker childNodes je preprosto niz

48
00:03:00,000 --> 00:03:07,000
smo lahko kazalo na to s [1], da bi dobili drugi element te matrike.

49
00:03:07,000 --> 00:03:13,000
S tem novim ul objekta lahko dostopate do različnih lastnosti elementa, kot je njegovo ID.

50
00:03:13,000 --> 00:03:17,000
Če rečemo, ul.id da se dogaja, da je enak seznamu niz

51
00:03:17,000 --> 00:03:20,000
ker to je tisto, kar jih imamo v našem HTML strani.

52
00:03:20,000 --> 00:03:24,000
Lahko tudi dobila ime oznake, ki je v tem primeru se bo

53
00:03:24,000 --> 00:03:32,000
kakšno vrsto elementa je v tem primeru, ul.

54
00:03:32,000 --> 00:03:36,000
Mi lahko tudi dobili svoje starše ali vozlišče nad njim, ki je v tem primeru

55
00:03:36,000 --> 00:03:38,000
se bo telo elementa.

56
00:03:38,000 --> 00:03:43,000
Če rečemo. ParentNode, da se dogaja, da se enako kot document.body.

57
00:03:43,000 --> 00:03:46,000
Seveda, to ul ima otroke svoje,

58
00:03:46,000 --> 00:03:50,000
tako da bomo lahko še rečem. childNodes na ta element,

59
00:03:50,000 --> 00:03:55,000
in ta niz bi zdaj morala dolžino 3, ker obstajajo 3 postavke v našem seznamu.

60
00:03:55,000 --> 00:04:02,000
Končno, morda najbolj uporabna lastnost se bo. InnerHTML,

61
00:04:02,000 --> 00:04:06,000
in to bo dejanska vsebina seznama, ki je v našem primeru strani

62
00:04:06,000 --> 00:04:08,000
so bili ti 3 li oznake.

63
00:04:08,000 --> 00:04:11,000
Seveda, če imamo veliko dokument, dostop elemente

64
00:04:11,000 --> 00:04:14,000
na ta način se bo res nerodno, ker

65
00:04:14,000 --> 00:04:17,000
na koncu bomo morali reči stvari, kot document.body.childNodes

66
00:04:17,000 --> 00:04:21,000
Nosilec nekaj. childNodes nosilec nekaj drugega,

67
00:04:21,000 --> 00:04:23,000
in to se dogaja, da se res nerodno.

68
00:04:23,000 --> 00:04:27,000
Namesto tega, kaj si resnično želite storiti, je lahko za poizvedbo dokumenta,

69
00:04:27,000 --> 00:04:30,000
tako da, tako kot smo iskali stvari na internetu s pomočjo ključnih besed

70
00:04:30,000 --> 00:04:33,000
res potrebujemo nek način iščejo ta dokument jedrnato

71
00:04:33,000 --> 00:04:37,000
priti nazaj samo elementi Skrbimo brez vozili

72
00:04:37,000 --> 00:04:39,000
celotno drevo od vrha do dna.

73
00:04:39,000 --> 00:04:42,000
Na srečo, sodobnih brskalnikov nam omogočajo, da to storijo

74
00:04:42,000 --> 00:04:47,000
s posebno funkcijo, imenovano querySelectorAll,

75
00:04:47,000 --> 00:04:49,000
in ta funkcija traja en argument

76
00:04:49,000 --> 00:04:53,000
da je selektor CSS, in da se bo vrnil k nam

77
00:04:53,000 --> 00:04:56,000
vse elemente, ki se ujemajo, da je selektor.

78
00:04:56,000 --> 00:04:59,000
To pomeni, da vam ni treba naučiti celotno novo sintakso za poizvedovanje DOM.

79
00:04:59,000 --> 00:05:02,000
Namesto tega lahko uporabite znanje že veste,

80
00:05:02,000 --> 00:05:04,000
o CSS selektorje.

81
00:05:04,000 --> 00:05:07,000
Oglejmo si nekaj primerov poizvedovanje dokument.

82
00:05:07,000 --> 00:05:13,000
Če rečemo, querySelectorAll in ji mimo tega niza # foo

83
00:05:13,000 --> 00:05:18,000
da se dogaja, da nam vrne element z ID foo.

84
00:05:18,000 --> 00:05:23,000
Prav tako lahko rekli document.getElementById

85
00:05:23,000 --> 00:05:28,000
in to mimo niz foo brez tega hashtag.

86
00:05:28,000 --> 00:05:31,000
Boš dobil nazaj točno isto predmet.

87
00:05:31,000 --> 00:05:37,000
Če bi namesto peljemo bar do document.querySelectorAll niz.

88
00:05:37,000 --> 00:05:42,000
bomo dobili nazaj vse elemente z barom razreda.

89
00:05:42,000 --> 00:05:45,000
Mi lahko kombinirate tudi CSS selektorjev.

90
00:05:45,000 --> 00:05:51,000
Če se peljemo v nizu # foo img

91
00:05:51,000 --> 00:05:54,000
da se dogaja, da nam spet vse slike elementov

92
00:05:54,000 --> 00:05:58,000
da so otroci elementa z ID foo.

93
00:05:58,000 --> 00:06:03,000
Kot lahko vidite, s kombiniranjem selektorji imamo nekaj zelo zmogljive možnosti iskanja.

94
00:06:03,000 --> 00:06:06,000
Ampak pod pokrovom, DOM je res samo drevo,

95
00:06:06,000 --> 00:06:10,000
in ti selektorji nam omogočajo, da abstraktna, da stran do neke mere

96
00:06:10,000 --> 00:06:14,000
, ker ne bomo vedno skrbi celotni strukturi DOM drevesu.

97
00:06:14,000 --> 00:06:18,000
To je bil hiter pregled DOM, in hvala za nam pridružili.

98
00:06:18,000 --> 00:06:20,000
[CS50.TV]