WEBVTT

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,

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,

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").

00:00:17.178 --> 00:00:23.267
Voy a usar JavaScript para hacer eso, en lugar de simplemente modificar el HTML,

00:00:23.267 --> 00:00:26.431
para que eventualmente, pueda cambiar esto

00:00:26.431 --> 00:00:32.096
en una extensión del navegador para cambiar cualquier página web a una sobre gatos.

00:00:32.096 --> 00:00:37.450
¿No sería emocionante que toda la Internet fuera sobre gatos?

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.

00:00:44.761 --> 00:00:50.340
Vamos a cambiar cada parte a la vez, empezando con el encabezado,

00:00:50.340 --> 00:00:53.909
usando los dos pasos que recién aprendimos.

00:00:53.909 --> 00:00:59.268
El primer paso es encontrar el nodo del DOM que contiene el encabezado.

00:00:59.268 --> 00:01:06.895
La manera en que encontramos el nodo anteriormente fue escribiendo "document.body",

00:01:06.895 --> 00:01:12.492
pero ahora quiero ser más específica, quiero solamente este "".

00:01:12.492 --> 00:01:14.700
Bueno, este "" tiene un "Id",

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,

00:01:19.743 --> 00:01:24.980
y en realidad hay una manera muy fácil de encontrar nodos DOM que tienen "Id",

00:01:24.980 --> 00:01:30.342
un método del objeto "document" llamado "getElementById".

00:01:30.342 --> 00:01:33.198
Vamos a usarlo aquí en la etiqueta "",

00:01:33.198 --> 00:01:38.527
empezando por declarar una variable en la que lo vamos a guardar, la variable "var headingEl".

00:01:38.527 --> 00:01:42.299
Me gusta terminar los nombres de mis variables con "El" o con "Node",

00:01:42.299 --> 00:01:47.390
así puedo saber que están almacenando un elemento, que también llamamos nodo.

00:01:47.390 --> 00:01:52.743
Ahora usamos el método. Es un método ligado al objeto global "document",

00:01:52.743 --> 00:01:58.964
así que escribimos "document", luego un punto, luego "getElementById",

00:01:58.964 --> 00:02:04.753
luego un paréntesis porque es una función. No voy a encontrar nada así simplemente,

00:02:04.753 --> 00:02:07.733
porque no sabe qué "Id" estoy buscando.

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,

00:02:12.011 --> 00:02:21.354
como una cadena de caracteres entre comillas.
Así que escribo "heading".

00:02:21.354 --> 00:02:24.098
¿Cómo sabemos si encontramos el elemento,

00:02:24.098 --> 00:02:26.537
antes de tratar de manipularlo?

00:02:26.537 --> 00:02:31.770
Una manera es usar la función "console.log".

00:02:31.770 --> 00:02:36.202
Ahora, puedes pausar el video, y hacer que se desplieguen tus herramientas de desarrollador.

00:02:36.202 --> 00:02:40.896
Intenta con los atajos Command + option + i para Mac,

00:02:40.896 --> 00:02:48.029
o Control + Shift + i para Windows.
Alguno de esos generalmente funciona.

00:02:48.029 --> 00:02:54.833
¿Viste el "" en tu consola? Si lo viste, eso significa que

00:02:54.833 --> 00:03:00.255
completamos el paso uno. Encontramos el elemento y lo guardamos en una variable.

00:03:00.255 --> 00:03:06.359
Para el paso dos, vamos a manipular el elemento usando la forma que conocemos,

00:03:06.359 --> 00:03:10.679
cambiando "innerHTML". Vamos a ver, eso significa que vamos a escribir

00:03:10.679 --> 00:03:17.627
"headingEL.innerHTML =", tan, tan, tan, es el momento de la verdad,

00:03:17.627 --> 00:03:22.721
"All about cats". ¡Aquí vamos!

00:03:22.721 --> 00:03:26.655
Empezamos. La "gatificación" ha comenzado.

00:03:26.655 --> 00:03:32.320
Ahora van a tratar de hacer algo como esto en el desafío.