Doug LLOYD: Neste video, queriamos para chamar a atención separado a unha moi particular elemento de JavaScript que pode considerar útil cando está comezando para traballar na manipulación de páxinas web e cambiando o contido da súa páxina web en tempo real. E esa é a noción de Document Object Model. Así como vimos no noso vídeo sobre JavaScript, obxectos son moi flexibles. E poden conter varios campos. E aínda que non ir a unha morea de detalle, estes campos ou propiedades, que sería probablemente máis chamalos de forma adecuada no contexto dun obxecto, aínda esas propiedades pode haber outros obxectos. E dentro destes obxectos pode haber outros obxectos. 

Ten este obxecto moi grande con unha morea de outros obxectos dentro del, que tipo de crea esa idea dunha grande árbore. Agora, o obxecto documento é un moi especial obxecto en JavaScript que organiza toda a súa web artigo baixo este tipo de paraugas dun obxecto. E así, no interior do documento obxecto son obxectos que presentan a cabeza eo corpo da súa páxina web. 

Dentro deses son outra obxectos, etcétera, etcétera, ata que toda a súa páxina web ten organizouse neste gran obxecto. Cal é a cabeza aquí, non? Ben, sabemos como traballar con obxectos en JavaScript. 

Entón, se temos un obxecto que refírese a toda a páxina web, que significa chamando o correcto métodos para manipular este obxecto ou modificar certos das súas propiedades, pode cambiar os elementos de nosa páxina programaticamente usando JavaScript no canto de ter codificar as cousas con, digamos, HTML. Entón aquí está un exemplo dunha moi sinxelo páxina web, non? Ten etiquetas HTML, unha cabeza. 

Dentro hai un título, Ola mundo. Entón eu teño un corpo. Dentro diso, eu teño tres cousas distintas. Eu teño unha etiqueta de cabeceira h2, un parágrafo, e un enlace. Esta é unha páxina web moi sinxelo. 

Ben, o que pode o documento obxecto para este ollar como? Ben, é un pouco asustado quizais en primeiro lugar. Pero é realmente só unha gran árbore. E na propia raíz do que é documento. 

Dentro do documento é outra obxecto referíndose ao HTML da miña páxina. E o HTML da miña páxina é todo isto. E, a continuación, dentro do HTML obxecto, eu teño un obxecto cabeza, que se refire a todo o que hai. 

E alí dentro, Eu teño un obxecto título. E alí dentro, teño outra objetar que é só Ola mundo. Eu podería ter o meu corpo representado como este. 

Dentro do meu corpo, eu teño unha h2 obxecto e un obxecto para p parágrafo e un obxecto para unha ligazón. E así este toda xerarquía pode ser representada como unha gran árbore con lotes de pouco menor cousas que vén de fóra. Agora, por suposto, cando estamos programando, nós non pensar en cousas como unha gran árbore. Queremos ver real cousas relacionadas con código. 

E, por sorte, podemos usar as nosas ferramentas de desenvolvemento para realmente un ollo obxecto de documento desta web. E imos facelo. Entón, eu abrín un separador do navegador. 

E abrín Developer Tools. E no meu vídeo en JavaScript, I mencionou que a consola non é única nalgún lugar onde nós imprimir a información, é tamén un lugar onde nós pode introducir información. Neste contexto, o Eu vou dicir é Gustaríame volver os obxectos de documento, para que eu poida comezar a ter un ollar para el. Entón, como eu podería facelo? Ben, se eu queira organiza-lo realmente ben, Eu vou dicir console.dir, D-I-R. Agora, eu uso só console.log para imprimir algo moi sinxelo. Pero se eu queira organizar este xerarquicamente como un obxecto, Quero que tipo de estrutura como unha estrutura de directorio. 

Entón, quero console.dir documento. Vou bater Intro. E debaixo dela agora, e eu vou facer zoom aquí, Eu teño ese documento de resposta cunha pequena frecha ao lado del. Agora, cando eu abrir esta frecha, alí vai ser unha morea de cousas. 

Pero imos ignorar unha morea do mesmo e só unha especie de foco sobre a parte máis importante, por iso, Pode comezar a navegar neste documento. Hai moito máis para o DON que só pai nós e nós fillo. Hai unha morea de cousas acessórias. 

