Então, agora discutimos por que você deveria se preocupar com o Domm porque é excitante.
E também conversamos sobre o que significa o modelo de objeto do documento.
O fato de ser apenas um modelo de cada elemento em uma página usando objetos javascript o objeto de
nível superior é chamado de documento.
Então, isso é excelente, mas não vimos como fazer nada com isso ainda.
Então, neste vídeo, vou apresentar brevemente o processo de manipulação de coisas usando o cachorro.
Então, abaixei todo o processo para duas palavras-chave, selecione e manipulei.
seguida, aplicamos estilos como cor de fundo prateada roxa um pixel preto sólido com javascript e Dom e população.
Então, apenas como ver avaliar onde escrevemos um seletor para selecionar algo com a classe de especial ou todos os
h ou todas as tags de imagem, selecionamos elementos e, em
Nós também selecionamos elementos, embora nós o façamos de uma maneira muito diferente.
Nós escrevemos o código javascript que vai e seleciona elementos e retorna-os de volta para nós e,
então, mudamos as propriedades para eles, então selecionamos algo e depois o manipulamos.
Então, nos próximos slides, eu vou mostrar-lhe como ele poderia selecionar este H-1 meu
cabeçalho e como poderíamos mudá-lo para ser rosa.
muito nos últimos vídeos, mas não quero que você se concentre tanto na sintaxe quanto nos conceitos.
Eu tenho dito isso
Os próximos vídeos entrarão no melhor da seleção e manipulação.
Esta é apenas uma visão geral de como isso funciona.
Então, neste slide, vou mostrar como você poderia selecionar aquele H1, assim como com C.
Há muitas maneiras diferentes de selecionar um determinado elemento.
Neste caso, este seletor de consultas de pontos de código de código de código H-1 vai selecionar o H-1
nesta página.
Então eu destaquei aqui com esta caixa verde para que você possa ver o que está sendo selecionado.
Então, novamente, var H-1, esta é apenas qualquer variável que queremos, é igual ao documento que consulta o seletor 8: 1.
Então vamos passar muito mais tempo com o seletor de consultas e definir o que é e como funciona.
Mas retorna um objeto que representa esse H1 e ele salva isso na variável H-1.
Então, esse é o processo de seleção.
A próxima parte é manipulá-lo para manipulá-lo. Eu posso fazer todo tipo de coisas e tudo o que eu vou
fazer aqui é mudar a cor para ser rosa.
Então, basta escrever H-1, que é a nossa variável que possui o objeto que representa o estilo de ponto H-1.
propriedade e essa propriedade de estilo é um objeto enorme com um monte de outras propriedades e a cor é uma delas.
Essa é uma
Então H-1 faz estilo, mas a cor é igual ao rosa.
E então é tudo o que temos a fazer.
E o navegador vê que eu mudo essa propriedade para rosa e atualiza automaticamente o
que é exibido, tornando-a rosa.
Então selecionamos aqui e depois manipulamos.
Então eu tenho mais um exemplo aqui.
É um pouco mais complicado.
Estamos fazendo uma animação muito simples, onde cada segundo, estamos mudando a cor de fundo
do corpo entre azul e branco.
Então, o que precisamos fazer primeiro é selecionar o corpo e depois manipulá-lo para selecioná-lo.
Eu tenho outra linha usando o seletor de consulta de despejo de documentos, que novamente vamos
voltar ao próximo documento de vídeo que consulta o corpo do seletor.
Então, isso me dá o elemento do corpo onde realmente me dá a representação do
objeto o modelo daquilo que eu salvo na variável corporal.
booleano que vou usar porque preciso saber se eu vou de azul para branco ou branco para azul.
Então eu tenho essa variável é azul, que é apenas um
Então, começa como falso e então estou usando o intervalo definido que cobrimos alguns anos atrás.
Se você não se lembra de como funciona, basicamente leva dois argumentos.
O primeiro é algum código para executar uma função eo segundo é um número ou um tempo em milissegundos.
Portanto, é necessário este número de milissegundos, que é mil ou um segundo e cada
segundo chamará esse código.
Então, o que esse código faz é verificar se o plano de fundo está azul no momento se for.
Em seguida, mudamos para ser branco se o fundo é branco, então nós o mudamos para ser azul.
Então, para dar uma olhada, nós temos o nosso se é azul.
Então, isso é apenas variável.
Começa como falso.
Assim, a primeira vez que a página carrega o fundo é branco, o azul é falso.
Então, esta linha não é executada, mas esta faz de outro corpo, o fundo escuro do estilo é igual a essa cor
hexadecimal que é azul.
Então, isso altera o plano de fundo para ser azul.
Então, nós apenas mudamos a nossa é a variável azul do falso para o verdadeiro.
E essa é uma ótima maneira de fazer isso com o ponto de exclamação ou o operador não.
Então, esse código é executado novamente na próxima vez em que o azul já é verdadeiro.
Então, esse código funciona, o corpo faz estilo, mas o plano de fundo é igual a branco.
Então, agora vamos voltar ao branco.
Isso não é executado e depois mudamos é azul de volta para falso.
E isso continua para sempre.
Então, não é que você quisesse alguma coisa tão distrativa como uma cor de fundo que muda a cada segundo.
Mas isso mostra que podemos fazer coisas mais complexas do que simplesmente mudar um H1 de preto para rosa.
Então, para embrulhar tudo isso duas palavras, selecione manipular, selecionamos Nós pegamos alguns objetos que representam elementos
e depois fazemos algo para eles.
Assim, o resto desta unidade será focada em diferentes formas de seleção e, então,
de diferentes formas de manipulação.
Então, o próximo vídeo vai mergulhar profundamente nas diferentes formas de selecionar elementos usando javascript.
Já vimos um seletor que já é estranho.
Nós vamos expandir isso e aprender mais alguns