1
00:00:00,600 --> 00:00:03,770
Até agora, falamos sobre por que dominar a denominação é emocionante.

2
00:00:03,960 --> 00:00:05,100
Por que você deveria se importar.

3
00:00:05,100 --> 00:00:09,420
Os diferentes sites que usam as infinitas possibilidades dos jogos todas as coisas interessantes.

4
00:00:09,570 --> 00:00:12,710
Mas ainda não falamos sobre o que o DOM realmente é.

5
00:00:12,810 --> 00:00:16,380
Então, vamos fazer isso neste vídeo para começar, vamos apenas defini-lo.

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

7
00:00:17,220 --> 00:00:20,040
Dom significa modelo de objeto de documento.

8
00:00:20,190 --> 00:00:24,100
O significado dessas três palavras fará um pouco mais de sentido nas lâminas vindouras.

9
00:00:24,100 --> 00:00:26,780
Mas vamos começar definindo-o em um nível mais alto.

10
00:00:26,820 --> 00:00:30,560
O Dom é a interface entre o seu javascript e sua idade.

11
00:00:30,570 --> 00:00:37,080
Tim Mounty SS É basicamente um monte de funções especiais javascript métodos de objetos javascript que podemos usar para interagir

12
00:00:37,080 --> 00:00:42,870
com o nosso H. M. S. avaliar que podemos mudar as coisas que podemos adicionar elementos remover elementos mudar cores

13
00:00:42,870 --> 00:00:48,930
animar coisas de todos os tipos de maneiras interessantes de interagir com seus H. M. S. avaliar.

14
00:00:49,380 --> 00:00:54,270
Neste slide, falo um pouco sobre como o DOM é construído e por que ele é chamado

15
00:00:54,330 --> 00:00:56,070
de modelo de objeto de documento.

16
00:00:56,070 --> 00:01:02,180
uma etiqueta com meu link como o texto e um H-1 com meu cabeçalho como o texto e isso é isto.

17
00:01:02,180 --> 00:01:09,210
Então, quando carregamos uma página de e-mail, parece com isso em um navegador e é apenas um simples que o afiou, então você tem

18
00:01:09,210 --> 00:01:09,950
um título e

19
00:01:10,260 --> 00:01:16,360
Então, quando eu abrir isso no navegador, vejo isso, mas, nos bastidores, o DOM é criado.

20
00:01:16,380 --> 00:01:19,190
É construído a partir desta aqui.

21
00:01:19,320 --> 00:01:24,270
Então, o que quero dizer é que essa idade Tim é transformada em um monte de objetos javascript.

22
00:01:24,270 --> 00:01:27,440
Cada objeto modela um desses elementos.

23
00:01:27,450 --> 00:01:31,340
É aí que conseguimos o modelo do objeto modelo do modelo de objeto de documento.

24
00:01:31,650 --> 00:01:37,530
novamente, apenas para reiterar, carregamos cada equipe no navegador, o navegador nos mostra coisas assim.

25
00:01:37,530 --> 00:01:38,060
Então,

26
00:01:38,220 --> 00:01:43,890
Mas, nos bastidores, ele faz esse modelo de cada elemento com um objeto javascript, assim

27
00:01:44,220 --> 00:01:47,490
como modelamos meu cão Rusty usando um objeto javascript.

28
00:01:47,490 --> 00:01:50,770
Ele tinha um nome de propriedade e outra raça e idade.

29
00:01:50,850 --> 00:01:55,080
Esses objetos são fundamentalmente a mesma coisa, exceto que o conteúdo é diferente.

30
00:01:55,110 --> 00:02:03,120
Eles terão coisas como tipo de tag texto fonte atributos cor cor do fundo tamanho do texto todas as

31
00:02:03,120 --> 00:02:07,290
propriedades diferentes que estão todas contidas dentro de cada objeto.

32
00:02:07,290 --> 00:02:11,460
Definitivamente vamos gastar muito tempo trabalhando com esses objetos para que os detalhes não sejam importantes.

33
00:02:11,640 --> 00:02:14,970
Tudo o que quero enfatizar aqui é que carregamos cada tim L. É exibido no navegador e o navegador

34
00:02:15,120 --> 00:02:21,810
leva esse Tim L e leva cada elemento e o transforma em um objeto.

