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] [Sveučilište Harvard]

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

4
00:00:07,000 --> 00:00:10,000
U ovom video ćemo pogledati DOM.

5
00:00:10,000 --> 00:00:14,000
Prilikom preuzimanja preglednik web stranicu, to treba biti zastupljena u sjećanju neki način.

6
00:00:14,000 --> 00:00:17,000
Model dokument objekt, ili DOM,

7
00:00:17,000 --> 00:00:20,000
opisuje kako browser predstavlja web stranicu u memoriju.

8
00:00:20,000 --> 00:00:24,000
U ovom videu, mi ćemo se pogled na DOM u kontekstu JavaScript,

9
00:00:24,000 --> 00:00:26,000
ali DOM je jezik neovisan koncept.

10
00:00:26,000 --> 00:00:30,000
Na primjer, PHP ima svoj DOM provedbu, kao dobro.

11
00:00:30,000 --> 00:00:32,000
Međutim, DOM često koriste JavaScript

12
00:00:32,000 --> 00:00:36,000
budući JavaScript nam omogućuje da promijenite sadržaj web stranice u letu,

13
00:00:36,000 --> 00:00:39,000
DOM i omogućava nam pristup dijelovima web stranice.

14
00:00:39,000 --> 00:00:43,000
Uzmimo za primjer pogledati web stranicu.

15
00:00:43,000 --> 00:00:48,000
Ok, sad ćemo vidjeti kako će ova stranica biti predstavljeni u DOM.

16
00:00:48,000 --> 00:00:51,000
I svako stablo treba imati root čvor na vrhu.

17
00:00:51,000 --> 00:00:54,000
Za ovaj dokument, HTML element je korijen čvor

18
00:00:54,000 --> 00:00:56,000
jer je prvi element koji se pojavljuje.

19
00:00:56,000 --> 00:01:00,000
Dodajmo korijenski čvor na našem stablu.

20
00:01:00,000 --> 00:01:03,000
Uzmimo pogled na HTML dokument ponovno.

21
00:01:03,000 --> 00:01:09,000
Obavijest da je tijelo tag je smješteno unutar HTML oznake.

22
00:01:09,000 --> 00:01:14,000
To znači da je tijelo element je dijete HTML elementa.

23
00:01:14,000 --> 00:01:17,000
Mi može predstavljati to u našem DOM stabla čineći tijelo list

24
00:01:17,000 --> 00:01:20,000
spušta s HTML.

25
00:01:20,000 --> 00:01:22,000
Idemo to učiniti.

26
00:01:22,000 --> 00:01:24,000
Imamo tijelo ispod HTML.

27
00:01:24,000 --> 00:01:28,000
Sada možemo vidjeti da tijelo ima 2 djece svoje,

28
00:01:28,000 --> 00:01:31,000
h1 element i ul elementa.

29
00:01:31,000 --> 00:01:34,000
To znači da možemo spojiti oba od tih elemenata

30
00:01:34,000 --> 00:01:36,000
na tijela elementa, pa neka je to učiniti.

31
00:01:36,000 --> 00:01:40,000
Imamo H1 i Ul.

32
00:01:40,000 --> 00:01:43,000
Konačno, ul. element ima tri više djece,

33
00:01:43,000 --> 00:01:50,000
a to će se završiti naš DOM stablo, pa dodajmo Li, Li, Li.

34
00:01:50,000 --> 00:01:56,000
Ovo dovrši našu DOM stablo, a to je kako je preglednik pohranu vaše web stranice.

35
00:01:56,000 --> 00:02:02,000
Sada ćemo pogledati kako možemo proći ovo drvo koristeći JavaScript.

36
00:02:02,000 --> 00:02:10,000
Možemo pristup ovom stablo koristeći poseban JavaScript varijablu zove dokument.

37
00:02:10,000 --> 00:02:13,000
Jedan objekt ovog dokumenta objekta

38
00:02:13,000 --> 00:02:16,000
je tijelo dobra, a to predstavlja predmet

39
00:02:16,000 --> 00:02:19,000
Tijelo element u našem primjeru web stranice.

40
00:02:19,000 --> 00:02:23,000
Ako bismo htjeli da se sva djeca iz tijela elementa,

41
00:02:23,000 --> 00:02:26,000
što ako se sjećate da je H1 tag i ul tag,

42
00:02:26,000 --> 00:02:37,000
možemo reći document.body.childNodes.

43
00:02:37,000 --> 00:02:41,000
I to će nam dati natrag niz koji sadrži oba elementa h1

44
00:02:41,000 --> 00:02:46,000
a ul elementa jer oni su oba izravna djeca tijelu.

45
00:02:46,000 --> 00:02:50,000
Ako smo htjeli stvoriti varijablu predstavlja ul. elementa

46
00:02:50,000 --> 00:02:57,000
možemo reći vrr ul = onda ovaj broj ovdje,

47
00:02:57,000 --> 00:03:00,000
i sada, jer childNodes je jednostavno niz

48
00:03:00,000 --> 00:03:07,000
možemo indeks u nju s [1] da biste dobili drugi element tog niza.

49
00:03:07,000 --> 00:03:13,000
S ovom novom objektu ul možemo pristupiti raznim svojstva elementa kao i njegov ID.

50
00:03:13,000 --> 00:03:17,000
Ako kažemo da je ul.id će biti jednak string popis

