1
00:00:00,600 --> 00:00:03,770
Jusqu'à présent, nous avons parlé de pourquoi dominer l'appellation est excitant.

2
00:00:03,960 --> 00:00:05,100
Pourquoi vous devriez vous soucier.

3
00:00:05,100 --> 00:00:09,420
Les différents sites qui l'utilisent les possibilités infinies les jeux toutes les choses passionnantes.

4
00:00:09,570 --> 00:00:12,710
Mais nous n'avons toujours pas vraiment parlé de ce que les DOM est réellement.

5
00:00:12,810 --> 00:00:16,380
Donc, nous allons le faire dans cette vidéo pour commencer, définissons-le.

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

7
00:00:17,220 --> 00:00:20,040
Dom signifie Document object model.

8
00:00:20,190 --> 00:00:24,100
La signification de ces trois mots fera un peu plus de sens dans les diapositives à venir.

9
00:00:24,100 --> 00:00:26,780
Mais commençons par la définir à un niveau supérieur.

10
00:00:26,820 --> 00:00:30,560
Le Dom est l'interface entre votre javascript et votre âge.

11
00:00:30,570 --> 00:00:48,930
Tim Mounty SS C'est essentiellement un tas d'objets javascript spéciaux javascript méthodes fonctions que nous pouvons utiliser pour interagir avec notre H.M.S. Évaluer que nous pouvons changer des choses que nous pouvons ajouter des éléments enlever les éléments changer les couleurs animer les choses toutes sortes de moyens intéressants d'interagir avec leur H.M.S. évaluer.

12
00:00:49,380 --> 00:00:56,070
Sur cette diapositive, je parle un peu de la façon dont le DOM est construit et pourquoi il est appelé le modèle d'objet de document.

13
00:00:56,070 --> 00:01:09,950
Donc, quand nous chargeons une page de courrier électronique, il ressemble à ceci dans un navigateur et c'est juste un peu de bordure simple, donc vous avez un titre et une étiquette avec mon lien comme le texte et un H-1 avec mon en-tête comme texte et c'est il.

14
00:01:10,260 --> 00:01:16,360
Donc quand je l'ouvre dans le navigateur je vois cela, mais derrière les scènes, le DOM est créé.

15
00:01:16,380 --> 00:01:19,190
Il est construit à partir de ce droit ici.

16
00:01:19,320 --> 00:01:24,270
Donc, ce que je veux dire, c'est que cet âge Tim est transformé en un tas d'objets javascript.

17
00:01:24,270 --> 00:01:27,440
Chaque objet modélise l'un de ces éléments.

18
00:01:27,450 --> 00:01:31,340
C'est là que nous obtenons la partie du modèle d'objet du modèle d'objet de document.

19
00:01:31,650 --> 00:01:38,060
Donc encore une fois pour réitérer que nous chargeons chaque équipe dans le navigateur, le navigateur nous affiche des choses comme ça.

20
00:01:38,220 --> 00:01:47,490
Mais derrière les scènes, il fait en fait ce modèle de chaque élément unique avec un objet javascript tout comme nous avons modélisé mon chien Rusty en utilisant un objet javascript.

21
00:01:47,490 --> 00:01:50,770
Il avait un nom de propriété et une autre race et âge.

22
00:01:50,850 --> 00:01:55,080
Ces objets sont fondamentalement la même chose sauf le contenu est différent.

23
00:01:55,110 --> 00:02:07,290
Ils vont avoir des choses comme type d'étiquette source de texte attributs couleur couleur d'arrière-plan taille du texte toutes les différentes propriétés qui sont toutes contenues à l'intérieur de chaque objet.

24
00:02:07,290 --> 00:02:11,620
Nous allons certainement passer beaucoup de temps à travailler avec ces objets afin que les détails ne sont pas importants.

25
00:02:11,640 --> 00:02:14,970
Tout ce que je veux souligner ici, c'est que nous chargeons chaque tim L ..

26
00:02:15,120 --> 00:02:22,610
Il est affiché dans le navigateur et le navigateur prend que Tim L et prend chaque élément et le transforme en un objet.

