Até agora, falamos sobre por que dominar a denominação é emocionante.
Por que você deveria se importar.
Os diferentes sites que usam as infinitas possibilidades dos jogos todas as coisas interessantes.
Mas ainda não falamos sobre o que o DOM realmente é.
Então, vamos fazer isso neste vídeo para começar, vamos apenas defini-lo.
Dio am.
Dom significa modelo de objeto de documento.
O significado dessas três palavras fará um pouco mais de sentido nas lâminas vindouras.
Mas vamos começar definindo-o em um nível mais alto.
O Dom é a interface entre o seu javascript e sua idade.
Tim Mounty SS É basicamente um monte de funções especiais javascript métodos de objetos javascript que podemos usar para interagir
com o nosso H. M. S. avaliar que podemos mudar as coisas que podemos adicionar elementos remover elementos mudar cores
animar coisas de todos os tipos de maneiras interessantes de interagir com seus H. M. S. avaliar.
Neste slide, falo um pouco sobre como o DOM é construído e por que ele é chamado
de modelo de objeto de documento.
uma etiqueta com meu link como o texto e um H-1 com meu cabeçalho como o texto e isso é isto.
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
um título e
Então, quando eu abrir isso no navegador, vejo isso, mas, nos bastidores, o DOM é criado.
É construído a partir desta aqui.
Então, o que quero dizer é que essa idade Tim é transformada em um monte de objetos javascript.
Cada objeto modela um desses elementos.
É aí que conseguimos o modelo do objeto modelo do modelo de objeto de documento.
novamente, apenas para reiterar, carregamos cada equipe no navegador, o navegador nos mostra coisas assim.
Então,
Mas, nos bastidores, ele faz esse modelo de cada elemento com um objeto javascript, assim
como modelamos meu cão Rusty usando um objeto javascript.
Ele tinha um nome de propriedade e outra raça e idade.
Esses objetos são fundamentalmente a mesma coisa, exceto que o conteúdo é diferente.
Eles terão coisas como tipo de tag texto fonte atributos cor cor do fundo tamanho do texto todas as
propriedades diferentes que estão todas contidas dentro de cada objeto.
Definitivamente vamos gastar muito tempo trabalhando com esses objetos para que os detalhes não sejam importantes.
Tudo o que quero enfatizar aqui é que carregamos cada tim L. É exibido no navegador e o navegador
leva esse Tim L e leva cada elemento e o transforma em um objeto.
Então, isso abrange a parte do modelo de objeto.
E o documento?
Então, você pode ver aqui, este
é 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
de documento.
Então, podemos ir a qualquer página da Web.
Então eu tenho o Google aberto e eu só vou digitar o con. A palavra documento.
E quando eu faço isso, recebo essa grande coisa que volta esse grande objeto.
Exceto que não parece um objeto javascript.
Não é realmente o que esperamos.
Isso porque o navegador está meio escondido de mim.
O que realmente está me mostrando é com
o correio do HQ parece como texto, mas não está me mostrando os objetos reais que são modelados neste Timo.
do console e vamos cancelar esse D.
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
objeto que estamos familiarizados.
Então, você pode ver que é apenas um objeto comum,
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.
Então, temos coisas como fontes ou links
de imagens, mas também temos coisas como corpo e esse corpo representa todo o corpo.
Então, cada elemento que você vê aqui é dentro do corpo.
propriedades, incluindo um chamado de nós da criança.
Então, se eu abrir o corpo, verá que temos um monte de outras
Então, nós de criança
nos mostra que há uma div há uma etiqueta de script e há outra div dentro do corpo.
E se nós fomos aos elementos, veríamos isso.
Então, aqui está o corpo dentro do corpo.
Nós temos essa primeira div, temos uma tag de script e temos a segunda div.
E então, o que dizemos que abrimos essa
terceira div, esperamos ver mais duas divs dentro se essa segunda div.
E se
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.
Existem centenas e centenas de propriedades e métodos diferentes e diferentes
nós e toda essa estrutura louca de objetos aninhados.
É apenas tanta coisa.
É um daqueles tempos que eu
mencionei no início desta classe, onde você terá que estar confortável sem saber tudo.
Posso dizer-lhe agora que a maioria dos desenvolvedores não conhece metade das propriedades aqui.
Eu diria que eles trabalham com cerca de 10% no máximo.
Há muito mais coisas aqui que quase nunca precisamos usar.
E então, em algum momento da linha, algo surge e nós precisamos fazer algo que nunca fizemos antes.
Nós google e nós descobrimos oh tudo bem, então é por isso que a propriedade de mudança não curada é para.
Eu não fazia ideia.
E isso é realmente o que é ser um desenvolvedor.
Até agora, com o JavaScript, estamos trabalhando
em um pouco de um pequeno mundo controlado onde aprendemos sobre funções e objetos que aprendemos sobre variáveis.
E há um número finito de maneiras de fazer coisas
e há um subconjunto de conhecimento muito específico que você precisa saber com o DOM.
Agora, temos esse enorme ecossistema para trabalhar em tantas propriedades.
Então eu só quero reiterar que há muito aqui.
Vamos nos concentrar nas peças importantes, mas o objetivo não é memorizar.
O objetivo não é dominar todas as propriedades.
Novamente 10% no máximo é tudo o que você precisa para ser um desenvolvedor web competente.
OK, então vamos voltar e eu só quero passar por mais uma vez.
Resuma o que falamos.
Portanto, o DOM significa modelo de objeto de documento.
É a interface entre o seu javascript e seu H. M. S. É assim que podemos usar o nosso javascript para tornar as coisas interativas.
É assim que fazemos coisas como
adicionar um novo elemento à página ou alterar o atributo ref de um link
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
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.
objeto do modelo de objeto do documento nos diz que é um monte de objetos javascript que são elementos de modelagem em nosso H.
Portanto, a parte do modelo de T. montante.
Então nós temos um ATAC aqui, acabamos com um objeto aqui representando aquele atec.
E então acabamos com outro objeto representando essa marca H1 que vemos aqui.
Por fim, ele é chamado de modelo de objeto de documento
porque tudo vive dentro desse objeto chamado de documento.
É o nó da raiz onde todo o resto vive dentro de.
Então, o próximo vídeo, vamos começar a escrever algum código.