0:00:01.287,0:00:07.387
Tengo esta página web: "All about dogs" ("Todo sobre perros"), que es genial, pero en realidad,

0:00:07.387,0:00:12.583
y sé que no todos estarán de acuerdo conmigo, soy una persona más afín a los gatos,

0:00:12.583,0:00:17.178
y quisiera cambiar esta página web a una página "All about cats" ("Todo sobre gatos").

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

0:00:23.267,0:00:26.431
para que eventualmente, pueda cambiar esto

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

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

0:00:37.450,0:00:44.761
Ahora, esta página web tiene un encabezado, un párrafo y un par de imágenes.

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

0:00:50.340,0:00:53.909
usando los dos pasos que recién aprendimos.

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

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

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

0:01:12.492,0:01:14.700
Bueno, este "" tiene un "Id",

0:01:14.700,0:01:19.743
lo que significa que debe ser la única etiqueta que tiene ese "Id" en la página,

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

0:01:24.980,0:01:30.342
un método del objeto "document" llamado "getElementById".

0:01:30.342,0:01:33.198
Vamos a usarlo aquí en la etiqueta "",

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

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

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

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

0:01:52.743,0:01:58.964
así que escribimos "document", luego un punto, luego "getElementById",

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

0:02:04.753,0:02:07.733
porque no sabe qué "Id" estoy buscando.

0:02:07.733,0:02:12.011
Dentro de los paréntesis le tengo que pasar a la función el "Id" que estoy buscando,

0:02:12.011,0:02:21.354
como una cadena de caracteres entre comillas.[br]Así que escribo "heading".

0:02:21.354,0:02:24.098
¿Cómo sabemos si encontramos el elemento,

0:02:24.098,0:02:26.537
antes de tratar de manipularlo?

0:02:26.537,0:02:31.770
Una manera es usar la función "console.log".

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

0:02:36.202,0:02:40.896
Intenta con los atajos Command + option + i para Mac,

0:02:40.896,0:02:48.029
o Control + Shift + i para Windows.[br]Alguno de esos generalmente funciona.

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

0:02:54.833,0:03:00.255
completamos el paso uno. Encontramos el elemento y lo guardamos en una variable.

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

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

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

0:03:17.627,0:03:22.721
"All about cats". ¡Aquí vamos!

0:03:22.721,0:03:26.655
Empezamos. La "gatificación" ha comenzado.

0:03:26.655,0:03:32.320
Ahora van a tratar de hacer algo como esto en el desafío.