1
00:00:00,600 --> 00:00:03,770
Tot nu toe hebben we gesproken over de reden waarom domineren appellation is spannend.

2
00:00:03,960 --> 00:00:05,100
Waarom zou u de zorg.

3
00:00:05,100 --> 00:00:09,420
De verschillende sites die het gebruiken van de eindeloze mogelijkheden van de spellen alle spannende dingen.

4
00:00:09,570 --> 00:00:12,710
Maar we hebben nog steeds niet echt gesproken over wat de DOM eigenlijk is.

5
00:00:12,810 --> 00:00:16,380
Dus we gaan om dat te doen in deze video om te beginnen laten we definiëren.

6
00:00:16,380 --> 00:00:17,180
Dio am.

7
00:00:17,220 --> 00:00:20,040
Dom staat voor Document Object Model.

8
00:00:20,190 --> 00:00:24,100
De betekenis van deze drie woorden zal een beetje meer zin te maken in de komende slides.

9
00:00:24,100 --> 00:00:26,780
Maar laten we beginnen met het definiëren van het op een hoger niveau.

10
00:00:26,820 --> 00:00:30,560
De Dom is de interface tussen uw javascript en uw leeftijd.

11
00:00:30,570 --> 00:00:48,930
Tim Mounty SS Het is eigenlijk een heleboel speciale javascript objecten javascript methoden functies die we kunnen gebruiken om te communiceren met onze H.M.S. beoordelen we dingen kunnen veranderen we kunnen toevoegen elementen verwijderen elementen veranderen kleuren animeren dingen allerlei spannende manieren om te communiceren met hun H.M.S. evalueren.

12
00:00:49,380 --> 00:00:56,070
Op deze dia praat ik een beetje over hoe de DOM is opgebouwd en waarom zij het document object model heet.

13
00:00:56,070 --> 00:01:09,950
Dus toen we laden van een e-mail pagina het lijkt erop dat dit in een browser en het is gewoon een aantal eenvoudige gescherpt hem uit dus je moet een titel en een label met mijn koppeling als de tekst en een H-1 met mijn kop als de tekst en dat is het.

14
00:01:10,260 --> 00:01:16,360
Dus toen ik open deze in de browser zie ik dit maar achter de schermen van de DOM wordt gemaakt.

15
00:01:16,380 --> 00:01:19,190
Het is gemaakt van dit recht hier.

16
00:01:19,320 --> 00:01:24,270
Dus wat ik bedoel is dat dit tijdperk Tim wordt omgezet in een bos van JavaScript-objecten.

17
00:01:24,270 --> 00:01:27,440
Elk object modellen van deze elementen.

18
00:01:27,450 --> 00:01:31,340
Dat is waar we het model voorwerp van document object model.

19
00:01:31,650 --> 00:01:38,060
Dus weer gewoon te herhalen we laden elk team in de browser geeft de browser dingen om ons als dit.

20
00:01:38,220 --> 00:01:47,490
Maar achter de schermen het eigenlijk maakt dit model van ieder afzonderlijk element met een JavaScript-object, net als we het voorbeeld van mijn hond Rusty met behulp van een javascript-object.

21
00:01:47,490 --> 00:01:50,770
Hij had een eigenschap naam en een ander ras en leeftijd.

22
00:01:50,850 --> 00:01:55,080
Deze objecten zijn fundamenteel hetzelfde behalve de inhoud verschilt.

23
00:01:55,110 --> 00:02:07,290
Ze gaan dingen zoals het type van de tag brontekst attributen kleur achtergrondkleur tekstgrootte allemaal verschillende eigenschappen die al zijn opgenomen binnenkant van elk object.

24
00:02:07,290 --> 00:02:11,620
We zijn zeker van plan om veel tijd werken met deze objecten, zodat de details zijn niet van belang door te brengen.

25
00:02:11,640 --> 00:02:14,970
Alles wat ik hier wil benadrukken is dat we laden op elk tim L ..

26
00:02:15,120 --> 00:02:22,610
Het wordt weergegeven in de browser en de browser neemt dat Tim L en neemt elk element en verandert het in een object.

