DOUG LLOYD: En este video, queríamos de llamar a la atención separada
a una muy particular elemento de JavaScript
que le puede resultar útil cuando estás empezando
para trabajar en la manipulación de las páginas web y cambiar el contenido de su página web
sobre la marcha.
Y esa es la noción de el Document Object Model.
Así como vimos en nuestro video en JavaScript, objetos son muy flexibles.
>> Y pueden contener diversos campos.
Y aunque no fuimos a una gran cantidad de detalle, esos campos o propiedades,
que haría probablemente más apropiadamente llamarlos
en el contexto de un objeto, incluso esas propiedades pueden ser otros objetos.
Y dentro de esos objetos pueden ser otros objetos.
>> Usted tiene este gran objeto con una gran cantidad de otros objetos
dentro de ella, que tipo de crea esta idea de un gran árbol.
Ahora bien, el objeto de documento es un objeto muy especial en JavaScript
que organiza toda la web página bajo este tipo de paraguas
de un objeto.
Y así, en el interior del documento objetos son objetos que presentan
la cabeza y el cuerpo de su página web.
>> En el interior de esos son otra objetos, etcétera, etcétera,
hasta que su página web tiene toda ha organizado en esta gran objeto.
¿Cuál es el lado bueno, ¿verdad?
Bueno, sabemos cómo trabajar con objetos en JavaScript.
>> Así que si tenemos un objeto que se refiere a nuestra página Web completa, que
significa llamando a la correcta métodos para manipular dicho objeto
o modificar cierta de sus propiedades, se
puede cambiar los elementos de nuestra página de programación
utilizando JavaScript en lugar de tener para codificar las cosas con, por ejemplo, HTML.
Así que aquí está un ejemplo de un muy simple página web, ¿no?
Tiene etiquetas HTML, una cabeza.
>> Dentro de allí es un título, hola mundo.
Entonces tengo un cuerpo.
Dentro de eso, no tengo tres cosas diferentes.
Tengo una etiqueta de encabezado h2, un párrafo y un enlace.
Esta es una página web muy sencilla.
>> Bueno, ¿podría el documento objeto de este parece?
Bueno, es un poco miedo tal vez al principio.
Pero no deja de ser un gran árbol.
Y en la raíz misma de la misma es documento.
>> Dentro del documento es otra objeto en referencia al HTML de mi página.
Y el código HTML de mi página es todo esto.
Y luego dentro del HTML objeto, tengo un objeto de la cabeza,
que se refiere a todo lo que hay.
>> Y dentro de allí, Tengo un objeto de título.
Y dentro de ahí, tengo otra objetar que es justo hola mundo.
Yo podría tener mi cuerpo representado como este.
>> En el interior de mi cuerpo, tengo una h2 objeto y un objeto de p para el párrafo
y un objeto para un enlace.
Y por lo que este toda jerarquía se puede representar como un árbol grande
con un montón de pequeños poco cosas que salen de ella.
Ahora, por supuesto, cuando estamos programando, nos
no pensar en cosas como un gran árbol.
Queremos ver real código de cosas relacionadas.
>> Y, afortunadamente, podemos utilizar nuestras herramientas de desarrollo
realmente tomar un vistazo a objeto de documento de este sitio web.
Y vamos a hacer eso.
Así que he abierto una pestaña del navegador.
>> Y he abierto Herramientas de Desarrollo.
Y en mi video en JavaScript, que mencionó que la consola no es
Sólo en algún lugar donde imprimimos información,
es también un lugar donde podemos introducir información.
En este contexto, lo Voy a decir es
Me gustaría volver los objetos de documento,
para que pueda empezar a tener una mirada en ella.
Entonces, ¿cómo podría yo hacer esto?
Bueno, si quiero organizarla muy bien,
Voy a decir console.dir, D-I-R. Ahora, yo uso console.log para imprimir solo
algo muy simple.
Pero si quiero organizar este jerárquicamente como un objeto,
Quiero que tipo de estructura como una estructura de directorios.
>> Así que quiero console.dir documento.
Voy a pulsar Enter.
Y justo debajo de él ahora, y voy a zoom aquí,
Tengo este documento de respuesta con una pequeña flecha al lado.
Ahora, cuando abro esta flecha, que va a ser un montón de cosas.
>> Pero vamos a ignorar muchos de la misma y sólo tipo de enfoque
en la parte más importante, por lo que puede comenzar a navegar en este documento.
Hay mucho más a la DOM de solo padre nodos y nodos secundarios.
Hay un montón de cosas accesorias.
>> Así que voy a abrir esto.
Y hay mucho de cosas que aparece.
Pero todo lo que me importa es aquí, los nodos secundarios.
Vamos a abrir eso.
>> Dentro de allí veo algo familiar, HTML.
Así que dentro de nuestro documento un nivel más abajo, HTML.
Abro eso.
¿Qué estamos esperando?
>> Si usted recuerda de nuestro diagrama, ¿qué debemos encontrar en el interior de HTML?
¿Qué dos nodos están por debajo de él en el árbol?
Vamos a averiguar.
Abrimos HTML.
Bajamos a sus nodos secundarios.
>> Pop que se abren.
Hay cabeza y el cuerpo.
Y podemos abrir la cabeza.
Ir a los nodos secundarios.
Bueno, ahí está el título.
>> Y podríamos seguir y seguir así para siempre.
Podríamos hacer esto con el cuerpo también.
Pero hay una manera para que veamos el documento organizado como un gran objeto.
Y si nos fijamos en que es un gran objeto que se parece mucho
como el código, lo que significa que podemos empezar para manipular esta gran objeto utilizando
código para cambiar lo que nuestro sitio web se ve y se siente como.
>> Así que es una herramienta muy poderosa tenemos a nuestra disposición ahora.
Así como acabamos de ver, la documento mismo objeto
y todos los objetos dentro de ella tener propiedades y métodos, justo
como cualquier otro objeto que hemos estado trabajando con en JavaScript.
Pero podemos utilizar esas propiedades y utilizar esos métodos para perforar especie de abajo
de la gran documento y obtener más y más y más,
cada vez más finas granos de detalle, hasta que
llegar a una pieza muy específico de nuestro página web que queremos cambiar.
>> Y cuando actualicemos propiedades del Document Object o llame a los métodos,
las cosas podrían suceder en nuestra página web.
Y nosotros no tenemos que hacer ninguna refrescante tener esos cambios surtan efecto.
>> Y eso es una habilidad bastante frío para tener cuando estamos trabajando con el código.
¿Cuáles son algunas de estas propiedades que son parte de un objeto de documento?
Bueno, probablemente vio una par de ellos muy rápido
como estábamos pasar con velocidad a través del documento gigante
objeto que acabamos de ver en el navegador web.
>> Pero un par de estas propiedades podrían ser cosas como HTML interior.
Y hasta me puede recordar el uso de este en el vídeo JavaScript
al final cuando me estaba hablando de los acontecimientos.
¿Cuál fue este código HTML interno?
Bueno, es sólo lo que es entre las etiquetas.
>> Y por lo que el código HTML interno, por ejemplo, del título
etiqueta, si hubiéramos seguido adelante en que el ejemplo hace un momento,
habría sido hola mundo.
Ese fue el título de nuestra página.
Otras propiedades incluir el nombre de nodo, que
es el nombre de un archivo HTML elemento como título.
ID, que es el ID atributo de un elemento HTML.
>> Recordemos que podemos señalar especialmente elementos específicos de nuestro HTML
con un atributo ID, que por lo general es muy útil en el contexto de la CSS,
específicamente.
Nodo padre, que es una referencia a lo que es justo por encima de mí en el DOM.
Y nodos hijos, que es un referencia a lo que está por debajo de mí.
Y vimos mucho de eso sólo mirar a través.
Nodos secundarios, así es como llegamos más y más en el árbol.
>> Atributos, eso es sólo un arreglo de los atributos del elemento HTML.
Así que un ejemplo de atributos podría ser si usted tiene una etiqueta de imagen,
por lo general tiene un atributo de origen, quizá una altura y un atributo de ancho.
Y para que no sería más que una matriz de todos los atributos asociados
con ese elemento HTML.
>> El estilo es otro que Qué representa la CSS
estilo de un elemento particular.
Y más adelante en este video, vamos específicamente
estilo de palanca para hacer un par de los cambios en nuestro sitio web.
Así que esas son algunas de las propiedades.
>> Y también algo que hay métodos que podemos
también utilizar para aislar tal vez más rápidamente elementos del objeto de documento.
Tal vez, el más versátil de los cuales es getElementById.
Así que podría decir algo así, porque recuerde que es un método del Documento
Objeto, document.getElementById.
>> Y dentro de esos paréntesis, especifique un elemento HTML con una identificación especial
Atribuyo que tengo previamente establecer y voy de inmediato
ir directamente a ese elemento de la página web en general.
Así que no tengo que perforar quizá a través de todos los de una sola capa.
Yo sólo puedo utilizar este método para encontrarlo, como una especie de búsqueda de calor de misiles,
¿derecho?
Simplemente va y se encuentra exactamente lo que está buscando.
>> GetElementsByTagName es muy similar en espíritu.
Tal vez esto sería encontrar toda la etiquetas de negrita o todas las etiquetas p
y me da una gran variedad de todo que podría luego trabajar.
appendChild añade algo un nivel en el árbol.
>> Así que puedo añadir toda una nueva elemento de un nivel inferior.
O puedo eliminar un elemento que es un nivel inferior, así que si quiero
eliminar algo de mi página web.
Ahora, una nota de codificación rápido y una rápida ahorro de cefalea nota, es de esperar.
>> getElementById-- la d es minúscula.
No puedo decirle cuántas veces tengo usado getElementById y capitalizado
el d allí.
Debido a que es muy común.
Si escribimos la palabra Identificación, es por lo general el capital que el capital D.
Y mi código simplemente no funciona.
Y no puedo entender por qué.
Este es un muy, muy, muy error común que todo el mundo hace,
incluso los expertos que tienen estado haciendo esto para siempre.
Así que acaba de ser conscientes, getElementById, que d es minúscula.
Y es de esperar, que le ahorra varios minutos por lo menos dolores de cabeza.
>> Entonces, ¿qué significa todo esto nos dicen?
Tenemos estos métodos.
Tenemos estas propiedades.
Ahora bien, si partimos de documento, documento.
lo que sea, ahora podemos llegar a cualquier única pieza de nuestra página web
que queremos usar JavaScript con sólo llamar a estos métodos
y el aprovechamiento de las propiedades que encontramos en varios lugares.
>> Esto puede ser prolijo, esto document.getElementById,
tal vez tienen un nombre de etiqueta larga, tal vez lo hace más llamadas más adelante.
Las cosas pueden ser un poco prolijo.
Y a medida que los programadores, ya que tienes probablemente visto en muchos de estos videos,
no nos gustan las cosas prolijas.
>> Nos gusta ser capaz de hacer las cosas rápidamente.
Así que nos gustaría una más forma concisa para decir algo.
Así que este tipo de cables a la noción de algo llamado jQuery.
Ahora jQuery no es JavaScript.
No es parte de JavaScript.
>> Es una biblioteca que fue escrito por algunos programadores de JavaScript
Hace unos 10 años.
Y su objetivo es simplificar esto lo que es llamada scripting del lado del cliente, lo que
es básicamente lo que estábamos hablando con manipulaciones DOM.
Y así, si quería modificar la color de fondo de mi página web, tal vez
una Div específico.
>> Aquí, estoy parecer conseguir ElementById colorDiv.
Y quiero establecer su color de fondo.
Si estoy usando pura JavaScript usando el Document Object Model,
eso es un montón de cosas, ¿no? document.getElementById
colorDiv.style.backgroundColor = verde.
>> Uf.
Eso era mucho para decir.
Es mucho más que escribir, también.
Y así, en jQuery, que tal vez podemos decir esto un poco más concisa.
La compensación es que es tal vez un poco poco más críptica, de repente,
¿derecho?
>> Al menos, el tiempo es un poco más explicativo en cuanto a lo que estamos haciendo.
Esta muestra de dólar, paréntesis, comilla simple, hachís, colorDiv, ¿verdad?
¿Que significa eso?
Bueno, eso es básicamente sólo document.getElementById colorDiv.
>> Pero es esta especie de taquigrafía forma de hacerlo utilizando jQuery.
Vamos a echar un vistazo ahora en un par de maneras diferentes
que puede ser que en realidad utilizar este Document Object
Modelo para manipular piezas de mi sitio.
En particular, vamos que está trabajando en la manipulación
el color de un particular, Div, colorDiv, en una página web.
Así que vamos a echar un vistazo a eso.
Correcto.
Así que estoy en una página.
Se llama test.html al descargar esto si usted quiere jugar con esto.
Y tengo un montón de botones de esta página.
Y yo estoy diciendo funciones individuales para el color de fondo, púrpura, verde,
naranja, azul, una sola función roja, de color de fondo, controlador de eventos
de color de fondo, y el uso de jQuery.
Lo que estoy hablando cuando estoy haciendo esto?
Así que hemos visto en los botones.
Ahora, vamos a echar un vistazo a una parte del código fuente aquí.
Vamos a empezar con test.html.
Así funciones individuales para el fondo el color es lo que he escribí aquí.
Permítanme desplazo un poco.
>> Y te darás cuenta de que yo han definido estos botones
decir cuando se hace clic en este botón, llamar a la función cambia a lila.
Cuando este botón se haga clic, más bien, llamar a la función cambia a verde,
vuelta a la naranja, volverá de color rojo, volverá azul.
Usted probablemente puede adivinar que este tal vez no sea el mejor diseño
sentido, ¿verdad?
>> Sería bueno si pudiera tener un enfoque más general.
Bueno, primero vamos a echar un vistazo en lo que esas cinco funciones son
document.getElementById colorDiv.style.background = púrpura,
verde, naranja, rojo, y azul, respectivamente.
Por lo tanto, no es particularmente el mejor diseño.
>> El siguiente conjunto de botones He es que he escrito
una única función llamada cambiar de color que aparentemente
acepta una cadena como argumento.
Así que esto es un poco mejor.
Púrpura, verde, naranja, rojo, azul es ahora un argumento.
Así que me he escrito una más general caso función de JavaScript,
que podría ser algo como esto.
Estoy pasando.
Este cambio de color es la función esperando un argumento llamado color.
Y yo digo que establezca la color de fondo a color.
Así que aquí representa lo que tengo aquí.
Así que eso es un poco mejor.
>> Pero yo podría ser capaz de hacerlo mejor que eso.
Si vamos a echar un vistazo por la situación controlador de eventos,
Ahora todas estas llamadas tienen el mismo aspecto.
Si usted recuerda de nuestra discusión sobre los controladores de eventos,
Puedo conseguir información acerca de cuál de estos botones se hizo clic y usar eso.
>> Y así, en event.JavaScript, tengo escrita evento de cambio de color, que
se da cuenta de qué botón se hizo clic.
Esa es la línea objeto de activación.
Y entonces aquí, se pone muy prolijo.
Pero lo que estoy haciendo es que estoy ajustar el fondo
color a triggerObject inner.HTML.
Ese es el texto en entre las etiquetas de los botones.
>> Y luego, aparentemente, han para configurarlo a minúsculas.
Y así es como puedo convertir un entero cadena a minúsculas en JavaScript utilizando
ese método a minúsculas.
Porque cuando me puse un color, como que estoy tratando de hacer aquí,
el color tiene que estar en minúsculas.
>> Pero en el botón que tenía, si volvemos a analizar,
Observe que el texto existe escrito con una P de capital para la púrpura.
Y entonces por lo fondo aquí, que aparentemente
tratar de hacer esto utilizando jQuery también.
Y en este caso, no estoy realmente llamar a una función en absoluto.
Que acabo de decir a la clase que estoy utilizando para este botón es un botón jQ.
Eso es.
>> Entonces, ¿cómo saber jQuery lo que estoy haciendo?
Bueno, esta es una de las ventajas recortar desventajas de jQuery.
Puede permitir que haga cosas muy concisa, pero tal vez no
como intuitivamente.
Tal vez los otros tres hacen una poco más de sentido lo que estoy haciendo.
Aquí, sin embargo, ¿qué está pasando?
>> Al parecer, la creación de una función anónima
que se carga cada vez que mi documento está listo, por lo document.ready,
alguna función que va a suceder.
Básicamente, cuando es un documento preparado?
Es cuando mi página se ha cargado.
>> Así que tan pronto como mi página se ha cargado, el siguiente función está siempre listo.
Se dice, si un objeto de tipo jQButton, o si la clase jQButton ha hecho click,
ejecutar esta función.
Así que aquí está dos funciones anónimas, definido dentro de la otra.
>> Así que toda mi contexto aquí hasta ahora es mi página
cuando carga que llama a esta función.
Y esta función está esperando para un botón que se hace clic.
Y cuando se hace clic en un botón, jQ específicamente se hace clic en el botón,
llama a este otro función, que está pasando
para establecer el fondo color de la colorDiv para ser
cualquier texto que se encuentra en entre las etiquetas.
>> Esta es la noción de qué botón se hizo clic.
Pero por lo demás, se trata de una especie de comportarse similar a un evento.
Es sólo la misma manera que expresaría esto en jQuery.
Una vez más, es probable que sea un mucho más intimidante.
No es tan claro como algo así como event.js,
que es tal vez un poco más detallado, pero un poco menos
intimidante.
>> Pero si nos pop de nuevo hacia mi navegador ventana, si empiezo clicking-- así,
eso cambió a morado.
Esta es verde utilizando el método de cadena.
Esta es de color naranja con el controlador de eventos.
>> Esta es rojo usando jQuery, ¿verdad?
Todos ellos se comportan exactamente de la misma.
Ellos sólo hacen uso de diferentes enfoques para resolver el problema.
Hay mucho más para jQuery entonces estamos sin duda
vamos a hablar en este video.
Pero si usted quiere saber más, puede ir a la clase de documentación de jQuery
y aprender un poco más sobre esta biblioteca muy flexible, lo cual
es ideal para hacer del lado del cliente scripting como lo que estábamos haciendo
para manipular el aspecto y sentir de nuestra página Web
con el Document Object Model.
Soy Doug Lloyd.
Esto es CS50.