Entón, eu vou abrir iso. E hai un lote enteiro de cousas que aparece. Pero todo o que me interesa é aquí, nós fillo. Imos abrir iso. 

Dentro alí eu ver algo familiar, HTML. Entón, dentro do noso documento Un nivel baixo, HTML. Abro iso. O que estamos esperando? 

Se se lembrar do noso diagrama, o que temos que atopar no interior de HTML? Que dous nós son debaixo del na árbore? Imos descubrir. Nós abrimos HTML. Descendemos para os seus nós fillo. 

Pop que se abren. Hai cabeza e do corpo. E podemos abrir a cabeza. Ir seus nós fillo. Así, hai o título. 

E poderiamos seguir e así para sempre. Poderíamos facelo co corpo tamén. Pero hai unha forma de ollar para o documento organizada como unha gran obxecto. E se miramos para un gran obxecto que se parece moi como código, o que significa que podemos comezar para manipular este gran obxecto usando código para cambiar o que o noso web mira e sente como. 

Entón esta é unha ferramenta moi poderosa temos á nosa disposición agora. Entón, como acabamos de ver, o documento propio obxecto e todos os obxectos no interior do mesmo teñen propiedades e métodos, só como calquera outro obxecto que temos está a traballar con en JavaScript. Pero podemos utilizar esas propiedades e utilizar os mesmos métodos de tipo de Drill down desde o documento grande e obter menor e máis e máis, máis fina grans de detalle, ata que chegar a unha parte moi específica do noso A páxina web que queremos cambiar. 

E cando nós actualizamos propiedades do Obxecto de documento ou chamar estes métodos, as cousas poden ocorrer na nosa páxina web. E non precisa facer calquera refrescante para que estas modificacións teñan efecto. 

E iso é unha habilidade moi legal temos cando estamos a traballar co código. Entón, cales son algunhas destas propiedades que forman parte dun obxecto de documento? Ben, probablemente viu un algúns deles moi rapidamente como estabamos pechando a través do documento xigante obxecto que acabamos de ver no navegador web. 

Pero un par desas propiedades pode ser cousas como HTML interior. E pode ata lémbreme usando este vídeo no JavaScript ao final, cando estaba falando sobre os eventos. O que era ese HTML interior? Ben, é só o que é entre as etiquetas. 

E así o HTML interno, por exemplo, do título tag, se tivésemos continuou indo que exemplo dun momento atrás, sería Ola mundo. Ese foi o título da nosa páxina. Outras propiedades incluír o nome do nodo, o que é o nome dun HTML elemento, como título. ID, que é o ID atributo dun elemento HTML. 

Lembre que podemos indicar especialmente elementos específicos do noso HTML cun atributo ID, que xeralmente vén a cadra no contexto da CSS, especificamente. Nó pai, que é unha referencia ao o que non é máis que sobre min no DOM. E nós fillo, que é un referencia ao que está por baixo de min. E vimos unha chea de que só de ollar a través. Nós fillo, que é como chegamos máis e máis na árbore. 

Atributos, iso é só unha matriz de atributos do elemento HTML. Así, un exemplo de atributos pode se ten unha etiqueta de imaxe, xeralmente ten un atributo de orixe, quizais unha altura e un atributo de ancho. E para que sería só un array de todos os atributos asociados con ese elemento HTML. 

Estilo é outro que non representa o CSS estilo dun elemento en particular. E máis adiante neste vídeo, imos especificamente estilo de panca para facer unha parella do cambio a nosa web. Polo tanto, estas son algunhas propiedades. 

E hai tamén algúns son métodos que podemos para usar tamén canto quizais illar elementos do obxecto de documento. Quizais, o máis versátil destes que son getElementById. Entón, eu podería dicir algo así como, porque lembre que é un método do documento Obxecto, document.getElementById. 

E dentro destes parénteses, desprácese un elemento HTML cun determinado ID atributo que teño previamente definido, e eu vou inmediatamente desprácese á dereita a ese elemento do sitio web global. Entón eu non teño para perforar quizais abaixo a través de cada capa única. Só podo usar este método para atopalo, como unha especie de misil busca de calor, non? El só vai e encontra exactamente o que está a procurar. 

GetElementsByTagName é moi semellante en espírito. Quizais iso vai atopar todas as tags en negra ou todos os tags p e me dar unha matriz de todo que eu podería, entón, traballar con el. appendChild engade algo debaixo da árbore. 

