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

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

y quisiera cambiar esta página web a una página "All about cats" ("Todo sobre gatos").

Voy a usar JavaScript para hacer eso, en lugar de simplemente modificar el HTML,

para que eventualmente, pueda cambiar esto

en una extensión del navegador para cambiar cualquier página web a una sobre gatos.

¿No sería emocionante que toda la Internet fuera sobre gatos?

Ahora, esta página web tiene un encabezado, un párrafo y un par de imágenes.

Vamos a cambiar cada parte a la vez, empezando con el encabezado,

usando los dos pasos que recién aprendimos.

El primer paso es encontrar el nodo del DOM que contiene el encabezado.

La manera en que encontramos el nodo anteriormente fue escribiendo "document.body",

pero ahora quiero ser más específica, quiero solamente este "".

Bueno, este "" tiene un "Id",

lo que significa que debe ser la única etiqueta que tiene ese "Id" en la página,

y en realidad hay una manera muy fácil de encontrar nodos DOM que tienen "Id",

un método del objeto "document" llamado "getElementById".

Vamos a usarlo aquí en la etiqueta "",

empezando por declarar una variable en la que lo vamos a guardar, la variable "var headingEl".

Me gusta terminar los nombres de mis variables con "El" o con "Node",

así puedo saber que están almacenando un elemento, que también llamamos nodo.

Ahora usamos el método. Es un método ligado al objeto global "document",

así que escribimos "document", luego un punto, luego "getElementById",

luego un paréntesis porque es una función. No voy a encontrar nada así simplemente,

porque no sabe qué "Id" estoy buscando.

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

como una cadena de caracteres entre comillas.
Así que escribo "heading".

¿Cómo sabemos si encontramos el elemento,

antes de tratar de manipularlo?

Una manera es usar la función "console.log".

Ahora, puedes pausar el video, y hacer que se desplieguen tus herramientas de desarrollador.

Intenta con los atajos Command + option + i para Mac,

o Control + Shift + i para Windows.
Alguno de esos generalmente funciona.

¿Viste el "" en tu consola? Si lo viste, eso significa que

completamos el paso uno. Encontramos el elemento y lo guardamos en una variable.

Para el paso dos, vamos a manipular el elemento usando la forma que conocemos,

cambiando "innerHTML". Vamos a ver, eso significa que vamos a escribir

"headingEL.innerHTML =", tan, tan, tan, es el momento de la verdad,

"All about cats". ¡Aquí vamos!

Empezamos. La "gatificación" ha comenzado.

Ahora van a tratar de hacer algo como esto en el desafío.