DOUG LLOYD: Neste vídeo, queríamos para chamar a atenção separado a uma muito particular elemento de JavaScript que você pode achar útil quando você está começando para trabalhar na manipulação de páginas da web e alterando o conteúdo da sua página web no vôo. E essa é a noção de Document Object Model. Assim como vimos no nosso vídeo sobre JavaScript, objetos são muito flexíveis. E eles podem conter vários campos. E embora nós não ir para um monte de detalhe, esses campos ou propriedades, que seria provavelmente mais chamá-los de forma adequada no contexto de um objecto, mesmo essas propriedades pode haver outros objectos. E dentro desses objetos pode haver outros objectos. 

Você tem este objeto muito grande com um monte de outros objetos dentro dele, que tipo de cria essa idéia de uma grande árvore. Agora, o objeto documento é um muito especial objeto em JavaScript que organiza toda a sua web artigo sob este tipo de guarda-chuva de um objeto. E assim, no interior do documento objeto são objetos que apresentam a cabeça eo corpo de sua página web. 

Dentro daqueles são outra objetos, et cetera, et cetera, até que toda a sua página web tem foi organizada neste grande objeto. Qual é a cabeça aqui, certo? Bem, sabemos como trabalhar com objetos em JavaScript. 

Então, se temos um objeto que refere-se a toda a página web, que significa chamando o correto métodos para manipular esse objeto ou modificar certos de suas propriedades, pode mudar os elementos de nossa página programaticamente usando JavaScript em vez de ter codificar as coisas com, digamos, HTML. Então aqui está um exemplo de uma muito simples página web, certo? Tem tags HTML, uma cabeça. 

Dentro de há um título, Olá mundo. Então eu tenho um corpo. Dentro disso, eu tenho três coisas diferentes. Eu tenho uma tag de cabeçalho h2, um parágrafo, e um link. Esta é uma página web muito simples. 

Bem, o que pode o documento objeto para este olhar como? Bem, é um pouco assustador talvez em primeiro lugar. Mas é realmente apenas uma grande árvore. E na própria raiz do que é documento. 

Dentro do documento é outra objeto referindo-se ao HTML da minha página. E o HTML da minha página é tudo isso. E, em seguida, dentro do HTML objeto, eu tenho um objeto cabeça, que se refere a tudo o que há. 

E lá dentro, Eu tenho um objeto título. E lá dentro, tenho outra objetar que é apenas Olá mundo. Eu poderia ter o meu corpo representado como este. 

Dentro do meu corpo, eu tenho uma h2 objeto e um objeto para p parágrafo e um um objeto para um link. E assim este toda hierarquia pode ser representada como uma grande árvore com lotes de pouco menor coisas que vem de fora. Agora, é claro, quando estamos programando, nós não pensar em coisas como uma grande árvore. Queremos ver real coisas relacionadas com código. 

E, felizmente, nós podemos usar nossas ferramentas de desenvolvimento para realmente dar uma olhada objeto de documento deste site. E vamos fazer isso. Então, eu abri uma aba do navegador. 

E eu abri Developer Tools. E no meu vídeo em JavaScript, I mencionou que o console não é única em algum lugar onde nós imprimimos a informação, é também um lugar onde nós pode inserir informações. Neste contexto, o Eu vou dizer é Eu gostaria de voltar os objetos de documento, para que eu possa começar a ter um olhar para ele. Então, como eu poderia fazer isso? Bem, se eu quiser organizá-lo realmente bem, Eu vou dizer console.dir, D-I-R. Agora, eu uso apenas console.log para impressão algo muito simples. Mas se eu quiser organizar este hierarquicamente como um objeto, Eu quero que tipo de estrutura como uma estrutura de diretório. 

Então, eu quero console.dir documento. Eu vou bater Enter. E logo abaixo dela agora, e eu vou fazer zoom aqui, Eu tenho esse documento de resposta com uma pequena seta ao lado dele. Agora, quando eu abrir esta seta, lá vai ser um monte de coisas. 

Mas vamos ignorar um monte do mesmo e apenas uma espécie de foco sobre a parte mais importante, por isso, pode começar a navegar neste documento. Há muito mais para o DOM do que apenas pai nós e nós filho. Há um monte de coisas acessórias. 

Então, eu vou abrir isso. E há um lote inteiro de coisas que aparece. Mas tudo o que me interessa é aqui, nós filho. Vamos abrir isso. 

