DOUG LLOYD: En aquest vídeo, volíem de cridar a l'atenció separada a una molt particular element de JavaScript que li pot ser útil quan estàs començant per treballar en la manipulació de les pàgines web i canviar el contingut de la seva pàgina web sobre la marxa. I aquesta és la noció de el Document Object Model. Així com vam veure en el nostre vídeo en JavaScript, objectes són molt flexibles. I poden contenir diversos camps. I encara que no vam anar a una gran quantitat de detall, aquests camps o propietats, que faria probablement més apropiadament cridar-los en el context d'un objecte, fins i tot aquestes propietats poden ser altres objectes. I dins d'aquests objectes poden ser altres objectes. 

Vostè té aquest gran objecte amb una gran quantitat d'altres objectes dins d'ella, que tipus de crea aquesta idea d'un gran arbre. Ara bé, l'objecte de document és un objecte molt especial en JavaScript que organitza tota la web pàgina sota aquest tipus de paraigües d'un objecte. I així, a l'interior del document objectes són objectes que presenten el cap i el cos de la seva pàgina web. 

A l'interior d'aquests són una altra objectes, etcètera, etcètera, fins que la seva pàgina web té tota ha organitzat en aquesta gran objecte. Quin és el costat bo, oi? Bé, sabem com treballar amb objectes en JavaScript. 

Així que si tenim un objecte que es refereix a la nostra pàgina web completa, que significa trucant a la correcta mètodes per manipular aquest objecte o modificar certa de les seves propietats, es pot canviar els elements de la nostra pàgina de programació utilitzant JavaScript en lloc de tenir per codificar les coses amb, per exemple, HTML. Així que aquí està un exemple d'un molt simple pàgina web, no? Té etiquetes HTML, un cap. 

Dins d'allà és un títol, hola món. Llavors tinc un cos. Dins d'això, no tinc tres coses diferents. Tinc una etiqueta de capçalera h2, un paràgraf i un enllaç. Aquesta és una pàgina web molt senzilla. 

Bé, podria el document objecte d'aquest sembla? Bé, és una mica por potser al principi. Però no deixa de ser un gran arbre. I en l'arrel mateixa de la mateixa és document. 

Dins el document és una altra objecte en referència a l'HTML de la meva pàgina. I el codi HTML de la meva pàgina és tot això. I després dins de l'HTML objecte, tinc un objecte del cap, que es refereix a tot el que hi ha. 

I dins d'allà, Tinc un objecte de títol. I dins d'aquí, tinc una altra objectar que és just hola món. Jo podria tenir el meu cos representat com aquest. 

A l'interior del meu cos, tinc una h2 objecte i un objecte de p per al paràgraf i un objecte per a un enllaç. I pel que aquest tota jerarquia es pot representar com un arbre gran amb un munt de petits poc coses que surten. Bé, és clar, quan estem programant, ens no pensar en coses com un gran arbre. Volem veure real codi de coses relacionades. 

I, afortunadament, podem utilitzar les nostres eines de desenvolupament realment prendre un cop d'ull a objecte de document d'aquest lloc web. I farem això. Així que he obert una pestanya del navegador. 

I he obert Eines de Desenvolupament. I en el meu vídeo en JavaScript, que esmentar que la consola no és Només en algun lloc on imprimim informació, és també un lloc on podem introduir informació. En aquest context, el Vaig a dir és M'agradaria tornar els objectes de document, perquè pugui començar a tenir una mirada en ella. Llavors, com podria jo fer això? Bé, si vull organitzar-la molt bé, Vaig a dir console.dir, D-I-R. Ara, jo faig servir console.log per imprimir només una cosa molt simple. Però si vull organitzar aquest jeràrquicament com un objecte, Vull que tipus d'estructura com una estructura de directoris. 

Així que vull console.dir document. Vaig a prémer Enter. I just a sota d'ell ara, i vaig a zoom aquí, Tinc aquest document de resposta amb una petita fletxa al costat. Ara, quan obro aquesta fletxa, que serà un munt de coses. 

Però anem a ignorar molts de la mateixa i només tipus d'enfocament en la part més important, de manera que pot començar a navegar en aquest document. Hi ha molt més a la DOM de sol pare nodes i nodes secundaris. Hi ha un munt de coses accessòries. 

Així que vaig a obrir això. I hi ha molt de coses que apareix. Però tot el que m'importa és aquí, els nodes secundaris. Obrirem això. 

