1
00:00:00,300 --> 00:00:03,940
Então, agora discutimos por que você deveria se preocupar com o Domm porque é excitante.

2
00:00:03,990 --> 00:00:07,640
E também conversamos sobre o que significa o modelo de objeto do documento.

3
00:00:07,680 --> 00:00:13,320
O fato de ser apenas um modelo de cada elemento em uma página usando objetos javascript o objeto de

4
00:00:13,350 --> 00:00:15,130
nível superior é chamado de documento.

5
00:00:15,240 --> 00:00:18,340
Então, isso é excelente, mas não vimos como fazer nada com isso ainda.

6
00:00:18,390 --> 00:00:23,460
Então, neste vídeo, vou apresentar brevemente o processo de manipulação de coisas usando o cachorro.

7
00:00:23,790 --> 00:00:29,630
Então, abaixei todo o processo para duas palavras-chave, selecione e manipulei.

8
00:00:29,670 --> 00:00:36,540
seguida, aplicamos estilos como cor de fundo prateada roxa um pixel preto sólido com javascript e Dom e população.

9
00:00:36,540 --> 00:00:43,620
Então, apenas como ver avaliar onde escrevemos um seletor para selecionar algo com a classe de especial ou todos os

10
00:00:43,710 --> 00:00:47,840
h ou todas as tags de imagem, selecionamos elementos e, em

11
00:00:47,850 --> 00:00:51,380
Nós também selecionamos elementos, embora nós o façamos de uma maneira muito diferente.

12
00:00:51,480 --> 00:00:56,910
Nós escrevemos o código javascript que vai e seleciona elementos e retorna-os de volta para nós e,

13
00:00:56,910 --> 00:01:01,260
então, mudamos as propriedades para eles, então selecionamos algo e depois o manipulamos.

14
00:01:01,290 --> 00:01:06,810
Então, nos próximos slides, eu vou mostrar-lhe como ele poderia selecionar este H-1 meu

15
00:01:06,810 --> 00:01:09,750
cabeçalho e como poderíamos mudá-lo para ser rosa.

16
00:01:09,750 --> 00:01:14,070
muito nos últimos vídeos, mas não quero que você se concentre tanto na sintaxe quanto nos conceitos.

17
00:01:14,160 --> 00:01:15,290
Eu tenho dito isso

18
00:01:15,330 --> 00:01:18,930
Os próximos vídeos entrarão no melhor da seleção e manipulação.

19
00:01:18,930 --> 00:01:21,150
Esta é apenas uma visão geral de como isso funciona.

20
00:01:21,150 --> 00:01:25,600
Então, neste slide, vou mostrar como você poderia selecionar aquele H1, assim como com C.

21
00:01:25,620 --> 00:01:28,580
Há muitas maneiras diferentes de selecionar um determinado elemento.

22
00:01:28,800 --> 00:01:36,270
Neste caso, este seletor de consultas de pontos de código de código de código H-1 vai selecionar o H-1

23
00:01:36,270 --> 00:01:36,920
nesta página.

24
00:01:37,050 --> 00:01:40,960
Então eu destaquei aqui com esta caixa verde para que você possa ver o que está sendo selecionado.

25
00:01:41,340 --> 00:01:48,640
Então, novamente, var H-1, esta é apenas qualquer variável que queremos, é igual ao documento que consulta o seletor 8: 1.

26
00:01:48,690 --> 00:01:52,420
Então vamos passar muito mais tempo com o seletor de consultas e definir o que é e como funciona.

27
00:01:52,470 --> 00:01:59,920
Mas retorna um objeto que representa esse H1 e ele salva isso na variável H-1.

28
00:01:59,970 --> 00:02:02,190
Então, esse é o processo de seleção.

29
00:02:02,190 --> 00:02:08,340
A próxima parte é manipulá-lo para manipulá-lo. Eu posso fazer todo tipo de coisas e tudo o que eu vou

30
00:02:08,340 --> 00:02:11,170
fazer aqui é mudar a cor para ser rosa.

31
00:02:11,490 --> 00:02:18,470
Então, basta escrever H-1, que é a nossa variável que possui o objeto que representa o estilo de ponto H-1.

32
00:02:18,510 --> 00:02:24,690
propriedade e essa propriedade de estilo é um objeto enorme com um monte de outras propriedades e a cor é uma delas.

33
00:02:24,690 --> 00:02:25,580
Essa é uma

34
00:02:25,920 --> 00:02:28,920
Então H-1 faz estilo, mas a cor é igual ao rosa.

35
00:02:28,920 --> 00:02:30,240
E então é tudo o que temos a fazer.

36
00:02:30,270 --> 00:02:35,400
E o navegador vê que eu mudo essa propriedade para rosa e atualiza automaticamente o

37
00:02:35,820 --> 00:02:37,500
que é exibido, tornando-a rosa.

38
00:02:37,500 --> 00:02:41,140
Então selecionamos aqui e depois manipulamos.

39
00:02:42,120 --> 00:02:43,560
Então eu tenho mais um exemplo aqui.