Dentro de lá eu ver algo familiar, HTML. Então, dentro do nosso documento Um nível baixo, HTML. Eu abro isso. O que estamos esperando? 

Se você se lembrar do nosso diagrama, o que devemos encontrar no interior de HTML? O que dois nós são abaixo dele na árvore? Vamos descobrir. Nós abrimos HTML. Descemos para seus nós filho. 

Pop que se abrem. Há cabeça e do corpo. E nós podemos abrir a cabeça. Ir para seus nós filho. Bem, há o título. 

E poderíamos continuar e assim para sempre. Nós poderíamos fazer isso com o corpo também. Mas há uma maneira de olhar para o documento organizada como uma grande objecto. E se olharmos para um grande objeto que se parece muito como código, o que significa que podemos começar para manipular esse grande objeto usando código para alterar o que o nosso site olha e sente como. 

Então essa é uma ferramenta muito poderosa temos à nossa disposição agora. Então, como acabamos de ver, o documento próprio objeto e todos os objectos no interior da mesma têm propriedades e métodos, apenas como qualquer outro objeto que nós temos vindo a trabalhar com em JavaScript. Mas podemos usar essas propriedades e utilizar os mesmos métodos de tipo de drill down a partir do documento grande e obter menor e mais e mais, mais fina grãos de detalhe, até que chegar a uma parte muito específica do nosso A página web que queremos mudar. 

E quando nós atualizamos propriedades do Objeto de documento ou chamar esses métodos, as coisas podem acontecer em nossa página web. E não precisa fazer qualquer refrescante para que essas alterações tenham efeito. 

E isso é uma habilidade muito legal temos quando estamos trabalhando com o código. Então, quais são algumas dessas propriedades que fazem parte de um objeto de documento? Bem, você provavelmente viu um alguns deles muito rapidamente como estávamos fechando através do documento gigante objeto que acabamos de ver no navegador da web. 

Mas um par dessas propriedades pode ser coisas como HTML interior. E você pode até lembrar-me usando este vídeo no JavaScript no final, quando eu estava falando sobre os eventos. O que era esse HTML interior? Bem, é apenas o que é entre as tags. 

E assim o HTML interno, por exemplo, do título tag, se tivéssemos continuou indo em que exemplo de um momento atrás, teria sido Olá mundo. Esse foi o título da nossa página. Outras propriedades incluir o nome do nó, o que é o nome de um HTML elemento, como título. ID, que é o ID atributo de um elemento HTML. 

Lembre-se que nós podemos indicar especialmente elementos específicos do nosso HTML com um atributo ID, que geralmente vem a calhar no contexto da CSS, especificamente. Nó pai, que é uma referência ao o que é apenas acima de mim no DOM. E nós filho, que é um referência ao que está abaixo de mim. E nós vimos um monte de que só de olhar através. Nós filho, isso é como chegamos mais e mais na árvore. 

Atributos, isso é apenas uma matriz de atributos do elemento HTML. Assim, um exemplo de atributos pode se você tem uma tag de imagem, geralmente tem um atributo de origem, talvez uma altura e um atributo de largura. E para que seria apenas um array de todos os atributos associados com esse elemento de HTML. 

Estilo é outro que não representa o CSS estilo de um elemento em particular. E mais adiante neste vídeo, vamos especificamente estilo de alavanca para fazer um casal das alterações ao nosso site. Portanto, estas são algumas propriedades. 

E há também alguns são métodos que podemos para usar também mais rapidamente talvez isolar elementos do objeto de documento. Talvez, o mais versátil destes que são getElementById. Então, eu poderia dizer algo como, porque lembre-se que é um método do Documento Objeto, document.getElementById. 

E dentro desses parênteses, especifique um elemento HTML com um determinado ID atributo que eu tenho previamente definido, e eu vou imediatamente vá para a direita a esse elemento do website global. Então eu não tenho para perfurar talvez para baixo através de cada camada única. Eu só posso usar esse método para encontrá-lo, como uma espécie de míssil busca de calor, certo? Ele só vai e encontra exatamente o que está procurando. 

GetElementsByTagName é muito semelhante em espírito. Talvez isso iria encontrar todas as tags em negrito ou todas as tags p e me dar uma matriz de tudo que eu poderia, então, trabalhar com ele. appendChild acrescenta algo um nível abaixo na árvore. 