35
00:02:21,900 --> 00:02:22,610
Então, isso abrange a parte do modelo de objeto.

36
00:02:22,680 --> 00:02:24,510
E o documento?

37
00:02:24,540 --> 00:02:25,860
Então, você pode ver aqui, este

38
00:02:26,070 --> 00:02:31,950
é um pequeno diagrama do tipo de estrutura que obtemos do DOM do objeto de nível superior que tudo está contido dentro de nosso modelo inteiro do H. T. Mounseers us é chamado

39
00:02:31,950 --> 00:02:38,250
de documento.

40
00:02:38,250 --> 00:02:38,930
Então, podemos ir a qualquer página da Web.

41
00:02:39,120 --> 00:02:41,200
Então eu tenho o Google aberto e eu só vou digitar o con. A palavra documento.

42
00:02:41,220 --> 00:02:45,190
E quando eu faço isso, recebo essa grande coisa que volta esse grande objeto.

43
00:02:45,390 --> 00:02:49,470
Exceto que não parece um objeto javascript.

44
00:02:49,470 --> 00:02:51,900
Não é realmente o que esperamos.

45
00:02:51,900 --> 00:02:53,740
Isso porque o navegador está meio escondido de mim.

46
00:02:53,760 --> 00:02:56,030
O que realmente está me mostrando é com

47
00:02:56,130 --> 00:03:01,860
o correio do HQ parece como texto, mas não está me mostrando os objetos reais que são modelados neste Timo.

48
00:03:01,860 --> 00:03:04,480
do console e vamos cancelar esse D.

49
00:03:04,740 --> 00:03:11,550
Então, para obter que precisamos usar cancelar ponto D I R, que é outro método no objeto EU. R. documentar tudo o que isso fará é imprimir todo o objeto do documento nesta sintaxe do

50
00:03:11,550 --> 00:03:17,430
objeto que estamos familiarizados.

51
00:03:17,430 --> 00:03:19,990
Então, você pode ver que é apenas um objeto comum,

52
00:03:20,070 --> 00:03:25,680
como os que escrevemos por conta própria, exatamente o mesmo que Rusty, o objeto do cão, exceto que há muito mais informações aqui.

53
00:03:25,710 --> 00:03:30,220
Então, temos coisas como fontes ou links

54
00:03:30,510 --> 00:03:40,050
de imagens, mas também temos coisas como corpo e esse corpo representa todo o corpo.

55
00:03:40,050 --> 00:03:41,040
Então, cada elemento que você vê aqui é dentro do corpo.

56
00:03:41,040 --> 00:03:44,320
propriedades, incluindo um chamado de nós da criança.

57
00:03:44,340 --> 00:03:49,710
Então, se eu abrir o corpo, verá que temos um monte de outras

58
00:03:49,710 --> 00:03:51,050
Então, nós de criança

59
00:03:51,150 --> 00:03:57,960
nos mostra que há uma div há uma etiqueta de script e há outra div dentro do corpo.

60
00:03:57,960 --> 00:03:58,590
E se nós fomos aos elementos, veríamos isso.

61
00:03:58,590 --> 00:04:00,710
Então, aqui está o corpo dentro do corpo.

62
00:04:00,710 --> 00:04:03,360
Nós temos essa primeira div, temos uma tag de script e temos a segunda div.

63
00:04:03,420 --> 00:04:07,990
E então, o que dizemos que abrimos essa

64
00:04:08,430 --> 00:04:15,480
terceira div, esperamos ver mais duas divs dentro se essa segunda div.

65
00:04:15,480 --> 00:04:15,890
E se

66
00:04:15,900 --> 00:04:23,390
nós vamos ao cônsul e nós olhamos para o segundo div e então nós olhamos para os nós filhos, nós vemos OK, há mais dois divs. Assim, como você pode ver, o dom se torna realmente enorme muito rápido.

67
00:04:23,430 --> 00:04:28,360
Existem centenas e centenas de propriedades e métodos diferentes e diferentes

68
00:04:28,500 --> 00:04:32,610
nós e toda essa estrutura louca de objetos aninhados.

69
00:04:32,610 --> 00:04:34,730
É apenas tanta coisa.

70
00:04:34,890 --> 00:04:36,250
É um daqueles tempos que eu

71
00:04:36,270 --> 00:04:39,570
mencionei no início desta classe, onde você terá que estar confortável sem saber tudo.