51
00:03:17,000 --> 00:03:20,000
jer to je ono što imamo u našem HTML stranici.

52
00:03:20,000 --> 00:03:24,000
Mi također mogu dobiti svoj tagName, što u ovom slučaju će biti

53
00:03:24,000 --> 00:03:32,000
što tip elementa je, u ovom slučaju, ul.

54
00:03:32,000 --> 00:03:36,000
Mi također mogu dobiti njegov roditelj ili čvor iznad njega, što je u ovom slučaju

55
00:03:36,000 --> 00:03:38,000
će biti tijelo elementa.

56
00:03:38,000 --> 00:03:43,000
Ako kažemo. ParentNode, koji će biti isti kao document.body.

57
00:03:43,000 --> 00:03:46,000
Naravno, ovo ul. ima djecu za sebe,

58
00:03:46,000 --> 00:03:50,000
tako da još uvijek možemo reći. childNodes na ovom elementu,

59
00:03:50,000 --> 00:03:55,000
i ovaj niz sada bi trebao imati duljinu 3, jer postoje tri stavke u našem popisu.

60
00:03:55,000 --> 00:04:02,000
Konačno, vjerojatno najkorisnija nekretnina će biti. InnerHTML,

61
00:04:02,000 --> 00:04:06,000
a to će biti stvarni sadržaj popisa, koja je u našem primjeru stranici

62
00:04:06,000 --> 00:04:08,000
bile one 3 Li oznake.

63
00:04:08,000 --> 00:04:11,000
Naravno, ako imamo veliki dokument, pristup elemente

64
00:04:11,000 --> 00:04:14,000
na taj način će biti jako težak, jer

65
00:04:14,000 --> 00:04:17,000
na kraju ćemo morati reći stvari kao document.body.childNodes

66
00:04:17,000 --> 00:04:21,000
Nosač nešto. childNodes noseći nešto drugo,

67
00:04:21,000 --> 00:04:23,000
i to će se stvarno težak.

68
00:04:23,000 --> 00:04:27,000
Umjesto toga ono što stvarno želite učiniti je biti u mogućnosti da upita dokument,

69
00:04:27,000 --> 00:04:30,000
pa samo željeli smo tražili stvari na internetu pomoću ključnih riječi

70
00:04:30,000 --> 00:04:33,000
mi stvarno treba neki način traži taj dokument jezgrovito

71
00:04:33,000 --> 00:04:37,000
vratiti samo elementi mi je stalo, bez poprijeko

72
00:04:37,000 --> 00:04:39,000
cijeli stablo vrha do dna.

73
00:04:39,000 --> 00:04:42,000
Srećom, moderni preglednici omogućuju nam da to učinite

74
00:04:42,000 --> 00:04:47,000
s posebnom funkcijom zove querySelectorAll,

75
00:04:47,000 --> 00:04:49,000
i ova funkcija traje jedan argument

76
00:04:49,000 --> 00:04:53,000
to je CSS selektora, a to će nam se vratiti

77
00:04:53,000 --> 00:04:56,000
sve elemente koji se podudaraju taj izbornik.

78
00:04:56,000 --> 00:04:59,000
To znači da ne trebate naučiti novu sintaksu za upite DOM.

79
00:04:59,000 --> 00:05:02,000
Umjesto toga možete primijeniti znanje već znate

80
00:05:02,000 --> 00:05:04,000
O CSS selektora.

81
00:05:04,000 --> 00:05:07,000
Uzmimo pogled na neke primjere upite dokument.

82
00:05:07,000 --> 00:05:13,000
Ako kažemo querySelectorAll i prođe ga na ovaj string # foo

83
00:05:13,000 --> 00:05:18,000
to će nam vratiti element sa ID foo.

84
00:05:18,000 --> 00:05:23,000
Također mogu reći document.getElementById

85
00:05:23,000 --> 00:05:28,000
i prođe ga na string foo bez tog hashtag.

86
00:05:28,000 --> 00:05:31,000
Ti ćeš se vratiti isto točno objekt.

87
00:05:31,000 --> 00:05:37,000
Ako umjesto toga smo proći niz. Bar na document.querySelectorAll

88
00:05:37,000 --> 00:05:42,000
ćemo vratiti sve elemente s razrednim traci.

89
00:05:42,000 --> 00:05:45,000
Također možete kombinirati CSS selektora.

90
00:05:45,000 --> 00:05:51,000
Ako prođemo u string # foo IMG

91
00:05:51,000 --> 00:05:54,000
koji će nas vratiti sve slike elemenata

92
00:05:54,000 --> 00:05:58,000
da su djeca elementa sa ID foo.

93
00:05:58,000 --> 00:06:03,000
Kao što možete vidjeti, spajanjem selektora imamo neke doista snažne mogućnosti pretraživanja.

94
00:06:03,000 --> 00:06:06,000
No, ispod poklopca motora, DOM je zapravo samo stablo,

95
00:06:06,000 --> 00:06:10,000
i ove selektora nam omogućiti da sažetak koji odlazi u određenoj mjeri

96
00:06:10,000 --> 00:06:14,000
jer mi ne uvijek stalo do cijele strukture DOM stabla.

97
00:06:14,000 --> 00:06:18,000
To je brz pregled DOM, i hvala nam se pridružili.

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