Então, eu posso adicionar um novo inteiro um elemento de nível mais baixo. Ou eu posso remover um elemento que é Um nível mais baixo também se eu quiser para apagar algo da minha página web. Agora, uma nota de codificação rápida e um rápido dor de cabeça poupança nota, eu espero. 

getElementById-- o d é minúscula. Eu não posso te dizer quantas vezes eu tenho usado getElementById e capitalizado a d lá. Porque é muito comum. Se escrever a palavra ID, é Eu geralmente de capital de capital D. E meu código simplesmente não funciona. E eu não consigo descobrir o porquê. Este é realmente, realmente, realmente bug comum que todo mundo faz, mesmo os especialistas que têm vem fazendo isso para sempre. Então, basta estar ciente, getElementById, que d é minúscula. E, esperamos, que poupa-lhe vários minutos a menos de dor de cabeça. 

Então, o que tudo isso nos diz? Temos estes métodos. Temos essas propriedades. Agora, se partirmos documento, documento. o que quer, agora podemos chegar a qualquer peças da nossa página web que queremos usando JavaScript apenas chamando esses métodos e alavancar as propriedades que encontramos em vários locais. 

Isso pode ficar prolixo, este document.getElementById, talvez ter um nome de marca por muito tempo, talvez você fazer mais chamadas mais tarde. As coisas podem ficar um pouco prolixo. E, como programadores, como você provavelmente já viu em muitos desses vídeos, nós não gostamos de coisas prolixos. 

Nós gostamos de ser capaz de fazer as coisas rapidamente. Então, nós gostaríamos de uma mais forma concisa para dizer alguma coisa. Portanto, este tipo de leads para o noção de algo chamado jQuery. Agora jQuery não é JavaScript. Não é parte do JavaScript. 

É uma biblioteca que foi escrita por alguns programadores de JavaScript cerca de 10 anos atrás. E seu objetivo é simplificar o que é isso chamados scripts do lado do cliente, o que é basicamente o que nós estávamos apenas falando com manipulações DOM. E assim se eu quisesse modificar o cor da minha página web fundo, talvez uma Div específico. 

Aqui, eu estou ficando aparentemente ElementById colorDiv. E eu quero definir a cor de fundo. Se eu estou usando apenas puro JavaScript usando o Document Object Model, isso é um monte de coisas, certo? document.getElementById colorDiv.style.backgroundColor = verde. 

Ufa. Isso foi muito a dizer. É um monte de digitar, também. E assim, em jQuery, podemos talvez dizer este um pouco mais concisa. O trade off sendo que é talvez um pouco pouco mais enigmática, de repente, certo? 

Pelo menos, o tempo é um pouco mais explicativo sobre o que estamos fazendo. Este sinal de dólar, parênteses, Citação único, mistura, colorDiv, certo? O que isso significa? Bem, isso é basicamente apenas document.getElementById colorDiv. 

Mas é este tipo de taquigrafia maneira de fazê-lo usando jQuery. Vamos apenas dar uma olhada agora em um par de maneiras diferentes que eu poderia realmente usar este Document Object Modelo para manipular pedaços do meu site. Em particular, nós vamos estar trabalhando em manipulação a cor de um determinado Div, colorDiv, em uma página web. Então vamos dar uma olhada nisso. Tudo certo. Então, eu estou em uma página. É chamado test.html quando você baixar isso se você quer mexer com isso. E eu tenho um monte de botões nesta página. E eu estou dizendo funções individuais para a cor de fundo, roxo, verde, laranja, vermelho, azul, uma única função para a cor de fundo, manipulador de eventos para a cor de fundo, e usando jQuery. O que eu estou falando quando eu estou fazendo isso? Então, nós vimos os botões. Agora, vamos dar uma olhada parte do código fonte aqui. Vamos começar com test.html. Assim funções individuais para o fundo cor é o que eu digitei aqui. Deixe-me rolar um pouco. 

E você vai perceber que eu ter definido estes botões dizer quando este botão é clicado, chamar a função ficar roxo. Quando este botão é clique, ao invés, chamar a função ficar verde, virar laranja, fica vermelho, a cor azul. Você provavelmente pode adivinhar que este talvez não seja o melhor design sentido, certo? 

Seria bom se eu pudesse têm uma abordagem mais geral. Bem, primeiro vamos dar uma olhada o que esses cinco funções são document.getElementById colorDiv.style.background = roxo, verde, laranja, vermelho, e azul, respectivamente. Então, não particularmente o melhor design. 