27
00:02:22,680 --> 00:02:24,510
Dus dat betrekking heeft op het model voorwerp.

28
00:02:24,540 --> 00:02:25,860
Hoe zit het met het document.

29
00:02:26,070 --> 00:02:38,930
Zo kunt u hier zien is dit een klein diagram van de aard van de structuur die we krijgen van de DOM het hoogste niveau object dat alles is opgenomen binnenkant van onze gehele model van de H.T. mounseers ons wordt het document genoemd.

30
00:02:39,120 --> 00:02:41,200
Dus we kunnen gaan naar een webpagina op alle.

31
00:02:41,220 --> 00:02:45,190
Dus ik heb Google open en ik ga gewoon te typen in de con. Het woord document.

32
00:02:45,390 --> 00:02:49,470
En als ik dat doe, dat ik dit grote ding dat terugkomt deze grote object te krijgen.

33
00:02:49,470 --> 00:02:51,900
Behalve dat het er niet uitziet als een javascript-object.

34
00:02:51,900 --> 00:02:53,740
Het is niet echt wat we zouden verwachten.

35
00:02:53,760 --> 00:02:56,030
Dat komt omdat de browser is een soort van het verbergen van mij.

36
00:02:56,130 --> 00:03:04,480
Wat het eigenlijk toont me is met de HQ mail eruit ziet als tekst, maar het is niet toont me de daadwerkelijke objecten die zijn gemodelleerd naar deze Timo.

37
00:03:04,740 --> 00:03:19,990
Dus om te krijgen die we nodig hebben om te gebruiken annuleren dot D I R, die is een andere methode op de console object en we gaan dat D.I.R. annuleren document alles wat dit zal doen is uit te printen het gehele document object in dit object syntaxis die we kennen.

38
00:03:20,070 --> 00:03:30,220
Zodat je kunt zien is het gewoon een regelmatige object, net als degene die we op onze eigen geschreven heb net hetzelfde als Rusty de hond object behalve dat er is nog veel meer informatie vindt u hier.

39
00:03:30,510 --> 00:03:41,040
Dus we hebben dingen zoals lettertypen of afbeeldingen banden maar we hebben ook dingen als lichaam en dit lichaam staat voor het hele lichaam.

40
00:03:41,040 --> 00:03:44,320
Dus elk element dat je ziet hier is de binnenkant van het lichaam.

41
00:03:44,340 --> 00:03:51,050
Dus als ik het lichaam open te stellen zul je zien dat we een hele hoop andere eigenschappen, waaronder een zogenaamde knooppunten van het kind.

42
00:03:51,150 --> 00:03:58,590
Dus kind nodes laat ons zien dat er een div is er een script-tag en er is een andere div binnenkant van het lichaam.

43
00:03:58,590 --> 00:04:00,710
En als we naar elementen die we zouden zien.

44
00:04:00,710 --> 00:04:03,360
Dus hier is het lichaam binnenkant van het lichaam.

45
00:04:03,420 --> 00:04:07,990
We hebben die eerste div hebben we een script-tag en we hebben de tweede div.

46
00:04:08,430 --> 00:04:15,890
En wat zeggen we open te stellen dat derde div zouden we verwachten nog twee divs binnen te zien of dat tweede div.

47
00:04:15,900 --> 00:04:28,360
En als we over te gaan naar de consul en we kijken naar de tweede div en dan kijken we naar kind nodes zien we OK zijn er twee meer divs Dus zoals je kunt zien dat de dom krijgt echt enorm echt snel.

48
00:04:28,500 --> 00:04:34,730
Er zijn honderden en honderden verschillende eigenschappen en methoden en de verschillende knooppunten en dit hele gekke structuur van geneste objecten.

49
00:04:34,890 --> 00:04:36,250
Het is gewoon zo veel spullen.

50
00:04:36,270 --> 00:04:42,060
Het is een van die momenten dat ik aan het begin van deze klasse waar je naartoe gaat te hebben om comfortabel niet alles te weten genoemd.