Entón, eu creo un novo enteiro un elemento de nivel inferior. Ou podo eliminar un elemento que é Un nivel máis baixo tamén se quero para borrar algo da miña páxina web. Agora, unha nota de codificación rápida e un rápido dor de cabeza aforro nota, eu espero. 

getElementById-- o d é minúscula. Eu non te podo dicir cantas veces eu teño usado getElementById e capitalizado a d alí. Porque é moi común. Se escribir a palabra ID, é Eu xeralmente de capital de capital D. E meu código simplemente non funciona. E eu non podo descubrir o por que. Este é realmente, realmente, realmente erro común que todo o mundo fai, mesmo os expertos que teñen vén facendo isto para sempre. Entón, só tes que ser consciente, getElementById, que d é minúscula. E esperamos que aforra-lle varios minutos a menos de dor de cabeza. 

Entón, o que todo isto nos di? Temos estes métodos. Temos esas propiedades. Agora, se partimos documento, documento. o que quere, agora podemos chegar a calquera pezas da nosa páxina web que queremos usar JavaScript só chamando estes métodos e alavancar as propiedades que atopamos en varios lugares. 

Isto pode estar prolixo, este document.getElementById, quizais ter un nome de marca por moito tempo, quizais facer máis chamadas despois. As cousas poden estar un pouco prolixo. E, como programadores, como Probablemente xa viu en moitos destes vídeos, nós non nos gusta de cousas prolixo. 

Nós gústanos de ser capaz de facer as cousas rapidamente. Entón, nós queremos unha máis forma concisa para dicir algo. Polo tanto, este tipo de leads para o noción de algo chamado jQuery. Agora jQuery non é JavaScript. Non é parte do JavaScript. 

É unha biblioteca que foi escrita por algúns programadores de JavaScript preto de 10 anos. E o seu obxectivo é simplificar o que é iso chamados scripts do lado do cliente, o que é basicamente o que estabamos só falando con manipulacións DOM. E así se eu quixese modificar o cor da miña páxina web fondo, quizais unha Div específico. 

Aquí, eu estou quedando aparentemente ElementById colorDiv. E quero definir a cor de fondo. Se está a usar só puro JavaScript usando o Document Object Model, iso é unha chea de cousas, non? document.getElementById colorDiv.style.backgroundColor = verde. 

Ufa. Isto foi moito que dicir. É moito escribir, tamén. E así, en jQuery, podemos talvez dicir este un pouco máis concisa. O trade off sendo que é quizais un pouco pouco máis enigmática, de súpeto, non? 

Polo menos, o tempo é un pouco máis explicativo sobre o que estamos facendo. Este sinal de dólar, parénteses, Cita único, mestura, colorDiv, non? Que significa iso? Ben, iso é basicamente só document.getElementById colorDiv. 

Pero é que este tipo de taquigrafia xeito de facelo empregando jQuery. Nós só dar un ollo agora nun par de formas diferentes que eu podería realmente usar este Document Object Modelo para manipular anacos do meu sitio. En particular, nós imos estar traballando manipulación a cor dun determinado Div, colorDiv, nunha páxina web. Entón imos dar un ollo niso. Todo ben. Entón, eu estou nunha páxina. Chámase test.html cando baixar iso se quere xogar con iso. E eu teño unha morea de botóns nesta páxina. E eu digo funcións individuais para a cor de fondo, vermello, verde, laranxa, vermello, azul, unha única función para a cor de fondo, manipulador de eventos para a cor de fondo, e usando jQuery. O que eu estou falando cando estou a facer iso? Entón, nós vimos os botóns. Agora, imos dar un ollo parte do código fonte aquí. Imos comezar con test.html. Así funcións individuais para o fondo cor é o que eu escriba aquí. Déixeme rolar un pouco. 

E vai entender que eu definir estes botóns dicir cando este botón é premendo, chamar a función estar vermello. Cando este botón é prema, en vez, chamar a función estar verde, virar laranxa, queda vermello, a cor azul. Probablemente pode adiviñar que este quizais non sexa o mellor deseño sentido, non? 