O próximo conjunto de botões Eu tenho é que eu escrevi uma única função chamada mudança de cor que aparentemente aceita uma string como argumento. Portanto, este é um pouco melhor. Roxo, verde, laranja, vermelho, azul é agora um argumento. Então eu escrevi um mais geral função JavaScript caso, o que poderia ser algo como isto. Eu estou passando. Esta mudança de cor função é esperando um argumento chamado de cor. E eu estou dizendo definir o cor do fundo a cor. Então aqui representa o que eu tenho aqui. Então, isso é um pouco melhor. 

Mas eu poderia ser capaz de fazer melhor do que isso. Se nós vamos para baixo para dar uma olhada a situação manipulador de eventos, Agora, todas essas chamadas têm a mesma aparência. Se você lembrar para o nosso discussão sobre manipuladores de eventos, Posso obter informações sobre qual dos estes botões foi clicado e usar isso. 

E assim, em event.JavaScript, eu tenho escrita evento de alteração de cor, o que descobre qual botão foi clicado. Essa é a linha objeto gatilho. E, em seguida, aqui, ele fica muito prolixo. Mas o que eu estou fazendo é que eu sou definindo o fundo cor para triggerObject inner.HTML. Esse é o texto em entre as tags de botão. 

E então eu aparentemente têm configurá-lo para minúsculas. E é assim que eu posso converter um inteiro cadeia para minúsculas em JavaScript usando esse método para minúsculas. Porque quando eu definir uma cor, como eu estou tentando fazer aqui, a cor tem que ser todas as letras minúsculas. 

Mas o botão que eu tinha, se tomarmos um outro olhar, notará que o texto não existe escrito com um capital P para o roxo. E, em seguida, no próprio inferior aqui, eu, aparentemente, tentar fazer isso usando jQuery também. E, neste caso, eu não sou realmente chamar uma função em tudo. Eu apenas disse que a classe que eu sou utilizando para este botão é um botão jQ. É isso aí. 

Então como é que jQuery sei o que estou fazendo? Pois bem, esta é uma das vantagens reduzir as desvantagens de jQuery. Ele pode me permite fazer coisas muito concisa, mas talvez não como intuitivamente. Talvez os outros três fazem um pouco mais sentir o que estou fazendo. Aqui, porém, o que está acontecendo? 

Aparentemente, criando uma função anônima que carrega sempre que o meu documento está pronto, então document.ready, alguma função que vai acontecer. Basicamente, quando é um documento pronto? É quando a minha página foi carregada. 

Assim, logo que a minha página foi carregada, o seguinte função está sempre pronto. Ele diz que, se um objeto do tipo jQButton, ou se a classe jQButton foi clicado, executar esta função. Então aqui está duas funções anônimas, uma definida no interior da outra. 

Então, toda a minha contexto aqui até agora é a minha página quando ele carrega ele chama essa função. E esta função está esperando por um botão para ser clicado. E quando um botão é clicado, jQ botão é clicado especificamente, ele chama isso de outra função, o que está acontecendo a definir o fundo cor a ser de colorDiv qualquer texto que está entre as tags. 

Esta é a noção de qual botão foi clicado. Mas, caso contrário, este é o tipo de comportando semelhante a um evento. É apenas a mesma maneira que eu poderia expressar isso em jQuery. Mais uma vez, é provavelmente um muito mais intimidante. Não é tão claro como algo como event.js, que é talvez um pouco mais detalhado, mas um pouco menos intimidante. 

Mas se nós pop de volta para o meu navegador janela, se eu começar clicking-- bem, que mudou para roxo. Esta é verde utilizando o método string. Este é laranja usando o manipulador de eventos. 

Este é vermelho usando jQuery, certo? Todos eles se comportam exatamente o mesmo. Eles apenas fazem-lo usando diferentes abordagens para resolver o problema. Há muito mais para jQuery então estamos certamente vai falar sobre neste vídeo. Mas se você quiser saber mais, você pode ir para o tipo de documentação jQuery e aprender um pouco mais sobre esta biblioteca muito flexível, que é ótimo para fazer do lado do cliente script, como o que estávamos fazendo para manipular a aparência e sentir da nossa página web com o Document Object Model. Eu sou Doug Lloyd. Este é CS50.