Dins d'allí veig alguna cosa familiar, HTML. Així que dins del nostre document un nivell més baix, HTML. Obro això. Què estem esperant? 

Si vostè recorda del nostre diagrama, ¿Què hem de trobar a l'interior d'HTML? Quins dos nodes estan per sota d'ell a l'arbre? Anem a veure. Obrim HTML. Vam baixar als seus nodes secundaris. 

Pop que s'obren. Hi ha cap i el cos. I podem obrir el cap. Anar als nodes secundaris. Bé, aquí està el títol. 

I podríem seguir i seguir així per sempre. Podríem fer a través del cos també. Però hi ha una manera perquè vegem el document organitzat com un gran objecte. I si ens fixem en que és un gran objecte que s'assembla molt com el codi, el que significa que podem començar per manipular aquesta gran objecte utilitzant codi per canviar el que el nostre lloc web es veu i se sent com. 

Així que és una eina molt poderosa tenim a la nostra disposició ara. Així com acabem de veure, la document mateix objecte i tots els objectes dins d'ella tenir propietats i mètodes, just com qualsevol altre objecte que hem estat treballant amb en JavaScript. Però podem utilitzar aquestes propietats i utilitzar aquests mètodes per perforar espècie de sota de la gran document i obtenir més i més i més, cada vegada més fines grans de detall, fins que arribar a una peça molt específic del nostre pàgina web que volem canviar. 

I quan actualitzem propietats del Document Object o truqui als mètodes, les coses podrien succeir en la nostra pàgina web. I nosaltres no hem de fer cap refrescant tenir aquests canvis tinguin efecte. 

I això és una habilitat bastant fred per tenir quan estem treballant amb el codi. Quines són algunes d'aquestes propietats que són part d'un objecte de document? Bé, probablement va veure una parell molt ràpid com estàvem passar amb velocitat a través del document gegant objecte que acabem de veure en el navegador web. 

Però un parell d'aquestes propietats podrien ser coses com HTML interior. I fins i tot em pot recordar l'ús d'aquest al vídeo JavaScript al final quan em estava parlant dels esdeveniments. Quin va ser aquest codi HTML intern? Bé, és només el que és entre les etiquetes. 

I pel que el codi HTML intern, per exemple, del títol etiqueta, si haguéssim seguit endavant en que l'exemple fa un moment, hauria estat hola món. Aquest va ser el títol de la pàgina. Altres propietats incloure el nom de node, que és el nom d'un arxiu HTML element com a títol. ID, que és l'ID atribut d'un element HTML. 

Recordem que podem assenyalar especialment elements específics del nostre HTML amb un atribut ID, que en general és molt útil en el context de la CSS, específicament. Node pare, que és una referència a el que és just per sobre de mi en el DOM. I nodes fills, que és un referència al que està per sota de mi. I vam veure molt d'això només mirar a través. Nodes secundaris, així és com arribem més i més en l'arbre. 

Atributs, això és només un arranjament dels atributs de l'element HTML. Així que un exemple d'atributs podria ser si vostè té una etiqueta d'imatge, en general té un atribut d'origen, potser una altura i un atribut d'ample. I perquè no seria més que una matriu de tots els atributs associats amb aquest element HTML. 

L'estil és altre que Què representa la CSS estil d'un element particular. I més endavant en aquest vídeo, anem específicament estil de palanca per fer un parell dels canvis en el nostre lloc web. Així que aquestes són algunes de les propietats. 

I també alguna cosa que hi ha mètodes que podem també utilitzar per aïllar potser més ràpidament elements de l'objecte de document. Potser, el més versàtil dels quals és getElementById. Així que podria dir alguna cosa així, perquè recordeu que és un mètode del Document Objecte, document.getElementById. 

I dins d'aquests parèntesis, especifiqui un element HTML amb una identificació especial Atribueixo que tinc prèviament establir i vaig immediatament anar directament a aquest element de la pàgina web en general. Així que no he de perforar potser a través de tots els d'una sola capa. Jo només puc utilitzar aquest mètode per trobar-lo, com una mena de recerca de calor de míssils, Oi? Simplement va i es troba exactament el que està buscant. 

GetElementsByTagName és molt similar en esperit. Potser això seria trobar tota la etiquetes de negreta o totes les etiquetes p i em dóna una gran varietat de tot que podria després treballar. appendChild afegeix alguna cosa un nivell en l'arbre. 