27
00:02:22,680 --> 00:02:24,510
Cela couvre la partie du modèle objet.

28
00:02:24,540 --> 00:02:25,860
Et le document?

29
00:02:26,070 --> 00:02:38,930
Donc vous pouvez voir ici c'est un petit diagramme du type de structure que nous obtenons du DOM l'objet de niveau supérieur que tout est contenu à l'intérieur de notre modèle entier du H.T. Mounseers nous est appelé le document.

30
00:02:39,120 --> 00:02:41,200
Nous pouvons donc accéder à n'importe quelle page Web du tout.

31
00:02:41,220 --> 00:02:45,190
Donc j'ai ouvert Google et je vais juste taper dans la con. Le mot document.

32
00:02:45,390 --> 00:02:49,470
Et quand je fais que je reçois cette grande chose qui revient à ce grand objet.

33
00:02:49,470 --> 00:02:51,900
Sauf qu'il ne ressemble pas à un objet javascript.

34
00:02:51,900 --> 00:02:53,740
Ce n'est pas vraiment ce à quoi nous nous attendrions.

35
00:02:53,760 --> 00:02:56,030
C'est parce que le navigateur me cache quelque chose.

36
00:02:56,130 --> 00:03:04,480
Ce qu'il est en fait me montrer est avec le courrier HQ ressemble comme du texte, mais il ne me montre pas les objets réels qui sont modélisés sur ce Timo.

37
00:03:04,740 --> 00:03:19,990
Donc, pour obtenir que nous avons besoin d'utiliser annuler point D I R qui est une autre méthode sur l'objet console et nous allons annuler que D.I.R. Documenter tout ce que cela va faire est d'imprimer l'objet document entier dans cette syntaxe d'objet que nous connaissons.

38
00:03:20,070 --> 00:03:30,220
Donc, vous pouvez voir que c'est juste un objet régulier tout comme ceux que nous avons écrit sur notre propre tout comme Rusty l'objet chien, sauf qu'il ya beaucoup plus d'informations ici.

39
00:03:30,510 --> 00:03:41,040
Donc, nous avons des choses comme des polices ou des liens images, mais nous avons aussi des choses comme le corps et ce corps représente le corps tout entier.

40
00:03:41,040 --> 00:03:44,320
Donc chaque élément que vous voyez ici est à l'intérieur du corps.

41
00:03:44,340 --> 00:03:51,050
Donc, si je ouvre le corps, vous verrez que nous avons un tas d'autres propriétés, y compris un enfant appelé noeuds.

42
00:03:51,150 --> 00:03:58,590
Donc, les noeuds enfants nous montre qu'il ya un div, il ya une balise de script et il ya un autre div à l'intérieur du corps.

43
00:03:58,590 --> 00:04:00,710
Et si nous allions aux éléments, nous le verrions.

44
00:04:00,710 --> 00:04:03,360
Alors voici le corps à l'intérieur du corps.

45
00:04:03,420 --> 00:04:07,990
Nous avons cette première div, nous avons une balise de script et nous avons la seconde div.

46
00:04:08,430 --> 00:04:15,890
Et alors que dire que nous ouvrons ce troisième div, nous nous attendons à voir deux divs plus à l'intérieur si ce deuxième div.

47
00:04:15,900 --> 00:04:28,360
Et si nous passons au consul et nous regardons la deuxième div et puis nous regardons les noeuds enfants, nous voyons OK, il ya deux divs supplémentaires Ainsi que vous pouvez voir le dom devient vraiment énorme très rapide.

48
00:04:28,500 --> 00:04:34,730
Il ya des centaines et des centaines de propriétés et de méthodes différentes et différents nœuds et cette structure complètement fou d'objets imbriqués.

49
00:04:34,890 --> 00:04:36,250
C'est tellement de choses.

50
00:04:36,270 --> 00:04:42,060
C'est l'un de ces moments que j'ai mentionné au début de cette classe où vous allez devoir être à l'aise de ne pas tout savoir.

