1
00:00:01,170 --> 00:00:06,440
Estoy de vuelta con mi página web sobre perros, y estoy determinada a usar JavaScript

2
00:00:06,440 --> 00:00:11,888
y la API de DOM para cambiar esta página a una que sea completamente sobre gatos.

3
00:00:11,888 --> 00:00:17,464
Y hay un gran problema que había ignorado. 
Bueno, en realidad hay un problema llamado

4
00:00:17,464 --> 00:00:23,671
perro, bueno de hecho hay dos perros: las imágenes.
No puedo tener imágenes

5
00:00:23,671 --> 00:00:29,478
de estos perros adorables en mi página de gatos adorables. Y necesito cambiarlas.

6
00:00:29,487 --> 00:00:36,342
Así que voy a empezar por encontrar esas imágenes usando "getElementsByTagName".

7
00:00:36,342 --> 00:00:47,869
'var imageEls = document.getElementsByTagName("img");'

8
00:00:47,869 --> 00:00:50,668
Ahora, como eso me regresa múltiples elementos,

9
00:00:50,668 --> 00:00:54,725
necesito usar un ciclo "for" para acceder a sus elementos, así que voy a empezar.

10
00:00:54,725 --> 00:01:04,427
"var i=0; i

11
00:01:04,427 --> 00:01:11,456
Ok. ¿Pero qué voy a poner dentro de este ciclo "for"?
No puedo cambiar elementos tipo imagen con

12
00:01:11,456 --> 00:01:18,755
"innerHTML" porque las etiquetas de imagen no tienen "innerHTML". Son etiquetas que se cierran solas.

13
00:01:18,755 --> 00:01:23,796
En su lugar, necesito cambiar lo que hace que haya perros en la imagen,

14
00:01:23,796 --> 00:01:27,176
la URL de las fotografías, lo que está especificado

15
00:01:27,176 --> 00:01:30,721
en el atributo "src" en cada una de las etiquetas.

16
00:01:30,721 --> 00:01:36,461
Podemos cambiar los atributos de los elementos usando notación de punto. Déjenme mostrarles cómo.

17
00:01:36,461 --> 00:01:43,179
En primer lugar, accedemos al elemento actual con notación de corchetes, y luego escribimos punto,

18
00:01:43,179 --> 00:01:50,653
y ponemos el nombre del atributo de HTML como el nombre de la propiedad de JavaScript, "src", igual...

19
00:01:50,653 --> 00:01:54,841
y luego le asignamos un nuevo valor; y puedo poner una cadena de caracteres vacía.

20
00:01:54,841 --> 00:01:57,298
Fíjense que las imágenes desaparecieron,

21
00:01:57,298 --> 00:02:01,672
porque una cadena de caracteres vacía no apunta a ninguna imagen.

22
00:02:01,672 --> 00:02:07,664
Para descubrir cuál debería ser esta nueva URL, voy a pegar la URL anterior aquí,

23
00:02:07,664 --> 00:02:13,022
y cambiar el nombre del archivo por "cat", porque yo sé

24
00:02:13,022 --> 00:02:16,842
que ésa es la URL de la imagen de un gato en Khan Academy.

25
00:02:16,842 --> 00:02:23,404
¡Sí! Los perros ahora son gatos, y nuestra "gatificación" está casi completa.

26
00:02:23,404 --> 00:02:30,897
¿Ves algo más que todavía tiene que ver con perros?
Es muy sutil pero,

27
00:02:30,897 --> 00:02:36,827
queda una cosa, el enlace a Wikipedia. 
El enlace se va a la página de perros,

28
00:02:36,827 --> 00:02:41,448
y si el usuario sigue el enlace, va a descubrir mi trampa.

29
00:02:41,448 --> 00:02:47,347
Así que quiero mandarlo a la página de gatos. 
¿Cómo encuentro ese enlace en JavaScript?

30
00:02:47,347 --> 00:02:51,828
Podría asignarle a este enlace un "Id" y usar "getElementById".

31
00:02:51,828 --> 00:02:57,096
O podría usar "getElementsByTagName" y cambiar todos los enlaces en la página.

32
00:02:57,096 --> 00:02:59,414
O podría hacer algo fantástico y

33
00:02:59,414 --> 00:03:06,657
encontrar sólo los enlaces que lleven a páginas sobre perros, usando un selector de consulta de CSS.

34
00:03:06,657 --> 00:03:11,822
Déjame mostrarte la consulta de CSS que quiero hacer primero aquí en la etiqueta "".

35
00:03:11,822 --> 00:03:15,946
Entonces, esta consulta de CSS va a encontrar todos los enlaces que tengan algo que ver con perros.

36
00:03:15,946 --> 00:03:19,325
Primero voy a teclear "a", porque estoy buscando enlaces.

37
00:03:19,325 --> 00:03:26,041
Luego voy a escribir: '[href*="Dog"]'.

38
00:03:26,041 --> 00:03:31,950
Así que esto le dice a CSS que encuentre cualquier enlace que contenga "Dogs".

39
00:03:31,950 --> 00:03:38,166
Y luego le vamos a asignar el color morado.
¡Tan tan!, lo seleccionó.

40
00:03:38,166 --> 00:03:43,566
Esto está muy bien, éste es un selector de atributos, y hay muchas

41
00:03:43,566 --> 00:03:49,467
maneras ordenadas de usar selectores de atributos para ir a lo más profundo en tu documento.

42
00:03:49,467 --> 00:03:58,041
Así que ahora para encontrar eso en JavaScript, podemos usar "document.querySelectorAll", y escribimos:

43
00:03:58,041 --> 00:04:07,992
"var linkEls = document.querySelectorAll", y luego podemos pegar simplemente

44
00:04:07,992 --> 00:04:12,580
el selector que acabamos de hacer, aunque tenemos que asegurarnos

45
00:04:12,580 --> 00:04:22,695
de que tenemos comillas dobles. Aquí están. Así que ahora esto se ve como una cadena de caracteres correcta.

46
00:04:22,695 --> 00:04:27,558
Y ahora necesito hacer las iteraciones, así que una vez más hacemos un ciclo "for",

47
00:04:27,558 --> 00:04:34,645
deberíamos estar muy familiarizados con este ciclo "for", y para cada elemento

48
00:04:34,645 --> 00:04:41,642
quiero cambiar el enlace a la página web de gatos en Wikipedia.

49
00:04:41,642 --> 00:04:45,501
Así que voy a escribir "linkEls[i].href"

50
00:04:45,501 --> 00:04:50,681
porque ese es el nombre del atributo que estamos cambiando, luego escribo igual a...

51
00:04:50,681 --> 00:05:00,113
y luego voy a encontrar esta URL y la pego aquí abajo y sólo le cambio aquí a "Cat",

52
00:05:00,113 --> 00:05:04,305
porque estoy segura de que ésta es la URL de esa página.

53
00:05:04,305 --> 00:05:10,532
¡Tan tan! La "gatificación" del mundo está completada.
Pero tú no has terminado

54
00:05:10,532 --> 00:05:16,206
de aprender cómo manipular páginas web con JavaScript, así que continúa por aquí.