72
00:04:39,570 --> 00:04:42,060
Posso dizer-lhe agora que a maioria dos desenvolvedores não conhece metade das propriedades aqui.

73
00:04:42,420 --> 00:04:46,450
Eu diria que eles trabalham com cerca de 10% no máximo.

74
00:04:46,500 --> 00:04:49,200
Há muito mais coisas aqui que quase nunca precisamos usar.

75
00:04:49,200 --> 00:04:52,630
E então, em algum momento da linha, algo surge e nós precisamos fazer algo que nunca fizemos antes.

76
00:04:52,680 --> 00:04:57,150
Nós google e nós descobrimos oh tudo bem, então é por isso que a propriedade de mudança não curada é para.

77
00:04:57,330 --> 00:05:03,690
Eu não fazia ideia.

78
00:05:03,750 --> 00:05:04,560
E isso é realmente o que é ser um desenvolvedor.

79
00:05:04,680 --> 00:05:06,500
Até agora, com o JavaScript, estamos trabalhando

80
00:05:06,510 --> 00:05:11,190
em um pouco de um pequeno mundo controlado onde aprendemos sobre funções e objetos que aprendemos sobre variáveis.

81
00:05:11,190 --> 00:05:14,380
E há um número finito de maneiras de fazer coisas

82
00:05:14,610 --> 00:05:19,110
e há um subconjunto de conhecimento muito específico que você precisa saber com o DOM.

83
00:05:19,110 --> 00:05:21,440
Agora, temos esse enorme ecossistema para trabalhar em tantas propriedades.

84
00:05:21,450 --> 00:05:25,500
Então eu só quero reiterar que há muito aqui.

85
00:05:25,620 --> 00:05:28,020
Vamos nos concentrar nas peças importantes, mas o objetivo não é memorizar.

86
00:05:28,170 --> 00:05:32,100
O objetivo não é dominar todas as propriedades.

87
00:05:32,130 --> 00:05:34,780
Novamente 10% no máximo é tudo o que você precisa para ser um desenvolvedor web competente.

88
00:05:34,920 --> 00:05:39,560
OK, então vamos voltar e eu só quero passar por mais uma vez.

89
00:05:40,000 --> 00:05:43,080
Resuma o que falamos.

90
00:05:43,080 --> 00:05:44,450
Portanto, o DOM significa modelo de objeto de documento.

91
00:05:44,700 --> 00:05:48,030
É a interface entre o seu javascript e seu H. M. S. É assim que podemos usar o nosso javascript para tornar as coisas interativas.

92
00:05:48,150 --> 00:05:52,150
É assim que fazemos coisas como

93
00:05:52,280 --> 00:05:55,180
adicionar um novo elemento à página ou alterar o atributo ref de um link

94
00:05:55,260 --> 00:06:01,800
ou alterar a imagem de fundo em nosso corpo ou como podemos obter o valor de um formulário ou podemos fazer validades e animações personalizadas e interativas os elementos em que

95
00:06:01,800 --> 00:06:07,320
você clicar em algum código executam todas essas diferentes possibilidades resultaram do fato de que o modelo de objeto do documento conecta nosso javascript com o H. M. S. Acesso.

96
00:06:07,320 --> 00:06:13,160
objeto do modelo de objeto do documento nos diz que é um monte de objetos javascript que são elementos de modelagem em nosso H.

97
00:06:13,410 --> 00:06:18,960
Portanto, a parte do modelo de T. montante.

98
00:06:19,260 --> 00:06:24,930
Então nós temos um ATAC aqui, acabamos com um objeto aqui representando aquele atec.

99
00:06:24,930 --> 00:06:27,470
E então acabamos com outro objeto representando essa marca H1 que vemos aqui.

100
00:06:27,870 --> 00:06:32,980
Por fim, ele é chamado de modelo de objeto de documento

101
00:06:33,180 --> 00:06:37,770
porque tudo vive dentro desse objeto chamado de documento.

102
00:06:37,980 --> 00:06:42,930
É o nó da raiz onde todo o resto vive dentro de.

103
00:06:42,930 --> 00:06:43,740
Então, o próximo vídeo, vamos começar a escrever algum código.

104
00:06:43,830 --> 00:06:46,850
 

105
00:06:47,070 --> 00:06:49,030