51
00:04:42,420 --> 00:04:46,450
Je peux vous dire maintenant que la plupart des développeurs ne connaissent pas la moitié des propriétés ici.

52
00:04:46,500 --> 00:04:49,200
Je dirais qu'ils travaillent avec environ 10 pour cent au plus.

53
00:04:49,200 --> 00:04:52,630
Il ya tellement plus de choses ici que nous avons presque jamais besoin d'utiliser.

54
00:04:52,680 --> 00:04:57,280
Et puis quelque temps en bas de la ligne quelque chose se présente et nous devons faire quelque chose que nous n'avons jamais fait auparavant.

55
00:04:57,330 --> 00:05:03,690
Nous google il et nous découvrons oh bien alors c'est ce que la propriété de changement non durci est pour.

56
00:05:03,750 --> 00:05:04,560
Je n'en avais aucune idée.

57
00:05:04,680 --> 00:05:06,500
Et c'est vraiment ce que c'est que d'être un développeur.

58
00:05:06,510 --> 00:05:14,380
Jusqu'à présent, avec javascript, nous avons travaillé dans un petit petit monde contrôlé où nous apprenons des fonctions et des objets que nous apprenons sur les variables.

59
00:05:14,610 --> 00:05:21,440
Et il ya un nombre fini de façons de faire les choses et il ya un sous-ensemble très spécifique de la connaissance que vous avez juste besoin de savoir avec le DOM.

60
00:05:21,450 --> 00:05:25,500
Maintenant, nous avons cet immense énorme écosystème à travailler dans de nombreuses propriétés.

61
00:05:25,620 --> 00:05:28,020
Je tiens donc à répéter qu'il ya tellement de choses ici.

62
00:05:28,170 --> 00:05:32,100
Nous allons nous concentrer sur les pièces importantes, mais le but n'est pas de mémoriser.

63
00:05:32,130 --> 00:05:34,780
L'objectif n'est pas de maîtriser chaque propriété.

64
00:05:34,920 --> 00:05:39,560
Encore une fois 10 pour cent au plus est tout ce que vous devez être un développeur Web compétent.

65
00:05:40,000 --> 00:05:43,080
OK, alors revenons en arrière et je veux juste revenir sur cette dernière fois.

66
00:05:43,080 --> 00:05:44,450
Résumez ce dont nous avons parlé.

67
00:05:44,700 --> 00:05:48,030
Donc, le DOM représente le modèle d'objet de document.

68
00:05:48,150 --> 00:05:52,150
C'est l'interface entre votre javascript et votre H.M.S ..

69
00:05:52,280 --> 00:05:55,180
C'est comment nous pouvons utiliser notre javascript pour rendre les choses interactives.

70
00:05:55,260 --> 00:06:19,110
C'est comment nous faisons des choses comme ajouter un nouvel élément à la page ou modifier l'attribut ref d'un lien ou modifier l'image d'arrière-plan sur notre corps ou comment nous pouvons obtenir la valeur d'un formulaire ou nous pouvons faire des validations personnalisées et des animations interactives Éléments où vous cliquez dans un code s'exécute toutes ces différentes possibilités proviennent tous du fait que le modèle d'objet document connecte notre javascript avec leur HMS accès .

71
00:06:19,260 --> 00:06:27,470
Ainsi, la partie modèle d'objet du modèle d'objet de document nous dit que c'est un tas d'objets javascript qui sont des éléments de modélisation dans notre H.T. montant.

72
00:06:27,870 --> 00:06:32,980
Donc, nous avons un ATAC ici, nous nous retrouvons avec un objet ici représentant que atec.

73
00:06:33,180 --> 00:06:37,770
Et puis nous finissons avec un autre objet représentant cette balise H1 que nous voyons ici.

74
00:06:37,980 --> 00:06:43,740
Enfin, il est appelé le modèle d'objet de document parce que tout vit à l'intérieur de cet objet appelé le document.

75
00:06:43,830 --> 00:06:46,850
C'est le nœud racine où tout le reste vit à l'intérieur.

76
00:06:47,070 --> 00:06:49,030
Alors la prochaine vidéo, nous allons commencer à écrire du code.