1 00:00:01,287 --> 00:00:07,387 Tengo esta página web: "All about dogs" ("Todo sobre perros"), que es genial, pero en realidad, 2 00:00:07,387 --> 00:00:12,583 y sé que no todos estarán de acuerdo conmigo, soy una persona más afín a los gatos, 3 00:00:12,583 --> 00:00:17,178 y quisiera cambiar esta página web a una página "All about cats" ("Todo sobre gatos"). 4 00:00:17,178 --> 00:00:23,267 Voy a usar JavaScript para hacer eso, en lugar de simplemente modificar el HTML, 5 00:00:23,267 --> 00:00:26,431 para que eventualmente, pueda cambiar esto 6 00:00:26,431 --> 00:00:32,096 en una extensión del navegador para cambiar cualquier página web a una sobre gatos. 7 00:00:32,096 --> 00:00:37,450 ¿No sería emocionante que toda la Internet fuera sobre gatos? 8 00:00:37,450 --> 00:00:44,761 Ahora, esta página web tiene un encabezado, un párrafo y un par de imágenes. 9 00:00:44,761 --> 00:00:50,340 Vamos a cambiar cada parte a la vez, empezando con el encabezado, 10 00:00:50,340 --> 00:00:53,909 usando los dos pasos que recién aprendimos. 11 00:00:53,909 --> 00:00:59,268 El primer paso es encontrar el nodo del DOM que contiene el encabezado. 12 00:00:59,268 --> 00:01:06,895 La manera en que encontramos el nodo anteriormente fue escribiendo "document.body", 13 00:01:06,895 --> 00:01:12,492 pero ahora quiero ser más específica, quiero solamente este "". 14 00:01:12,492 --> 00:01:14,700 Bueno, este "" tiene un "Id", 15 00:01:14,700 --> 00:01:19,743 lo que significa que debe ser la única etiqueta que tiene ese "Id" en la página, 16 00:01:19,743 --> 00:01:24,980 y en realidad hay una manera muy fácil de encontrar nodos DOM que tienen "Id", 17 00:01:24,980 --> 00:01:30,342 un método del objeto "document" llamado "getElementById". 18 00:01:30,342 --> 00:01:33,198 Vamos a usarlo aquí en la etiqueta "", 19 00:01:33,198 --> 00:01:38,527 empezando por declarar una variable en la que lo vamos a guardar, la variable "var headingEl". 20 00:01:38,527 --> 00:01:42,299 Me gusta terminar los nombres de mis variables con "El" o con "Node", 21 00:01:42,299 --> 00:01:47,390 así puedo saber que están almacenando un elemento, que también llamamos nodo. 22 00:01:47,390 --> 00:01:52,743 Ahora usamos el método. Es un método ligado al objeto global "document", 23 00:01:52,743 --> 00:01:58,964 así que escribimos "document", luego un punto, luego "getElementById", 24 00:01:58,964 --> 00:02:04,753 luego un paréntesis porque es una función. No voy a encontrar nada así simplemente, 25 00:02:04,753 --> 00:02:07,733 porque no sabe qué "Id" estoy buscando. 26 00:02:07,733 --> 00:02:12,011 Dentro de los paréntesis le tengo que pasar a la función el "Id" que estoy buscando, 27 00:02:12,011 --> 00:02:21,354 como una cadena de caracteres entre comillas. Así que escribo "heading". 28 00:02:21,354 --> 00:02:24,098 ¿Cómo sabemos si encontramos el elemento, 29 00:02:24,098 --> 00:02:26,537 antes de tratar de manipularlo? 30 00:02:26,537 --> 00:02:31,770 Una manera es usar la función "console.log". 31 00:02:31,770 --> 00:02:36,202 Ahora, puedes pausar el video, y hacer que se desplieguen tus herramientas de desarrollador. 32 00:02:36,202 --> 00:02:40,896 Intenta con los atajos Command + option + i para Mac, 33 00:02:40,896 --> 00:02:48,029 o Control + Shift + i para Windows. Alguno de esos generalmente funciona. 34 00:02:48,029 --> 00:02:54,833 ¿Viste el "" en tu consola? Si lo viste, eso significa que 35 00:02:54,833 --> 00:03:00,255 completamos el paso uno. Encontramos el elemento y lo guardamos en una variable. 36 00:03:00,255 --> 00:03:06,359 Para el paso dos, vamos a manipular el elemento usando la forma que conocemos, 37 00:03:06,359 --> 00:03:10,679 cambiando "innerHTML". Vamos a ver, eso significa que vamos a escribir 38 00:03:10,679 --> 00:03:17,627 "headingEL.innerHTML =", tan, tan, tan, es el momento de la verdad, 39 00:03:17,627 --> 00:03:22,721 "All about cats". ¡Aquí vamos! 40 00:03:22,721 --> 00:03:26,655 Empezamos. La "gatificación" ha comenzado. 41 00:03:26,655 --> 00:03:32,320 Ahora van a tratar de hacer algo como esto en el desafío.