Sería bo se eu puidese teñen unha visión máis xeral. Ben, primeiro imos dar un ollo o que eses cinco funcións son document.getElementById colorDiv.style.background = vermello, verde, laranxa, vermello, e azul respectivamente. Entón, non particularmente o mellor deseño. 

O seguinte conxunto de botóns Eu teño é que escribín unha única función chamada cambio de cor que aparentemente acepta unha cadea como argumento. Polo tanto, este é un pouco mellor. Vermello, verde, laranxa, vermello, azul é agora un argumento. Entón eu escribín un máis xeral función JavaScript caso o que podería ser algo así. Estou pasando. Este cambio de cor función é esperando un argumento chamado de cor. E eu digo que o cor do fondo a cor. Entón aquí representa o que eu teño aquí. Entón, iso é un pouco mellor. 

Pero eu podería ser capaz de facer mellor que iso. Se nós imos para abaixo para un ollo a situación manipulador de eventos, Agora, todas esas chamadas teñen o mesmo aspecto. Se lembrar ao noso discusión sobre manipuladores de eventos, Podo obter información sobre cal dos estes botóns foi premendo e usar isto. 

E así, en event.JavaScript, eu teño escrita evento de cambio de cor, o que descobre que botón foi premendo. Esa é a liña obxecto gatillo. E, a continuación, aquí, el está moi prolixo. Pero o que eu estou facendo é que eu son definindo o fondo cor para triggerObject inner.HTML. Ese é o texto en entre as etiquetas de botón. 

E entón eu parecer teñen configuralo para minúsculas. E é así que podo converter un enteiro cadea en minúsculas en JavaScript usando este método para minúsculas. Porque cando definir unha cor, como eu estou tentando facer aquí, a cor ten que ser todas as letras minúsculas. 

Pero o botón que eu tiña, se tomamos outro ollar, notará que o texto non existe escrito cun capital P ao roxo. E, a continuación, no propio inferior aquí, eu, ao parecer, tentar facelo empregando jQuery tamén. E neste caso, eu non son realmente chamar unha función en todo. Eu só dixen que a clase que eu son utilizando para este botón é un botón JQ. Iso é. 

Entón como é que jQuery sei o que estou facendo? Pois ben, esta é unha das vantaxes reducir as desvantaxes de jQuery. Pode me permite facer cousas moi concisa, pero quizais non como intuitivamente. Quizais os outros tres fan un pouco máis sentir o que estou facendo. Aquí, con todo, o que está pasando? 

Ao parecer, creando unha función anónima que leva sempre que o meu documento Está preparado, entón document.ready, algunha función que vai ocorrer. Basicamente, cando é un documento preparado? É cando a miña páxina cargada. 

Así, logo que a miña páxina cargada, o seguinte función está sempre preparado. El di que, se un obxecto do tipo jQButton, ou se a clase jQButton foi premendo, cabo esta función. Entón aquí está dúas funcións anónimas, unha definida dentro da outra. 

Entón, toda a miña contexto aquí ata agora é a miña páxina cando leva el chama esa función. E esta función está esperando por un botón para ser premendo. E cando un botón é premendo, JQ botón é premendo en concreto, el chama iso de outra función, o que está pasando a definir o fondo cor a ser de colorDiv calquera texto que está entre as etiquetas. 

Esta é a noción de cal botón foi premendo. Pero, se non, este é o tipo de comportándose semellante a un evento. É só a mesma forma que eu podería expresar isto jQuery. Unha vez máis, pode ser un moito máis intimidante. Non é tan claro como algo así como event.js, que é quizais un pouco máis detallado, pero un pouco menos intimidante. 

Pero se nós pop ao seu navegador ventá, se eu comezar clicking-- ben, que cambiou a vermello. Esta é verde mediante a entrada cadea. Este é laranxa usando o manipulador de eventos. 

Este é vermello usando jQuery, non? Todos eles se comportan exactamente o mesmo. Eles só fan-lo usando diferentes propostas para resolver o problema. Hai moito máis para jQuery entón estamos certamente vai falar neste vídeo. Pero se queres saber máis, podes ir ao tipo de documentación jQuery e aprender un pouco máis sobre esta biblioteca moi flexible, que é óptimo para facer do lado do cliente script, como o que estabamos facendo para manipular o aspecto e sentir da nosa páxina web co Document Object Model. Eu son Doug Lloyd. Este é CS50.