40
00:02:43,610 --> 00:02:45,230
É um pouco mais complicado.

41
00:02:45,240 --> 00:02:50,610
Estamos fazendo uma animação muito simples, onde cada segundo, estamos mudando a cor de fundo

42
00:02:50,910 --> 00:02:52,940
do corpo entre azul e branco.

43
00:02:52,950 --> 00:02:58,620
Então, o que precisamos fazer primeiro é selecionar o corpo e depois manipulá-lo para selecioná-lo.

44
00:02:58,740 --> 00:03:03,300
Eu tenho outra linha usando o seletor de consulta de despejo de documentos, que novamente vamos

45
00:03:03,300 --> 00:03:06,720
voltar ao próximo documento de vídeo que consulta o corpo do seletor.

46
00:03:06,780 --> 00:03:11,880
Então, isso me dá o elemento do corpo onde realmente me dá a representação do

47
00:03:11,880 --> 00:03:15,450
objeto o modelo daquilo que eu salvo na variável corporal.

48
00:03:15,450 --> 00:03:20,490
booleano que vou usar porque preciso saber se eu vou de azul para branco ou branco para azul.

49
00:03:20,640 --> 00:03:23,940
Então eu tenho essa variável é azul, que é apenas um

50
00:03:24,030 --> 00:03:28,870
Então, começa como falso e então estou usando o intervalo definido que cobrimos alguns anos atrás.

51
00:03:28,920 --> 00:03:32,230
Se você não se lembra de como funciona, basicamente leva dois argumentos.

52
00:03:32,340 --> 00:03:38,880
O primeiro é algum código para executar uma função eo segundo é um número ou um tempo em milissegundos.

53
00:03:39,150 --> 00:03:44,880
Portanto, é necessário este número de milissegundos, que é mil ou um segundo e cada

54
00:03:44,880 --> 00:03:46,230
segundo chamará esse código.

55
00:03:46,560 --> 00:03:51,080
Então, o que esse código faz é verificar se o plano de fundo está azul no momento se for.

56
00:03:51,180 --> 00:03:56,330
Em seguida, mudamos para ser branco se o fundo é branco, então nós o mudamos para ser azul.

57
00:03:56,610 --> 00:04:00,030
Então, para dar uma olhada, nós temos o nosso se é azul.

58
00:04:00,120 --> 00:04:01,640
Então, isso é apenas variável.

59
00:04:01,650 --> 00:04:02,900
Começa como falso.

60
00:04:02,910 --> 00:04:07,890
Assim, a primeira vez que a página carrega o fundo é branco, o azul é falso.

61
00:04:07,920 --> 00:04:15,240
Então, esta linha não é executada, mas esta faz de outro corpo, o fundo escuro do estilo é igual a essa cor

62
00:04:15,240 --> 00:04:16,570
hexadecimal que é azul.

63
00:04:16,770 --> 00:04:18,840
Então, isso altera o plano de fundo para ser azul.

64
00:04:19,140 --> 00:04:22,960
Então, nós apenas mudamos a nossa é a variável azul do falso para o verdadeiro.

65
00:04:23,130 --> 00:04:27,690
E essa é uma ótima maneira de fazer isso com o ponto de exclamação ou o operador não.

66
00:04:27,780 --> 00:04:32,550
Então, esse código é executado novamente na próxima vez em que o azul já é verdadeiro.

67
00:04:32,850 --> 00:04:36,870
Então, esse código funciona, o corpo faz estilo, mas o plano de fundo é igual a branco.

68
00:04:36,870 --> 00:04:38,550
Então, agora vamos voltar ao branco.

69
00:04:38,670 --> 00:04:42,980
Isso não é executado e depois mudamos é azul de volta para falso.

70
00:04:43,290 --> 00:04:44,980
E isso continua para sempre.

71
00:04:45,090 --> 00:04:49,740
Então, não é que você quisesse alguma coisa tão distrativa como uma cor de fundo que muda a cada segundo.

72
00:04:50,190 --> 00:04:56,160
Mas isso mostra que podemos fazer coisas mais complexas do que simplesmente mudar um H1 de preto para rosa.

73
00:04:57,450 --> 00:05:03,930
Então, para embrulhar tudo isso duas palavras, selecione manipular, selecionamos Nós pegamos alguns objetos que representam elementos

74
00:05:03,930 --> 00:05:06,260
e depois fazemos algo para eles.

75
00:05:06,750 --> 00:05:11,010
Assim, o resto desta unidade será focada em diferentes formas de seleção e, então,

76
00:05:11,010 --> 00:05:12,370
de diferentes formas de manipulação.

77
00:05:12,390 --> 00:05:16,830
Então, o próximo vídeo vai mergulhar profundamente nas diferentes formas de selecionar elementos usando javascript.

78
00:05:17,190 --> 00:05:19,470
Já vimos um seletor que já é estranho.

79
00:05:19,500 --> 00:05:21,450
Nós vamos expandir isso e aprender mais alguns