Així que puc afegir tota una nova element d'un nivell inferior. O puc eliminar un element que és un nivell inferior, així que si vull eliminar alguna cosa de la meva pàgina web. Ara, una nota de codificació ràpid i una ràpida estalvi de cefalea nota, és d'esperar. 

getElementById-- la d és minúscula. No puc dir-li quantes vegades tinc usat getElementById i capitalitzat el d allà. Com que és molt comú. Si escrivim la paraula Identificació, és en general el capital que el capital D. I el meu codi simplement no funciona. I no puc entendre per què. Aquest és un molt, molt, molt error comú que tothom fa, fins i tot els experts que tenen estat fent això per sempre. Així que acaba de ser conscients, getElementById, que d és minúscula. I és d'esperar, que li estalvia diversos minuts almenys mals de cap. 

Llavors, què significa tot això ens diuen? Tenim aquests mètodes. Tenim aquestes propietats. Ara bé, si partim de document, document. el que sigui, ara podem arribar a qualsevol única peça de la nostra pàgina web que volem fer servir JavaScript amb només trucar a aquests mètodes i l'aprofitament de les propietats que trobem en diversos llocs. 

Això pot ser prolix, això document.getElementById, potser tenen un nom d'etiqueta llarga, potser ho fa més trucades més endavant. Les coses poden ser una mica prolix. I a mesura que els programadors, ja que tens probablement vist en molts d'aquests vídeos, no ens agraden les coses prolixes. 

Ens agrada ser capaç de fer les coses ràpidament. Així que ens agradaria una més forma concisa per dir alguna cosa. Així que aquest tipus de cables a la noció d'una cosa anomenada jQuery. Ara jQuery no és JavaScript. No és part de JavaScript. 

És una biblioteca que va ser escrit per alguns programadors de JavaScript Fa uns 10 anys. I el seu objectiu és simplificar això el que és anomenada scripting del costat del client, el que és bàsicament el que estàvem parlant amb manipulacions DOM. I així, si volia modificar la color de fons de la meva pàgina web, potser 1 Div específic. 

Aquí, estic semblar aconseguir ElementById colorDiv. I vull establir el seu color de fons. Si estic fent servir pura JavaScript usant el Document Object Model, això és un munt de coses, no? document.getElementById colorDiv.style.backgroundColor = verd. 

Sort. Això era molt per dir. És molt més que escriure, també. I així, en jQuery, que potser podem dir això una mica més concisa. La compensació és que és potser una mica poc més críptica, de sobte, Oi? 

Almenys, el temps és una mica més explicatiu en quant al que estem fent. Aquesta mostra de dòlar, parèntesis, cometa simple, haixix, colorDiv, oi? Què vol dir això? Bé, això és bàsicament només document.getElementById colorDiv. 

Però és aquesta espècie de taquigrafia forma de fer-ho utilitzant jQuery. Anem a fer una ullada ara en un parell de maneres diferents que pot ser que en realitat utilitzar aquest Document Object Model per manipular peces del meu lloc. En particular, anem que està treballant en la manipulació el color d'un particular, Div, colorDiv, en una pàgina web. Així que anem a fer una ullada a això. Tot bé. Així que estic en una pàgina. Es diu prova.html en descarregar això si vostè vol jugar amb això. I tinc un munt de botons d'aquesta pàgina. I jo estic dient funcions individuals per al color de fons, porpra, verd, taronja, blau, una sola funció vermella, de color de fons, controlador d'esdeveniments de color de fons, i l'ús de jQuery. El que estic parlant quan estic fent això? Així que hem vist en els botons. Ara, anem a fer una ullada a una part del codi font aquí. Anem a començar amb prova.html. Així funcions individuals per al fons el color és el que he vaig escriure aquí. Permetin-me desplaço una mica. 

I t'adonaràs que jo han definit aquests botons dir quan es fa clic en aquest botó, cridar a la funció canvia a lila. Quan aquest botó es faci clic, més aviat, cridar a la funció canvia a verd, volta a la taronja, tornarà de color vermell, tornarà blau. Vostè probablement pot endevinar que aquest potser no és el millor disseny sentit, oi? 

Seria bo si pogués tenir un enfocament més general. Bé, primer anem a fer una ullada en el que aquestes cinc funcions són document.getElementById colorDiv.style.background = porpra, verd, taronja, vermell, i blau, respectivament. Per tant, no és particularment el millor disseny. 

