0:00:01.170,0:00:06.440
Estoy de vuelta con mi página web sobre perros, y estoy determinada a usar JavaScript

0:00:06.440,0:00:11.888
y la API de DOM para cambiar esta página a una que sea completamente sobre gatos.

0:00:11.888,0:00:17.464
Y hay un gran problema que había ignorado. [br]Bueno, en realidad hay un problema llamado

0:00:17.464,0:00:23.671
perro, bueno de hecho hay dos perros: las imágenes.[br]No puedo tener imágenes

0:00:23.671,0:00:29.478
de estos perros adorables en mi página de gatos adorables. Y necesito cambiarlas.

0:00:29.487,0:00:36.342
Así que voy a empezar por encontrar esas imágenes usando "getElementsByTagName".

0:00:36.342,0:00:47.869
'var imageEls = document.getElementsByTagName("img");'

0:00:47.869,0:00:50.668
Ahora, como eso me regresa múltiples elementos,

0:00:50.668,0:00:54.725
necesito usar un ciclo "for" para acceder a sus elementos, así que voy a empezar.

0:00:54.725,0:01:04.427
"var i=0; i

0:01:04.427,0:01:11.456
Ok. ¿Pero qué voy a poner dentro de este ciclo "for"?[br]No puedo cambiar elementos tipo imagen con

0:01:11.456,0:01:18.755
"innerHTML" porque las etiquetas de imagen no tienen "innerHTML". Son etiquetas que se cierran solas.

0:01:18.755,0:01:23.796
En su lugar, necesito cambiar lo que hace que haya perros en la imagen,

0:01:23.796,0:01:27.176
la URL de las fotografías, lo que está especificado

0:01:27.176,0:01:30.721
en el atributo "src" en cada una de las etiquetas.

0:01:30.721,0:01:36.461
Podemos cambiar los atributos de los elementos usando notación de punto. Déjenme mostrarles cómo.

0:01:36.461,0:01:43.179
En primer lugar, accedemos al elemento actual con notación de corchetes, y luego escribimos punto,

0:01:43.179,0:01:50.653
y ponemos el nombre del atributo de HTML como el nombre de la propiedad de JavaScript, "src", igual...

0:01:50.653,0:01:54.841
y luego le asignamos un nuevo valor; y puedo poner una cadena de caracteres vacía.

0:01:54.841,0:01:57.298
Fíjense que las imágenes desaparecieron,

0:01:57.298,0:02:01.672
porque una cadena de caracteres vacía no apunta a ninguna imagen.

0:02:01.672,0:02:07.664
Para descubrir cuál debería ser esta nueva URL, voy a pegar la URL anterior aquí,

0:02:07.664,0:02:13.022
y cambiar el nombre del archivo por "cat", porque yo sé

0:02:13.022,0:02:16.842
que ésa es la URL de la imagen de un gato en Khan Academy.

0:02:16.842,0:02:23.404
¡Sí! Los perros ahora son gatos, y nuestra "gatificación" está casi completa.

0:02:23.404,0:02:30.897
¿Ves algo más que todavía tiene que ver con perros?[br]Es muy sutil pero,

0:02:30.897,0:02:36.827
queda una cosa, el enlace a Wikipedia. [br]El enlace se va a la página de perros,

0:02:36.827,0:02:41.448
y si el usuario sigue el enlace, va a descubrir mi trampa.

0:02:41.448,0:02:47.347
Así que quiero mandarlo a la página de gatos. [br]¿Cómo encuentro ese enlace en JavaScript?

0:02:47.347,0:02:51.828
Podría asignarle a este enlace un "Id" y usar "getElementById".

0:02:51.828,0:02:57.096
O podría usar "getElementsByTagName" y cambiar todos los enlaces en la página.

0:02:57.096,0:02:59.414
O podría hacer algo fantástico y

0:02:59.414,0:03:06.657
encontrar sólo los enlaces que lleven a páginas sobre perros, usando un selector de consulta de CSS.

0:03:06.657,0:03:11.822
Déjame mostrarte la consulta de CSS que quiero hacer primero aquí en la etiqueta "".

0:03:11.822,0:03:15.946
Entonces, esta consulta de CSS va a encontrar todos los enlaces que tengan algo que ver con perros.

0:03:15.946,0:03:19.325
Primero voy a teclear "a", porque estoy buscando enlaces.

0:03:19.325,0:03:26.041
Luego voy a escribir: '[href*="Dog"]'.

0:03:26.041,0:03:31.950
Así que esto le dice a CSS que encuentre cualquier enlace que contenga "Dogs".

0:03:31.950,0:03:38.166
Y luego le vamos a asignar el color morado.[br]¡Tan tan!, lo seleccionó.

0:03:38.166,0:03:43.566
Esto está muy bien, éste es un selector de atributos, y hay muchas

0:03:43.566,0:03:49.467
maneras ordenadas de usar selectores de atributos para ir a lo más profundo en tu documento.

0:03:49.467,0:03:58.041
Así que ahora para encontrar eso en JavaScript, podemos usar "document.querySelectorAll", y escribimos:

0:03:58.041,0:04:07.992
"var linkEls = document.querySelectorAll", y luego podemos pegar simplemente

0:04:07.992,0:04:12.580
el selector que acabamos de hacer, aunque tenemos que asegurarnos

0:04:12.580,0:04:22.695
de que tenemos comillas dobles. Aquí están. Así que ahora esto se ve como una cadena de caracteres correcta.

0:04:22.695,0:04:27.558
Y ahora necesito hacer las iteraciones, así que una vez más hacemos un ciclo "for",

0:04:27.558,0:04:34.645
deberíamos estar muy familiarizados con este ciclo "for", y para cada elemento

0:04:34.645,0:04:41.642
quiero cambiar el enlace a la página web de gatos en Wikipedia.

0:04:41.642,0:04:45.501
Así que voy a escribir "linkEls[i].href"

0:04:45.501,0:04:50.681
porque ese es el nombre del atributo que estamos cambiando, luego escribo igual a...

0:04:50.681,0:05:00.113
y luego voy a encontrar esta URL y la pego aquí abajo y sólo le cambio aquí a "Cat",

0:05:00.113,0:05:04.305
porque estoy segura de que ésta es la URL de esa página.

0:05:04.305,0:05:10.532
¡Tan tan! La "gatificación" del mundo está completada.[br]Pero tú no has terminado

0:05:10.532,0:05:16.206
de aprender cómo manipular páginas web con JavaScript, así que continúa por aquí.