51
00:04:42,420 --> 00:04:46,450
Ik kan u nu al zeggen dat de meeste ontwikkelaars niet de helft van de woningen hier niet kennen.

52
00:04:46,500 --> 00:04:49,200
Ik zou zeggen dat ze werken met ongeveer 10 procent bij de meeste.

53
00:04:49,200 --> 00:04:52,630
Er is zo veel meer dingen hier dat we bijna nooit hoeven te gebruiken.

54
00:04:52,680 --> 00:04:57,280
En dan ergens langs de lijn er iets gebeurt en we moeten iets wat we nog nooit eerder gedaan.

55
00:04:57,330 --> 00:05:03,690
We google het en we zien oh goed dus dat is wat de niet uitgeharde verandering pand is voor.

56
00:05:03,750 --> 00:05:04,560
Ik had geen idee.

57
00:05:04,680 --> 00:05:06,500
En dat is echt wat het is om een ​​ontwikkelaar.

58
00:05:06,510 --> 00:05:14,380
Tot nu javascript we hebben gewerkt in een klein beetje van een kleine gecontroleerde wereld waarin we leren over functies en objecten leren we over variabelen.

59
00:05:14,610 --> 00:05:21,440
En er is een eindig aantal manieren om dingen te doen en er is een zeer specifieke subset van de kennis die je gewoon moet weten met de DOM.

60
00:05:21,450 --> 00:05:25,500
Nu hebben we deze enorme enorme ecosysteem om in te werken zo veel eigenschappen.

61
00:05:25,620 --> 00:05:28,020
Dus ik wil gewoon herhalen er zo veel hier.

62
00:05:28,170 --> 00:05:32,100
We gaan concentreren op de belangrijke stukken, maar het doel is niet om te onthouden.

63
00:05:32,130 --> 00:05:34,780
Het doel is ieder afzonderlijk object niet onder de knie.

64
00:05:34,920 --> 00:05:39,560
Opnieuw 10 procent bij de meeste is alles wat je nodig hebt om een ​​bevoegde web ontwikkelaar.

65
00:05:40,000 --> 00:05:43,080
OK dus laten we teruggaan en ik wil gewoon te gaan over dit nog een keer.

66
00:05:43,080 --> 00:05:44,450
Samenvatten wat we over gesproken.

67
00:05:44,700 --> 00:05:48,030
Dus de DOM staat voor Document Object Model.

68
00:05:48,150 --> 00:05:52,150
Het is de interface tussen uw javascript en uw H.M.S ..

69
00:05:52,280 --> 00:05:55,180
Het is hoe we onze javascript kunt gebruiken om dingen interactief te maken.

70
00:05:55,260 --> 00:06:19,110
Het is hoe we dingen doen, zoals voeg een nieuw element toe aan de pagina of wijzig de ref attribuut van een link of verander de achtergrondafbeelding op ons lichaam en hoe we de waarde van een vorm kan krijgen of kunnen we op maat validaties en animaties en interactieve doen elementen waar u klikt in een code loopt al deze verschillende mogelijkheden allemaal voort uit het feit dat het document object model verbindt onze javascript met hun HMS toegang .

71
00:06:19,260 --> 00:06:27,470
Dus het object model deel van document object model vertelt ons dat het een stelletje javascript objecten die het modelleren van elementen in onze H.T. bedrag.

72
00:06:27,870 --> 00:06:32,980
Dus we hebben een ATAC hier hebben we eindigen met een voorwerp hier vertegenwoordigt dat ATEC.

73
00:06:33,180 --> 00:06:37,770
En dan eindigen we met een ander object dat deze H1-tag die wij zien hier.

74
00:06:37,980 --> 00:06:43,740
Ten slotte is het heet het document object model omdat alles leeft binnenkant van die ene object met de naam van het document.

75
00:06:43,830 --> 00:06:46,850
Het is de wortel knooppunt waar alles anders leeft binnenkant van.

76
00:06:47,070 --> 00:06:49,030
Dus de volgende video gaan we beginnen met het schrijven wat code.