El següent conjunt de botons He és que he escrit una única funció anomenada canviar de color que aparentment accepta una cadena com a argument. Així que això és una mica millor. Porpra, verd, taronja, vermell, blau és ara un argument. Així que m'he escrit una més general cas funció de JavaScript, que podria ser alguna cosa com això. Estic passant. Aquest canvi de color és la funció esperant un argument anomenat color. I jo dic que estableixi la color de fons a color. Així que aquí representa el que tinc aquí. Així que això és una mica millor. 

Però jo podria ser capaç de fer-ho millor que això. Si anem a fer una ullada per la situació controlador d'esdeveniments, Ara totes aquestes trucades tenen el mateix aspecte. Si vostè recorda de la nostra discussió sobre els controladors d'esdeveniments, Puc aconseguir informació sobre quin aquests botons es va fer clic i utilitzar això. 

I així, en event.JavaScript, tinc escrita esdeveniment de canvi de color, que s'adona de quin botó es va fer clic. Aquesta és la línia objecte d'activació. I llavors aquí, es posa molt prolix. Però el que estic fent és que estic ajustar el fons color a triggerObject inner.HTML. Aquest és el text en entre les etiquetes dels botons. 

I després, aparentment, han per configurar a minúscules. I així és com puc convertir un sencer cadena a minúscules en JavaScript utilitzant aquest mètode a minúscules. Perquè quan em vaig posar un color, com que estic tractant de fer aquí, el color ha d'estar en minúscules. 

Però en el botó que tenia, si tornem a analitzar, Tingueu present que el text hi escrit amb una P de capital per a la porpra. I llavors per la fons aquí, que aparentment tractar de fer això utilitzant jQuery també. I en aquest cas, no estic realment cridar a una funció en absolut. Que acabo de dir a la classe que estic utilitzant per a aquest botó és un botó JQ. Això és. 

Llavors, com saber jQuery el que estic fent? Bé, aquesta és una de les avantatges retallar desavantatges de jQuery. Pot permetre que faci coses molt concisa, però potser no com intuïtivament. Potser els altres tres fan una poc més de sentit el que estic fent. Aquí, però, ¿què està passant? 

Pel que sembla, la creació de una funció anònima que es carrega cada vegada que el meu document està a punt, per la qual document.ready, alguna funció que ha de passar. Bàsicament, quan és un document preparat? És quan la meva pàgina s'ha carregat. 

Així que tan aviat com la meva pàgina s'ha carregat, el següent funció està sempre a punt. Es diu, si un objecte de tipus jQButton, o si la classe jQButton ha fet clic, executar aquesta funció. Així que aquí està dues funcions anònimes, definit dins de l'altra. 

Així que tota la meva context aquí fins ara és la meva pàgina quan càrrega que crida a aquesta funció. I aquesta funció està esperant per a un botó que es fa clic. I quan es fa clic en un botó, JQ específicament es fa clic al botó, crida a aquest altre funció, que està passant per establir el fons color de la colorDiv per ser qualsevol text que es troba en entre les etiquetes. 

Aquesta és la noció de quin botó es va fer clic. Però d'altra banda, es tracta d'una espècie de comportar-se similar a un esdeveniment. És només la mateixa manera que expressaria això en jQuery. Un cop més, és probable que sigui un molt més intimidatori. No és tan clar com alguna cosa així com event.js, que és potser una mica més detallat, però una mica menys intimidatori. 

Però si ens pop de nou cap a la meva navegador finestra, si començo clicking-- així, això va canviar a morat. Aquesta és verd utilitzant el mètode de cadena. Aquesta és de color taronja amb el controlador d'esdeveniments. 

Aquesta és vermell usant jQuery, oi? Tots ells es comporten exactament de la mateixa. Ells només fan ús de diferents enfocaments per resoldre el problema. Hi ha molt més per jQuery llavors estem sens dubte parlarem en aquest vídeo. Però si vostè vol saber més, pot anar a la classe de documentació de jQuery i aprendre una mica més sobre aquesta biblioteca molt flexible, la qual cosa és ideal per fer del costat del client scripting com el que estàvem fent per manipular l'aspecte i sentir de la nostra pàgina web amb el Document Object Model. Sóc Doug Lloyd. Això és CS50.