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